RitoLabo

LaravelでVue.jsを使って開発するファーストステップ

  • 公開:
  • カテゴリ: PHP Laravel
  • タグ: Laravel,LaravelMix,Vue

Laravelではフロントエンドを記述するJavaScript FWとしてかなり早くからVue.jsをサポートしています。

今回は、LaravelでVue.jsを用いた開発を始める際のファーストステップとして、Vue.jsを使った画面出力を行います。

アジェンダ
  1. 開発環境
  2. Laravelとフロントエンド
  3. Vue.jsを動かす為のセッティング
  4. Vue.jsを使った表示
  5. 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');
});

ではブラウザからアクセスして確認してみます。

Vue.js表示確認

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スクリプト確認画面

Vue.jsで実装したフロントエンドがLaravel上で動作している事を確認できました。

カウントアップ・ダウンの動作も問題ないようですね。

Vue.jsインタラクション

まとめ

以上で作業は修了です。 私の記憶では、まだVue.jsがあまり広まっていない頃からLaravelではサポートを開始していました。 そんなVue.jsももう確固たるポジションを確立していて、Laravel陣営の先見の明たるや。です。

Laravel&Vue.jsの組み合わせはおすすめです。是非試してみてください。
サンプルコード