自分だけのクイズ作成 - Quipha公開中

【Laravel】Vue.js v3導入とComposition API実装

JavaScript
スポンサーリンク

はじめに

今回は、LaravelプロジェクトにVue3を導入する手順を解説しました。
私もそうですが、今までフロントエンドはjQueryを利用してきた方は多いのではないでしょうか。

Vueのメリット
  • 学習コストが低い
  • 導入しやすい
  • 開発効率が上がる
  • 人気のJavaScriptフレームワークであり将来性・技術的に習得しておきたい

と、色々ありますが細かいことは気にせず、是非試してみましょう。

Laravelの構築方法は以下をご覧ください。

使用するバージョン
  • Laravel Framework 8.69.0

Quipha

個人開発ですがQuiphaというサービスを開発しました。
Webアプリケーションであり、LaravelとVue3(Composition APIも使用)で作成しました。

良かったら、会員登録して動作を試してみて下さい。

Vue3の導入

Vue.js v3.0は2020年9月に正式にリリースされました。
詳しい使い方などは、公式サイトを確認しましょう。

Vue.js
Vue.js - The Progressive JavaScript Framework

Laravelプロジェクトを構築した状態で、解説していきます。
カレントディレクトリをプロジェクトフォルダにし、以下のコマンドで、最新安定版のVue3をインストールしましょう。

npm install vue@next

package.jsonにvueが追加されました。

{
..
    "dependencies": {
        "vue": "^3.2.21"
    }
}

webpack.mix.jsを開き、以下のように修正します。

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    // 追加
    .vue();

npmでビルドを行います。開発時なのでdevを指定しました。

npm run dev

以下のようなメッセージが表示され、vue-loaderのインストールが行われました。

Additional dependencies must be installed. This will only take a moment.
 
Running: npm install vue-loader@^16.2.0 --save-dev --legacy-peer-deps
 
Finished. Please run Mix again.

package.jsonにvue-loaderが追加されました。

...
    "devDependencies": {
...
        "vue-loader": "^16.2.0"
    },
    "dependencies": {
        "vue": "^3.2.21"
    }
}

もう一度ビルドを行いました。

npm run dev

エラーが発生してしまいました・・

[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'

以前はこのエラーが発生しなかったので、今後解決するかも知れません。

vue-loaderのバージョンが古いようで、再インストールしました。

npm i vue-loader

16.2.0から、16.8.3にバージョンが上がりました。

...
    "devDependencies": {
...
        "vue-loader": "^16.8.3"
    },
    "dependencies": {
        "vue": "^3.2.21"
    }
}

もう一度ビルドを行いましょう。

npm run dev

今度はビルドに成功し、app.jsやapp.cssが無事に作成されました。

✔ Compiled Successfully in 1562ms
┌────────────────────┬─────────┐
│               File │  Size   │
├────────────────────┼─────────┤
│         /js/app.js │ 606 KiB │
│        css/app.css │ 1 bytes │
└────────────────────┴─────────┘
webpack compiled successfully
スポンサーリンク

サンプルコード

それでは簡単なサンプルコードを書いてみましょう。
Laravelのテンプレートファイルを作成します。

resources\views\vue.blade.php

<html>
<body>
    <div id="counter">
        カウントアップ: @{{ counter }}
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

bladeの中の{{ xxx }}は、Laravelの変数を扱うことができ、サーバーサイドでレンダリングを行うことができます。
ただし、Vueでも {{ counter }} という文字列をレンダリングに使用するため、先頭にアットマークを追加し、@{{ counter }} のように記述します。
bladeがアットマークを削除し、HTMLソース上ではそのまま {{ counter }} が表示されます。

以下のJavaScriptファイルを修正します。

resources\js\bootstrap.js

一行追加しましょう。これでVueが使用できるようになりました。

window.Vue = require("vue");

次に、以下のファイルを修正します。

resources\js\app.js

以下のようなコードを記述しました。
カウンターを定義し、1秒ごとにカウントアップして数値を表示します。

require("./bootstrap");

const Counter = {
    data() {
        return {
            counter: 0,
        };
    },
    mounted() {
        setInterval(() => {
            this.counter++;
        }, 1000);
    },
};

Vue.createApp(Counter).mount("#counter");

最後にLaravelのルーティングを定義しましょう。

routes\web.php

以下を追加します。

Route::get('/vue', function () {
    return view('vue');
});

Laravelは開発用の組み込みサーバが使えるので、以下のコマンドでサーバーを起動します。

php artisan serve

以下のURLにアクセスします。

http://localhost:8000/vue

画面が表示され、自動的にカウントアップされる数値が表示されました。

counterという変数が変わると同時に、画面の表示が変わっています。
これがリアクティブになっているということであり、Vueの特長の一つです。

Composition APIで実装

折角ですので、Vue3の目玉機能である、Composition APIを試してみましょう。
bootstrap.jsに追記した以下の行はコメントアウトします。

//window.Vue = require("vue");

カウンターの処理を行う関数を用意します。
書き方が先程と違い、戸惑うかも知れませんが、動作は同じになります。

resources\js\vueCounter.js

import { ref, onMounted } from "vue";

export default function vueCounter() {

    // リアクティブな参照
    let counter = ref(0);

    onMounted(() => {
        setInterval(() => {
            // valueを更新。画面も更新される
            counter.value++;
        }, 1000);
    });

    return {
        counter,
    };
}

次に、app.jsを以下のように修正します。(先程追加したサンプルコードは消してください)

require("./bootstrap");
import vueCounter from "./vueCounter";
import { createApp } from "vue";

createApp({
    setup() {

        // カウンターを更新する
        const { counter } = vueCounter();

        return {
            counter,
        };
    },
}).mount("#counter");

この状態で、先程と同じ画面を開くと、カウントアップされた画面が表示されます。

メインの処理は肥大化させないようにしましょう。
このように役割ごとに関数を定義し、再利用(共通化)をしていくと保守性が高くなります。

Composition APIについてさらに詳しく知りたい場合は、以下の記事を参考にしてください。

はじめに | Vue.js
Vue.js - The Progressive JavaScript Framework

さいごに

今回は、LaravelプロジェクトでVue3を使用できるように解説しました。
是非、試してみてください。

コメント

タイトルとURLをコピーしました