Laravel と Vue.js の連携(第2回/全3回)

Laravel は公式で Vue.js を推奨していますので、ぜひ活用してみましょう。
前回の記事では Vue.js と Webpack について見ていきました
第2回目は Laravel 側の処理についてです。

Vue.js と Laravel との連携

バックエンドに Laravel を使用している場合、 Vue.js 単体では、データベースなどからデータを読み込むことができません。(Node.js を利用すればサーバーサイドで Vue.js を動かすこともできますが、ここではサーバーサイドに Laravel を利用する前提です)
Laravel でデータベースからデータを取得・加工し、 Vue.js で(仮想DOMとして)表示する、という流れを、ここでは「連携する」としています。

HTMLに直接データ出力

Laravel で取得したデータを Vue.js に渡す際、少ない量かつ隠ぺいの必要がないデータなら、 HTML に直接出力した方が良いでしょう。
例としては以下のように、<script>タグで Laravel のデータを出力します。
(以下は Laravel の Blade テンプレートの記述です)
<script>
window.laravelData = {{ @json($laravelData) }}
</script>
上記の記述で、 Vue.js では window.laravelData を呼び出してデータが取り出せます。

REST API を利用

REST API(レスト エーピーアイ)」とは、Web(HTTP)を通じてデータをやりとりする設計方法で、サーバーサイドと JavaScript とのデータの受け渡しによく使われます。
特定のURLにアクセスすると、そのURLの名前に応じたデータが返ってくる(表示される)、といった仕組みが一般的です。
例えば https://example.com/api/address にアクセスすると住所情報が表示される、といった具合です。

WordPress 等もそうですが、多くのPHPのフレームワークでは .htaccess ファイルなどを利用して全てのURLへのリクエストをいったん index.php などに送り、そこから適切な処理を呼び出す方式を取っていますが、これを「Routing(ルーティング)」と呼びます。

Laravel では Routing 機能を通して簡単に REST API を提供できるようになっています。
routes/api.php ファイルに JavaScript から受け取るためのURLと、データを返す(表示する)ための処理を記述することで実現できます。

例として、 https://example.com/api/address にアクセスすると住所情報を返す記述は以下のようになります。
<?php

Route::get('/address', function () {
    return '東京都新宿区四谷';
});
Route::get メソッドの第一引数がURLになるのですが、例示したURLには /api が入っているのに、上記コードでは /address となっていることに気づいたでしょうか。
Laravel では、routes/api.php に記述したルーティングは全て /api というURLからのパスになります。(書き方によってパス名は変えられます)

例示のコードでは、ただ住所の文字のみが返される状態で JavaScript で処理しづらいため、データは JSON(ジェイソン) という形式で出力するのが望ましいです。
Laravel では、以下のように配列形式にします。
<?php

Route::get('/address', function () {
    return [
        'address' => '東京都新宿区四谷'
    ];
});
これにより、出力が
東京都新宿区四谷
だったものが
{"address":"東京都新宿区四谷"}
となります。

JavaScript で REST API のデータを取得するには 「XMLHttpRequest」というHTTP通信を行うための機能を使用します。XMLHttpRequest を使ったコード記述は長いため簡略化したライブラリを使うのが一般的で、こういった処理全般を Ajax(エージャックス)とも呼びます。
「XML」と入っているので、本来はXML形式のデータをやりとりするものでしたが、Webでは JSON 形式が広く使われています。

Vue.js には標準で Ajax 機能はないため、 axios(アクシオス) という別の Ajax 専用ライブラリを使うことが多いです。

axios で先ほどの住所データを取得するには以下のように書きます。

axios.get('/api/address').then(function(response) {
    var address = response.data.address;
});
これで var address に住所データが入っているはずです。
今回は以上です。
Laravel から Vue.js へデータを渡すことができましたので、次回はそのデータをブラウザに出力する部分を書きたいと思います。