プログラミング

前回の記事 →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 のためのモデルとコントローラーを用意します。
下記のコマンドをターミナルに入力しましょう

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

これで app/Models に、モデルファイルの「Todo.php」
app/Http/Controllers に、コントローラーファイルの「TodoController.php」が それぞれ生成されました。
先にモデルの「Todo.php」から編集していきます。
「Todo.php」を開き Todo モデルを下記のように編集します。

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

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

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

1
use Illuminate\Http\Request;
2
use App\Models\Todo; //← 追記
3
4
class TodoController extends Controller{
5
6
public function getTodos(){ //← 追記
7
  $todos = Todo::all();
8
  return $todos;
9
}
10
11
}

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

Laravel の API 設定

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

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

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

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

お待たせしました。 Vue.js と axios を使っていきましょう!
編集するのは resources/assets/js にある「app.js」です。
「app.js」の 18 行目から下記のように追記・変更していきましょう。

1
//Vue.component('example', require('./components/Example.vue')); //← 今回はコンポーネントは使用しません。
2
3
const app = new Vue({
4
  el: '#app',
5
  data: {
6
    todos: [] //←TODO を格納するための配列を用意
7
  },
8
  methods: {
9
    fetchTodos: function(){ //←axios.get で TODO リストを取得しています
10
      axios.get('/api/get').then((res)=>{
11
        this.todos = res.data //← 取得した TODO リストを todos に格納
12
      })
13
    }
14
  },
15
  created() { //← インスタンス生成時に fetchTodos()を実行したいので、created フックに登録します。
16
    this.fetchTodos()
17
  },
18
});

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

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

1
<table class="table">
2
  <thead>
3
    <tr>
4
      <th>ID</th>
5
      <th>タスク名</th>
6
      <th>完了ボタン</th>
7
    </tr>
8
  </thead>
9
  <tbody>
10
    <tr v-for="todo in todos" v-bind:key="todo.id">  <!-- ←v-forを使ってtodosを表示 -->
11
      <td>@{{ todo.id }}</td>  <!-- ←todoのIDを表示。@を忘れず! -->
12
      <td>@{{ todo.title }}</td>  <!-- ←todoのtitleを表示。@を忘れず! -->
13
      <td><button class="btn btn-primary">完了</button></td>
14
    </tr>  <!-- ←完了処理はまた後で設定します。 -->
15
  </tbody>
16
</table>

注意点として、タスクの ID とタイトルを表示する時に、@をマスタッシュ記法の前につけるようにしましょう。
Laravel と Vue.js はどちらもマスタッシュ記法が使えます。
そのため、両方を混在させてしまうとエラーが発生してしまうのです。 @をマスタッシュ記法の前につけることで、Laravel 側がうまい具合に調整してくれます。
「app.js」と「welcome.blade.php」を編集し終えたら、下記のコマンドをターミナルに入力しましょう。

1
npm run dev
2
php artisan serve

うまくいくと、シーディングでテーブルに登録したタスクが表示されていると思います。
APIからTODOリストの取得完了

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

今回はここまで

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

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

参考資料・リンク