Laravel Vue.js チュートリアルクイズアプリ作成 Vue.jsとVuetifyで綺麗に表示

今回は、Viewの処理でVue.jsとVuetifyの処理を実装していくよ。

ビュー、ビューアー、ビューエスト？日本語でお願いします。

新しい用語についても解説しながら説明していくから大丈夫だよ。

この記事を書いた人

プロコアラ＠エンジニアブロガー
10年間エンジニアをしており、副業でWebサイトやWebサービスを作っています。
一時期資格取得にハマりTOEIC860点オーバー、応用情報処理は取得。休日はラズパイをいじるコアラ好きです。
Follow @top_pro_koala

今回のチュートリアル概要

今回は、Viewが中心のお話です。

Viewは表示を司る処理です。モダンで綺麗なサイトを簡単に作りたいので、Vue.jsとVuetifyを使います。

Viewに処理をお願いするようにControllerを少し変えます。

用語解説

今回のチュートリアルで出てくる用語をざっくりと解説します。

テンプレートエンジン bladeとは？

ざっくりいうと、PHPを簡単に書くための道具です。

部品化したり、簡略化して書いたり書くことができ、作業を効率化できます。

使い方はチュートリアル内で解説します。

Vue.jsとは？

Vue.jsはJavaScriptを制御するためのフレームワークです。

Anglar、React、Vue.jsが有名ですが、Vue.jsは学習コストが一番低いと言われています。

今までjQueryが主流でしたが、Vue.jsの方が簡単に実装できるのでオススメです。

Laravel5.3からVue.jsが標準のJavaScriptフレームワークになり、Mixというビルドツールも加わっています。

Vuetifyとは？

Vuetifyは、Vue.jsで使用できるUIコンポーネントライブラリです。

Googleが提唱するマテリアルデザインを簡単に使うことができ、モダンで綺麗なサイトが作れるようになります。

Vuetifyを使うための準備

npm install

npm installを行い、必要なパッケージをインストールしましょう。

ゲストOSだと遅いため、ホストOSでnpm installを行うことを推奨します。

npm installは、package.jsonに記載されている必要なパッケージをインストールしてくれます。

・npm install

cross-envが無いよというエラーが出たので個別にインストールしました。

・npm install cross-env

Vuetifyを使用するために、インストールしておきましょう。

・npm install vuetify

・npm install material-design-icons-iconfont

あれ？エラーが出た。どうしようどうしよう。。。

落ち着け、素数を数えろ。そしてエラー内容を確認してググるんだ。

バージョンによって、エラーが出る可能性があります。

エラーを見て落ち着いてインストールを進めましょう。

npm run watch-pollの実行

npm run watch-pollを実行すると、resourcesのjsとscssを修正するとコンパイルしてpublicディレクトリに格納してくれます。

便利なのでjsやscssを修正する場合にはコマンドを実行しましょう。

Viewのファイル作成

Viewのファイルを整理しますと、下図のような呼び出し関係になっています。

app.jsの修正

app.jsを以下のように修正します。

Vuetifyが使用できるようになります。

test-componentを追加しておきましょう。

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('test-component', require('./components/TestComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
  theme: {
    primary: '#74B5F8',
    secondary: colors.blue.base,
    accent: colors.amber.base,
  }
});
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

const app = new Vue({
    el: '#app',
});

Controllerの修正

Viewで表示を行うように、コントローラーの処理を修正します。

viewのtestディレクトリのindex.blade.phpを呼び出します。

class TestController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $tests = Test::all();
        // return $tests;
        return view('test.index');
    }

bladeファイルの作成

Controllerから呼ばれるtestディレクトリのindex.blade.phpを作成します。

extends行はlayoutsディレクトリのmaster.blade.phpをテンプレートとして使用しますという意味。

sectionでは逆にmaster.blade.phpから呼び出せるように記載しています。

この中でさらにVueのtest-componentを呼び出しています。

app.jsで記載した通り、TestComponent.vueのtemplate文が呼び出されます。

@extends('layouts.master')

@section('title', 'Page Title')

@section('content')
    <test-component></test-component>
@stop

layoutの作成

resources/views/layoutsディレクトリを作成して、master.blade.phpファイルを新規に作成します。

これは、全ページで呼び出されるテンプレートとなるページとなります。

resources/viewsディレクトリにあるwelcome.blade.phpをコピーして修正し、Vue.jsに必要なものを追加しています。

<!-- Stored in resources/views/layouts/master.blade.php -->

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
    </head>
    <body>
        <div id="app">
            <v-app id="inspire">
                <v-content>
                    <v-container fluid>
                        @yield('content')
                    </v-container>
                </v-content>
            </v-app>
        </div>
        <script src=" {{ mix('js/app.js') }} "></script>
    </body>
</html>

componentsの作成

とりあえず、データベースの情報は抜きにVuetifyで表示します。

<template>
    <div class="container">
        <v-layout>
            <v-flex>
                <v-card>
                    <v-card-title>
                        <h1>TEST</h1>
                    </v-card-title>
                </v-card>
            </v-flex>
        </v-layout>
    </div>
</template>