プログラミング

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

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

前回はフロントに TODO リストを表示したところで終わっていたと思います。
今回はタスクの登録・削除のロジックを書いていきます。

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

--- 広告 ---

TODO リスト構築

タスクの登録処理

タスクの登録処理を書いていきます。
タスクの登録の大まかな流れは下記のようになります。

  1. Vue.js でフォームからタスク名を取得
  2. axios で Laravel へリクエストを送る
  3. Laravel がテーブルを更新し、TODO リストを返す
  4. Vue.js が TODO リストを取得し、再描画

では、まず API から用意しましょう。
routes フォルダの「api.php」を開き、下記のようにコードを追記してください。

1
Route::group(['middleware' => 'api'], function() {
2
  Route::get('get', 'TodoController@getTodos');
3
  Route::post('add', 'TodoController@addTodo'); //← 追記
4
});

タスク名を添えたリクエストを、POST で/api/add へ送ると、TODO リストに登録できるようにしていきます。
今度は、app/Http/Controllers フォルダの「TodoController.php」を編集しましょう。

1
class TodoController extends Controller{
2
3
  public function getTodos(){
4
  $todos = Todo::all();
5
      return $todos;
6
  }
7
8
  public function addTodo(Request $request){  //←追記
9
      $todo = new Todo;
10
      $todo->title = $request->title;
11
      $todo->save();
12
      $todos = Todo::all();
13
      return $todos;
14
  }
15
}

addTodo()を追記しました。
やっている事はけっこう単純です。
リクエストからタスク名を取り出し、テーブルに保存しています。
その後に更新した TODO リストを返しています。

次に、Vue.js と axios で ajax ができるよう「app.js」を編集します。
resources/assets/js フォルダの「app.js」を下記のように編集してください。

1
…〜略〜
2
3
const app = new Vue({
4
el: '#app',
5
  data: {
6
    new_todo: '',
7
    todos: []
8
  },
9
  methods: {
10
  fetchTodos: function(){
11
    axios.get('/api/get').then((res)=>{
12
      this.todos = res.data
13
    })
14
  }, //← カンマを忘れず!
15
  addTodo: function(){ //← 追記
16
    axios.post('/api/add',{
17
      title: this.new_todo
18
    }).then((res)=>{
19
      this.todos = res.data
20
      this.new_todo = ''
21
    })
22
    }
23
  },
24
  created() {
25
    this.fetchTodos()
26
  },
27
});

axios を使って、POST を行うメソッド addTodo を追記しました。
axios.post〜の部分で、this.new_todo を title に格納して送ります。
レスポンスが帰ってきたら、TODO リストを更新し、再描画。 さらに、new_todo の値を空にします。
※今回はバリデーションの設定は行いません。そのため、空文字でも登録できてしまいます。
バリデーションの処理に挑戦したい人は本記事の最下部に参考のリンクをまとめておきます。
興味のある方はのぞいて見てください!

あと少しで登録処理の完成です。
resources/views フォルダの「welcome.blade.php」を下記のように編集しましょう。
編集する箇所は、タスクを登録するためのフォームの部分です。

1
<div class="input-group">
2
  <input type="text" class="form-control" placeholder="タスクを入力してください" v-model="new_todo"> <!-- ←v-modelを追記 -->
3
  <span class="input-group-btn">
4
    <button class="btn btn-success" type="button" v-on:click="addTodo">タスクを登録する</button> <!-- ←v-on:clickを追記 -->
5
  </span>
6
</div>

input タグには、v-model で data:new_todo を紐づけ。button タグには、v-on でクリックすると addTodo()が発火するようにしています。
ここまで来ましたら、ファイルを保存して下記のコマンドを順にターミナルに入力しましょう。

1
npm run dev
2
php artisan serve

これでタスクの登録処理はうまくいくと思います。
試しにタスク名を入力して「タスクを登録する」ボタンを押してみてください。

タスク登録処理の実装が完了しました

タスクの削除処理

