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

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

前回の記事→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」を開き、下記のようにコードを追記してください。

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

タスク名を添えたリクエストを、POSTで/api/addへ送ると、TODOリストに登録できるようにしていきます。

今度は、app/Http/Controllersフォルダの「TodoController.php」を編集しましょう。

class TodoController extends Controller{

  public function getTodos(){
    $todos = Todo::all();
    return $todos;
  }

  public function addTodo(Request $request){  //←追記
    $todo = new Todo;
    $todo->title = $request->title;
    $todo->save();

    $todos = Todo::all();
    return $todos;
  }

}

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


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

…〜略〜

const app = new Vue({
  el: '#app',
  data: {
    new_todo: '',
    todos: []
  },
  methods: {
    fetchTodos: function(){
      axios.get('/api/get').then((res)=>{
        this.todos = res.data
      })
    }, //←カンマを忘れず!
    addTodo: function(){ //←追記
      axios.post('/api/add',{
        title: this.new_todo
      }).then((res)=>{
        this.todos = res.data
        this.new_todo = ''
      })
    }
  },
  created() {
    this.fetchTodos()
  },

});

axiosを使って、POSTを行うメソッドaddTodoを追記しました。
axios.post〜の部分で、this.new_todoをtitleに格納して送ります。

レスポンスが帰ってきたら、TODOリストを更新し、再描画。
さらに、new_todoの値を空にします。

※今回はバリデーションの設定は行いません。そのため、空文字でも登録できてしまいます。
バリデーションの処理に挑戦したい人は本記事の最下部に参考のリンクをまとめておきます。
興味のある方はのぞいて見てください!


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

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

inputタグには、v-modelでdata:new_todoを紐づけ。
buttonタグには、v-onでクリックするとaddTodo()が発火するようにしています。

ここまで来ましたら、ファイルを保存して下記のコマンドを順にターミナルに入力しましょう。

npm run dev
php artisan serve

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

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

タスクを追加できるようになりました!

タスクの削除処理

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

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

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

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

削除するタスクのIDを添えたリクエストを、POSTで/api/delへ送ると、TODOリストから削除できるようにしていきます。

今度は、app/Http/Controllersフォルダの「TodoController.php」を編集しましょう。

class TodoController extends Controller{

  public function getTodos(){
    $todos = Todo::all();
    return $todos;
  }

  public function addTodo(Request $request){
    $todo = new Todo;
    $todo->title = $request->title;
    $todo->save();

    $todos = Todo::all();
    return $todos;
  }

  public function deleteTodo(Request $request){  //←追記
    $todo = Todo::where('id', $request->id)->delete();

    $todos = Todo::all();
    return $todos;
  }

}

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


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

…〜略〜

const app = new Vue({
  el: '#app',
  data: {
    new_todo: '',
    todos: []
  },
  methods: {
    fetchTodos: function(){
      axios.get('/api/get').then((res)=>{
        this.todos = res.data
      })
    },
    addTodo: function(){
      axios.post('/api/add',{
        title: this.new_todo
      }).then((res)=>{
        this.todos = res.data
        this.new_todo = ''
      })
    }, //←カンマを忘れず!
    deleteTodo: function(task_id){ //←追記
      axios.post('/api/del',{
        id: task_id
      }).then((res)=>{
        this.todos = res.data
      })
    }
  },
  created() {
    this.fetchTodos()
  },

});

axiosを使って、POSTで削除を行うメソッドdeleteTodo()を追記しました。
deleteTodo()には引数task_idを設定しています。
ここに削除するタスクのIDが入るようにします。

後はレスポンスが帰ってきたら、TODOリストを更新し、再描画します。


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

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

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

npm run dev
php artisan serve

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

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

完了ボタンを押すとタスクが削除されるようになりました!

TODOリストの完成!

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

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

私もこれからもっともっと勉強していきます!

では、また!


参考資料・リンク