LaravelでVue.jsを使って開発するファーストステップ
- 公開:
- カテゴリ: PHP Laravel
- タグ: Laravel,LaravelMix,Vue
Laravelではフロントエンドを記述するJavaScript FWとしてかなり早くからVue.jsをサポートしています。
今回は、LaravelでVue.jsを用いた開発を始める際のファーストステップとして、Vue.jsを使った画面出力を行います。
開発環境
今回の開発環境は以下の通りです。
- Laravel 5.8
- Node.js 12.x
npmコマンドを使用するので、Node.jsをインストールしておいてください。
Laravelのルートディレクトリを「laravel/」とします。
Laravelとフロントエンド
Laravelでは、コンパイルなどを要するフロントエンド開発環境としてVue.jsとReactをサポートしています。
この2つのFWにおいては難しい設定の必要がなく、Laravel Mixを用いてすぐにビルドし動くコードを出力する事ができます。
(デフォルトはVue.jsセッティングになっていて、Reactを使う場合は切り替えが必要です。)
Vue.jsを動かす為のセッティング
それでは設定を行っていきます。 まずは、依存パッケージをインストールします。
Laravelのルートディレクトリへ移動し、npmでインストールします。
# Laravelルートディレクトリへ移動
cd /path/to/laravel
# 依存パッケージのインストール
npm install
まずはこれでLaravel Mixを用いたビルドが行えるようになります。
まだ何も開発していませんが、ビルドしてみます。
# Laravelルートディレクトリへ移動
cd /path/to/laravel
# フロントエンドのビルド
npm run dev
ビルドが正常に完了すると、以下のような表示になります。
DONE Compiled successfully in 5371ms
Asset Size Chunks Chunk Names
/css/app.css 174 KiB /js/app [emitted] /js/app
/js/app.js 1.41 MiB /js/app [emitted] /js/app
Vue.jsを使った表示
次に、実際にVue.jsで書いたコードをLaravelで表示してみます。
ところが、コードを書かなくてもサンプルが既にLaravel内に用意されているので、まずはそれを利用して表示させてみます。
サンプルコードは、SFC(単一ファイルコンポーネント)で提供されています。
- laravel/resources/js/components/ExampleComponent.vue
-
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
ありがたいことです。ではこれを表示させましょう。
まずは表示用に適当なビューを用意します。
- laravel/resources/views/sample.blade.php
-
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Title</title>
</head>
<body>
<h1>sample</h1>
<div id="app">
<example-component></example-component>
</div>
<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>
ポイントは3つです。
<meta name="csrf-token" content="{{ csrf_token() }}">
CSRFトークンをhead内metaタグにセットしています。
<div id="app">
<example-component></example-component>
</div>
Vueで描画する領域としてdivタグを設置し、id名を「app」とします。
ExampleComponentを表示するため、example-componentタグを設置します。
<script src="{{ asset('/js/app.js') }}"></script>
ビルドされ出力されるapp.jsを読み込みます。
最後に、ルーティングです。
- laravel/routes/web.php
-
Route::get('/sample', function () {
return view('sample');
});
ではブラウザからアクセスして確認してみます。
ExampleComponentからの表示が確認できました。
Vue.jsで実装した機能を動作させる
さすがにサンプルコードを表示させただけでは手応えも薄いと思うので、一度はきちんとコードを書いて表示させてみます。
まずはこちらもSFCを作成します。
- laravel/resources/js/components/SampleComponent.vue
-
<template>
<div>
<p>
Count : <span :class="numberClasses">{{ number }}</span>
</p>
<button @click="countDown">−1</button>
<button @click="countUp">+1</button>
</div>
</template>
<script>
export default {
name: "SampleComponent",
data () {
return {
number: 0
}
},
computed: {
numberClasses: function () {
return {
'positive': (this.number > 0),
'negative': (this.number < 0)
}
}
},
methods: {
countDown: function () {
this.number--
},
countUp: function () {
this.number++
}
}
}
</script>
<style scoped>
p {
margin: 10px;
}
.positive {
color: blue;
}
.negative {
color: red;
}
</style>
簡単なカウントアップ・ダウンのコンポーネントを書きました。
次に、Vueアプリケーションにこのコンポーネントを登録し、動作するようにします。
app.jsに一行追加します。
- laravel/resources/js/app.js
-
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// 追加
Vue.component('sample-component', require('./components/SampleComponent.vue').default);
const app = new Vue({
el: '#app'
});
最後に、Bladeテンプレート(ビュー)の方でSampleComponentを表示するようにします。
- laravel/resources/views/sample.blade.php
-
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Title</title>
</head>
<body>
<h1>sample</h1>
<div id="app">
<sample-component></sample-component>
</div>
<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>
これで実装と準備は終わったので、npm run devでビルドして、ブラウザから確認してみます。
Vue.jsで実装したフロントエンドがLaravel上で動作している事を確認できました。
カウントアップ・ダウンの動作も問題ないようですね。
まとめ
以上で作業は修了です。 私の記憶では、まだVue.jsがあまり広まっていない頃からLaravelではサポートを開始していました。 そんなVue.jsももう確固たるポジションを確立していて、Laravel陣営の先見の明たるや。です。
Laravel&Vue.jsの組み合わせはおすすめです。是非試してみてください。
サンプルコード