Laravel と Vue.js の連携（第2回/全3回）

2018/11/22

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 へデータを渡すことができましたので、次回はそのデータをブラウザに出力する部分を書きたいと思います。