これが最後の工程です。
登録したタスクを削除できるようにしましょう。
タスクの削除の大まかな流れは下記のようになります。登録の時とほぼ一緒ですね。

  1. Vue.js で削除するタスクの ID を取得
  2. axios で Laravel へリクエストを送る
  3. Laravel が該当のタスクを削除してテーブルを更新。TODO リストを返す
  4. Vue.js が TODO リストを取得し、再描画

では、まず API から用意しましょう。
routes フォルダの「api.php」を開き、下記のようにコードを追記してください。

1
Route::group(['middleware' => 'api'], function() {
2
  Route::get('get',  'TodoController@getTodos');
3
  Route::post('add',  'TodoController@addTodo');
4
  Route::post('del',  'TodoController@deleteTodo'); //←追記
5
});

削除するタスクの ID を添えたリクエストを、POST で/api/del へ送ると、TODO リストから削除できるようにしていきます。 今度は、app/Http/Controllers フォルダの「TodoController.php」を編集しましょう。

1
class TodoController extends Controller{
2
  public function getTodos(){
3
    $todos = Todo::all();
4
    return $todos;
5
  }
6
7
  public function addTodo(Request $request){
8
    $todo = new Todo;
9
    $todo->title = $request->title;
10
    $todo->save();
11
    $todos = Todo::all();
12
    return $todos;
13
  }
14
15
  public function deleteTodo(Request $request){  //←追記
16
    $todo = Todo::where('id', $request->id)->delete();
17
    $todos = Todo::all();
18
    return $todos;
19
  }
20
}

deleteTodo()を追記しました。
これもやっている事は単純ですね。
リクエストから削除するタスクの ID を取り出し、where()使って、該当するタスクをテーブルから探して、削除しています。

次に、Vue.js と axios でタスクの削除ができるよう「app.js」を編集します。
resources/assets/js フォルダの「app.js」を下記のように編集してください。

1
…〜略〜
2
3
const app = new Vue({
4
  el: '#app',
5
  data: {
6
    new_todo: '',
7
    todos: []
8
  },
9
  methods: {
10
    fetchTodos: function(){
11
      axios.get('/api/get').then((res)=>{
12
      this.todos = res.data
13
    })
14
  },
15
  addTodo: function(){
16
    axios.post('/api/add',{
17
      title: this.new_todo
18
    }).then((res)=>{
19
      this.todos = res.data
20
      this.new_todo = ''
21
    })
22
  }, //← カンマを忘れずに!
23
  deleteTodo: function(task_id){ //← 追記
24
    axios.post('/api/del',{
25
      id: task_id
26
    }).then((res)=>{
27
      this.todos = res.data
28
    })
29
    }
30
  },
31
  created() {
32
    this.fetchTodos()
33
  },
34
});

axios を使って、POST で削除を行うメソッド deleteTodo()を追記しました。
deleteTodo()には引数 task_id を設定しています。
ここに削除するタスクの ID が入るようにします。
後はレスポンスが帰ってきたら、TODO リストを更新し、再描画します。

あと少しで削除処理も完成です。
resources/views フォルダの「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">
11
      <td>@{ { todo.id }}</td>
12
      <td>@{ { todo.title }}</td>
13
      <td><button class="btn btn-primary" v-on:click="deleteTodo(todo.id)">完了</button></td> <!-- ←v-on:clickを追記 -->
14
    </tr>
15
  </tbody>
16
</table>

button タグに v-on でクリックすると deleteTodo()が発火するようにしています。
引数にタスクの ID が入るので、ID に該当するタスクが削除される仕組みです。

さて最後の仕上げです。
ファイルを保存したら、下記のコマンドを順にターミナルに入力しましょう。

1
npm run dev
2
php artisan serve

これでタスクの削除もうまくいくと思います。 試しにテキトーにタスクの完了ボタンを押してみてください。
しっかりと削除されるはずです。

タスク削除処理の実装が完了しました

TODO リストの完成!

お疲れ様でした!
これにて TODO リストの完成です!

いかがだったでしょうか。
Laravel・Vue.js・axios の肌感が掴めてきましたでしょうか。
やはり少ないコード量で、簡単に SPA っぽいモノを作れるのってすごいですよね!
私もこれからもっともっと勉強していきます!
では、また!

参考資料・リンク