【実践Laravel】Vuetifyでトップ画面をサクッと実装する

プログラミング

2020.04.03 2020.03.24

HTML, CSSあんま書きたくないー！
画面手抜きしたい！
LaravelでVuetifyを使いたい！

本記事はこういった悩みに対しての記事です！

この記事を書いている僕（＠Shoot58153748）は、
2020年3月現在メガベンチャーの社内スタートアップの部署で
エンジニア（1年目）をしており、

プログラミング未経験からメガベンチャーへの転職を成功させた経験・ノウハウ
Webエンジニアになってから学んだこと

をブログにまとめています。

前回の記事でLaravelでVuetifyを使う方法を紹介し、ログイン画面を実装しました！

今回はトップ（Welcome）画面を作っていきます。

学びポイントを以下にまとめました。
是非参考にしてください！

今回のポイント

LaravelでのVuetifyを使う方法
Vuetifyで文字サイズをレスポンシブにする

1 Vuetifyでログイン画面を実装
2 まとめ

Vuetifyでログイン画面を実装
まとめ

Vuetifyでログイン画面を実装

画面イメージ

前準備

必要なパッケージ一覧

material-design-icons-iconfont
@mdi/font
vuetify

アイコンやフォントなども含めてvuetifyの機能全て使うには、
vuetifyだけでなく、
material-design-icons-iconfont
と
@mdi/font
も必要です！

以下のコマンドでインストールします。

npm i --save material-design-icons-iconfont @mdi/font vuetify

実装

インストールしたパッケージを読み込ませてWelcome画面を作成していきます。
今回の制作物は以下です。

※アプリの環境設定はこちらの記事を踏襲しています。

Js
Vueコンポーネント
Webpack.mix
画面（blade）

Js

ファイル名：resouces/js/welcome.js

import '@mdi/font/css/materialdesignicons.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
Vue.component('welcome-component', require('./components/WelcomeComponent.vue').default);
new Vue({
  el: '#welcome',
  vuetify: new Vuetify({
  theme: {
    dark: true,
  },
}),
});

インストールしたパッケージたちをインポートして、
コンポーネントを登録します。

Vuetifyのインスタンスを生成するときに
theme: {dark: true,}
を渡してあげることで背景色を黒くしてます。

注意点としては、
import '@mdi/font/css/materialdesignicons.css'; import 'material-design-icons-iconfont/dist/material-design-icons.css';
を読み込まないとアイコンが表示されません。
どうもvuetify2.0以降の仕様ぽいですね。

あとは、
Vue.componentでコンポーネントをrequireしていますが、
後ろにdefaultをつけないとうまくいきませんでした。

続いてコンポーネントWelcomeComponent.vueを作成していきます！

Vueコンポーネント

ファイル名：resouces/js/conponents/WelcomeComponent.vue

<template>
  <v-app>
    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-row
          align="center"
          justify="center"
        >
          <v-col
            cols="12"
            sm="8"
            md="4"
          >
              <div class="text-center pa-4">
                  <p style="color:white; font-weight: bold;" :class="{'headline': $vuetify.breakpoint. smAndDown, 'display-1': $vuetify.breakpoint. mdAndUp}">SHOOT's ROOM</p>
                  <p style="color:white; font-weight: bold;" :class="{'headline': $vuetify.breakpoint. smAndDown, 'display-1': $vuetify.breakpoint. mdAndUp}">Yutori, Gather!!</p>
              </div>

            <div class="text-center pa-4">
                <div class="my-4">
                    <v-btn href="/tweet/index" rounded width="80%" color="primary">Join Tweet Room</v-btn>
                </div>
                <div class="my-4">
                    <v-btn href="/login" rounded width="80%" color="primary">Login</v-btn>
                </div>
                <div class="my-4">
                    <v-btn href="/register" rounded width="80%" color="primary">Register</v-btn>
                </div>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>

画面の配置を決めているのは、
v-containerのclass="fillheight", fluid
と
v-rowのalign="center", justify="center"
です。

画面の中央にボタンや文字が表示されるようになります。

今回特に見て欲しいのが２点。

<p>タグのレスポンシブな文字サイズ表示

と

v-btnのページ遷移です。

前者に関して、

:class="{'headline': $vuetify.breakpoint. smAndDown, 'display-1': $vuetify.breakpoint. mdAndUp}"

クラスをバインディングして、ブレークポイントに応じて文字サイズを出し分けています。

スマートフォンサイズの時はheadlineクラス（Regular 34sp）
スマートフォン以外のディスプレイの時はdisplay-1クラス（Regular 24sp）

文字サイズ、ブレークポイントの厳密な定義に関して、詳しくはVuetifyの公式ドキュメントを見てください。

後者に関しては、

hrefでパスを指定することで画面遷移が可能です。

これでWelcomeページのコンポーネントができました！

webpack.mix

ファイル名：webpack.mix.js

...

mix.js('resources/js/welcome.js', 'public/js')

...

webpackにビルドパスを記載してから

npm run devでビルドします。

画面（Blade）

ファイル名：resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
      <div id="welcome">
          <welcome-component></welcome-component>
      </div>
      <script src="{{ mix('js/welcome.js') }}"></script>
    </body>
</html>

<body>タグのなかで作成したwelcome-componentを呼び出し、

idがwelcomeであるdivタグで囲んであげます。

これでトップ（Welcome）画面完成です！

まとめ

以上、Laravel×Vuetifyでトップ画面を実装しました！

最後に今回のポイントと成果物をまとめます。

ポイント

LaravelでのVuetifyを使う方法
Vuetifyで文字サイズをレスポンシブにする

制作物

Js
Vueコンポーネント
Webpack.mix
画面（blade）

サーバーサイドエンジニアにとって
デザインが整った画面を手軽に早く作れるのは大きな魅力です。

僕はVuetifyに出会ってから、画面は
nuxt×vuetifyかlaravel×vuetify
で作ることが増えています。
（良いのか悪いのかという感じですが）

vuetify自体の学習コストもありますが、
学ぶ価値ありです！

次回は今までSassでデザインしていたツイート画面をVuetifyで書き換えて
おしゃれなデザインにします！