Laravel × Vue.js × axiosでTODOリストを作るよ! その3

Laravel × Vue × axiosで作るTODOリスト

前回の記事→Laravel × Vue.js × axiosでTODOリストを作るよ! その2

次回の記事→Laravel × Vue.js × axiosでTODOリストを作るよ! その4

Laravel × Vue.js × axiosでTODOリストを作るよ!

前回はLaravelのビューを用意したところで終わっていたと思います。
今回から本格的に、ロジックを書いていきますよ!

  1. Laravelのインストール・セットアップ
  2. Vue.jsとaxiosのインストール
  3. データベースの用意
  4. Laravelのルーティング設定
  5. Laravelのビュー設定
  6. Laravel・Vue.js・axiosでTODOリストのプログラム構築 ←今ココ
  7. 完成

TODOリスト構築

TODOのモデル・コントローラーの用意

まずTODOのためのモデルとコントローラーを用意します。
下記のコマンドをターミナルに入力しましょう

php artisan make:model Models/Todo
php artisan make:controller TodoController

これで
app/Modelsに、モデルファイルの「Todo.php」
app/Http/Controllersに、コントローラーファイルの「TodoController.php」が
それぞれ生成されました。

先にモデルの「Todo.php」から編集していきます。
「Todo.php」を開きTodoモデルを下記のように編集します。

class Todo extends Model{
  protected $table = 'todos';  //モデルとテーブルを紐づけ
  protected $primaryKey = 'id';  //プライマリーキーをidに紐づけ
  public $timestamps = false;  //タイムスタンプを無効にする
}

Laravelではモデルを単数形・テーブルを複数形で用意しておくと、自動的に認識して紐づけしてくれますので、ぶっちゃけ、これらの設定は必要ないと思います。
ただ個人的に、モデルの設定は明示的に書いておいた方が何かと安心するので、書いちゃってます。
お好きなようにどうぞ。


次にコントローラーの「TodoController.php」を編集します。
最初はTODOを拾っくてくる処理だけ書きます。
use文を忘れないように注意しましょう。
ちなみに、Laravelではビューを介さずにreturnすると、JSON形式でデータを返せるとのこと。便利ですよね〜。

use Illuminate\Http\Request;
use App\Models\Todo;  //←追記

class TodoController extends Controller{

  public function getTodos(){  //←追記
    $todos = Todo::all();
    return $todos;
  }

}

これでひとまずTODOのモデルとコントローラーは用意できました。

LaravelのAPI設定

LaravelのAPIの設定をしていきましょう。
APIの設定は、routesフォルダの「api.php」に記述します。

Route::group(['middleware' => 'api'], function() {
  Route::get('get',  'TodoController@getTodos');
});

少々ややこしいですが、これでGETで /api/getにリクエストを送ると、TODOリストが返ってくるようになりました。

Vue.js・axiosでTODOリストを取得し、描画

お待たせしました。
Vue.jsとaxiosを使っていきましょう!

編集するのはresources/assets/jsにある「app.js」です。
「app.js」の18行目から下記のように追記・変更していきましょう。

//Vue.component('example', require('./components/Example.vue')); //←今回はコンポーネントは使用しません。

const app = new Vue({
  el: '#app',
  data: {
    todos: [] //←TODOを格納するための配列を用意
  },
  methods: {
    fetchTodos: function(){ //←axios.getでTODOリストを取得しています
      axios.get('/api/get').then((res)=>{
        this.todos = res.data //←取得したTODOリストをtodosに格納
      })
    }
  },
  created() {  //←インスタンス生成時にfetchTodos()を実行したいので、createdフックに登録します。
    this.fetchTodos()
  },

});

ちょこっと解説しますと…
まずインスタンス生成時にTODOリストが欲しいので、createdフックにfetchTodos()というメソッドを登録します。
fetchTodos()は、axios.getを用いてTODOリストを取得するためのメソッドです。取得後にdataのtodosに格納します。


次にビューの「welcome.blade.php」を編集します。
タスクを表示するためのテーブルを下記のように変更します。

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>タスク名</th>
      <th>完了ボタン</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="todo in todos" v-bind:key="todo.id">  <!-- ←v-forを使ってtodosを表示 -->
      <td>@{{ todo.id }}</td>  <!-- ←todoのIDを表示。@を忘れず! -->
      <td>@{{ todo.title }}</td>  <!-- ←todoのtitleを表示。@を忘れず! -->
      <td><button class="btn btn-primary">完了</button></td>
    </tr>  <!-- ←完了処理はまた後で設定します。 -->
  </tbody>
</table>

注意点として、タスクのIDとタイトルを表示する時に@を{{ }}の前につけるようにしましょう。
LaravelとVue.jsはどちらもマスタッシュ記法({{ 変数 }})が使えます。
そのため、両方を混在させてしまうとエラーが発生してしまうのです。
@を{{ }}の前につけることで、Laravel側が{{ }}を無視してくれます。

「app.js」と「welcome.blade.php」を編集し終えたら、下記のコマンドをターミナルに入力しましょう。

npm run dev
php artisan serve

うまくいくと、シーディングでテーブルに登録したタスクが表示されていると思います。

APIからTODOリストの取得完了

APIからTODOリストを取得し、描画した画面

※本当はエラー時の処理を書いたり、コンポーネントで分けたりする必要があるのですが、今回そこら辺は割愛します。

今回はここまで

フロントにTODOリストを表示するところまで来ました!
おそらく次回で最後になるでしょう。
では、また!

次回の記事→Laravel × Vue.js × axiosでTODOリストを作るよ! その4


参考資料・リンク