今回は、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>
まとめ
Viewを使用して表示することができました。
次はデータベースの取得データをViewに渡して綺麗に表示してみましょう。
ではでは！