TO DO リスト表示のみ (Vue.js + Ajax + Laravel)

2019/06/10 2019/07/03

前回、Vue.js で TO DO リストを作成しました。

Vue.js 入門（TO DO リスト＋編集機能）

今回はここから一歩進み、Ajaxを使って非同期通信を行います。

まずはデータベースに入れたレコードをAjaxを使って取得して表示するところまで演習で行います。

デモサイト

前提知識

非同期関数（Ajax）について

JavaScriptは基本的にシングルスレッドで動作する言語なので、２つ以上の処理を同時に行うことはできません。（※並行処理できない）

しかし、その一方 JavaScript以外（例えばデータベースなど）に仕事を任せている間、その処理を待たないで次へ進めることができます。（※非同期処理ができる）

Ajaxとは時間のかかるHTTP通信処理を非同期で行う技術です。

具体的には、ユーザーの入力・操作に応じてAPIサーバー側に非同期でHTTPリクエストを送り、取得したデータを元に画面を動的に書き換えるということを行います。

代表的な実装例

代表的な実装を挙げるならば、jQuery の $.ajax() が有名です。

今回の演習でも jQuery の $.ajax() を使います。

なお、Ajax を使った非同期通信のやり方は以前エントリーしました。よくわからない方は以下をご参考ください。

Ajax入門

作業手順

前提としてテーブルの作成からシーダーまでの作業は終わっているとします。

テーブルの構成は以下のようにシンプルにしました。

カラム名	データ型
id	int(10) AUTO_INCREMENT
task	varchar(255)
created_at	timestamp
updated_at	timestamp

手順

JavaScript（Vue.js）
JavaScript（Ajax）通信
Laravel（ルーティング＆コントローラ）
JavaScript関数（addMessage）
Laravel（ビュー）

１.JavaScript（Vue.js）

JavaScriptのフレームワークはVue.jsにします。

必要なデータプロパティを定義します。


// Ajax通信先のドメインを定義しておく
var baseURL = location.origin + "/practice/vue";

var todo = new Vue({
    el: '#app',
    data: {
        list: [],   // 入力テキストを入れる配列
        last: null, // 入力テキストの最終更新日
    },
});

２.JavaScript（Ajax）通信

Vueインスタンスの外にAjaxによる非同期通信を記述します。

その際、通信エラーの原因を取得する記述もしておくと、デバッグに役立ちます。

Ajax入門（通信エラーとなった原因の取得）


：
getMessages(true); // 初回起動

function getMessages() {

    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
    });

    // Ajaxによる非同期通信
    $.ajax({
        type: "POST",
        url: baseURL + '/messages_list_api',
        dataType: "json",
        data: { "created_at":date }
    }).done(function(results) {
        // 成功したら返り値をaddMessage()に入れて起動させる
        addMessage(results);
    }).fail(function(jqXHR, textStatus, errorThrown) {
        alert('メッセージの取得に失敗しました。');
        console.log("ajax通信に失敗しました");
        console.log("jqXHR          : " + jqXHR.status);     // HTTPステータスが取得
        console.log("textStatus     : " + textStatus);       // タイムアウト、パースエラー
    });

};
：

３.Laravel（ルーティング＆コントローラ）

ルーティング


Route::post('vue/messages_list_api', 'PracticeVueApiController@getAllMessage'); // メッセージ取得API

コントローラ

todosテーブルからレコードを全て抽出します。

抽出したデータは json形式に変換して返します。


public function getAllMessage(Request $request) {

    $list = DB::select(
        "select task, created_at from todos order by created_at asc"
    );

    return response()->json(['tasks' => $list]);
}

４.JavaScript関数（addMessage）

Ajax通信が成功すれば返り値を addMessage() に入れて起動させます。

Vue.jsで定義した配列 list[] にいれます。

このあとのHTMLでこの配列を回して表示させます。


function addMessage(results) {
    $.each(results.tasks, function() {
            todo.list.push(this);
            todo.last = this; // 最終更新日入れる→todo.last.created_at でアクセス
    });
}

５.Laravel（ビュー）

API の返り値を addMessage() によって list配列 に入れました。

これを v-for でループ処理で表示させます。


：
<meta name="csrf-token" content="{{ csrf_token() }}"><!--必須-->
：
<!--ループ処理-->
<ul class="list-group">
    <li class="list-group-item" v-for="todo in list">@{{ todo.task }}</li>
</ul>
：

ここまでの工程で、とりあえずデータベースのデータを表示させることはできました。

次は入力機能をつけて、非同期で表示させる作業をやってみます。

以上です。

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

Stack Overflow によると、よく使われているプログラミング言語はJavaScriptが7年連続で第１位だそうです。（2019年現在）わからない箇所だけネットで調べるやり方は知識が断片化するので、いつか、本を読んでJavaScriptの知識を体系的に整理したいと思っていました。この本はAmazonでも評価が高く、以前から気になっていた本です。図解と実行結果、短めのサンプルプログラムと見やすく解りやすかったのでおススメですね。「超」入門と書いてありますが、後半になると jQuery や Ajax の内容が出てきます。Ajaxの情報はネットでもあまりなかったので僕にとってはよかったです。

Amazonで詳細を見る

オススメ