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

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

JavaScript
スポンサーリンク

はじめに

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

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

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

Laravel Sailでの開発環境の構築方法は以下をご覧ください。

Windows
Mac
使用するバージョン
  • Windows 11 or macOS Monterey (M1)
  • Laravel Framework 8 or 9
  • Vue.js v3

2022/04/20 WindowsとMacを使い、最新バージョンで確認しました。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

Vue3の導入

Laravel Sailでの環境として進めます。
「sail up -d」でSailを起動します。

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

Vue.js
Vue.js - The Progressive JavaScript Framework

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

$ sail npm install vue@next

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

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

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

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

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

$ sail 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.8.3"
    },
    "dependencies": {
        "vue": "^3.2.21"
    }
}

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

$ sail 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');
});

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

$ sail npm run dev

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

http://localhost/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");

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

$ sail npm run dev

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

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

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

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

その他

初学者へ

Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Laravelアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

さいごに

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

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

\オススメ/

コメント

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