LaravelでToDoアプリを開発する Part4

はじめに
タスク更新機能作成
タスク削除機能作成
まとめ

はじめに

本記事は「LaravelでToDoアプリを開発する Part3」の続きです。

Part3をまだ見ていない方はぜひそちらからご覧ください。

タスク更新機能作成

さて、このシリーズ最後の記事になりました！

最後までしっかりと走り切りましょう！

それでは、編集画面からデータを更新することができるようにしていきましょう。

ルーティング作成

更新用のルーティングを一本追加します。

routes/web.php

<?php
 
use Illuminate\\Support\\Facades\\Route;
 
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
 
Route::get('/', [App\\Http\\Controllers\\HomeController::class, 'index'])->name('task.index');
Route::post('/create', [App\\Http\\Controllers\\HomeController::class, 'store'])->name('task.create');
Route::get('/{id}', [App\\Http\\Controllers\\HomeController::class, 'show'])->name('task.show');
Route::get('/edit/{id}', [App\\Http\\Controllers\\HomeController::class, 'edit'])->name('task.edit');
Route::post('/update/{id}', [App\\Http\\Controllers\\HomeController::class, 'update'])->name('task.update'); // 追加

こちらも編集画面と同様に、どのタスクを更新するのか？がわからないと更新できません。

そのため、クライアントからタスクIDを受け取るようにしておきます。

Controller作成

次に、Controllerにupdateアクションを追加します。

app/Http/Controllers/HomeController.php

public function update(Request $request, $id) {
　　　　$task = Task::find($id);
  $task->title = $request->title;
  $task->body = $request->body;
  $task->save();
 
  return redirect()->route('task.index');
}

新規作成と似ていますが、少し違います。

新規作成時は一行目でインスタンスを作成しましたが、更新の場合は該当タスクを絞り込んでいます。

そして、絞り込んだタスクに対してリクエストで送られたデータをセットすることで更新が実現できます。

そのほかは新規作成時と同じですね。

View

編集画面を作成した際に既にViewファイルの更新処理も記述してありますが、Viewファイルがどうなっているのか見ておきましょう。

resources/views/edit.blade.php

<form action="{{ route('task.update', $task->id) }}" method="POST">
    @csrf
         <div class="form-group">
             <label for="">タイトル</label>
             <input type="text" name="title" value="{{ $task->title }}" />
         </div>
         <div class="form-group">
             <label for="">説明</label>
             <textarea name="body" id="body" cols="30" rows="10">{{ $task->body }}</textarea>
         </div>
         <button type="submit" class="submit">更新</button>
</form>

フォームの部分はこうなってます。

ポイントとしてはformタグのaction属性にタスクIDを追加している点です。

<form action="{{ route('task.update', $task->id) }}" method="POST">
    ・・・
</form>

こうすることで、クライアントからどのタスクを更新するのかを指定しています。

また、指定しているルート名が「task.update」になっていることを確認してください。

Gitにコミットしておきましょう。

$ git status
$ git diff ファイル名
$ git add ファイル名

最初に解説した通りに変更ファイルを1ファイルずつ確認して行ってください。

すべて問題がなければコミットします。

$ git commit -m "タスク更新機能作成"

タスク削除機能作成

さて、いよいよ最後の機能です。

最後は削除ボタンをクリックした際にタスクを削除できるようにしていきましょう。

ルーティング作成

タスク削除用のルーティングを追加します。

routes/web.php

<?php
 
use Illuminate\\Support\\Facades\\Route;
 
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
 
Route::get('/', [App\\Http\\Controllers\\HomeController::class, 'index'])->name('task.index');
Route::post('/create', [App\\Http\\Controllers\\HomeController::class, 'store'])->name('task.create');
Route::get('/{id}', [App\\Http\\Controllers\\HomeController::class, 'show'])->name('task.show');
Route::get('/edit/{id}', [App\\Http\\Controllers\\HomeController::class, 'edit'])->name('task.edit');
Route::post('/update/{id}', [App\\Http\\Controllers\\HomeController::class, 'update'])->name('task.update');
Route::post('/delete/{id}', [App\\Http\\Controllers\\HomeController::class, 'delete'])->name('task.delete'); // 追加

こちらも更新の時と同様にどのタスクを削除するのか？がわからないと削除できないのでタスクIDが必要になります。

Controller作成

次に、HomeControllerにdeleteアクションを追加します。

app/Http/Controllers/HomeController.php

public function delete($id) {
　　　　$task = Task::find($id);
  $task->delete();
 
  return redirect()->route('task.index');
}

こちらも更新時と同様に削除するタスクを特定してから削除します。

View修正

最後に、削除ボタンを以下のように修正します。

resources/views/home.blade.php

<td>
    <form action="{{ route('task.delete', ['id' => $task->id]) }}" method="POST">
         @csrf
          <button type="submit" class="delete">削除</button>
     </form>
</td>

これで削除ボタンも完成です！

実際に削除ボタンをクリックして削除されたら成功です。

Gitにコミットしておきましょう。

$ git status
$ git diff ファイル名
$ git add ファイル名

最初に解説した通りに変更ファイルを1ファイルずつ確認して行ってください。

すべて問題がなければコミットします。

$ git commit -m "タスク削除機能作成"

これでToDoアプリ完成です！

最後に、コードをGithubにプッシュしておきましょう。

$ git push origin master

Githubを開いて、コードがプッシュされていることを確認してみてください。

最後に、Controllerの全文を以下に記載しておきます。

app/Http/Controllers/HomeController.php

<?php
 
namespace App\\Http\\Controllers;
 
use Illuminate\\Http\\Request;
use App\\Models\\User;
use App\\Models\\Task;
 
class HomeController extends Controller
{
    public function index() {
        $tasks = Task::all();
        return view('home', ['tasks' => $tasks]);
    }
 
    public function store(Request $request) {
        $task = new Task();
        $task->title = $request->title;
        $task->body = $request->body;
        $task->save();
 
        return redirect()->route('task.index');
    }
 
    public function show($id) {
        $task = Task::find($id);
        return view('show', ['task' => $task]);
    }
 
    public function edit($id) {
        $task = Task::find($id);
        return view('edit', ['task' => $task]);
    }
 
    public function update(Request $request, $id) {
        $task = Task::find($id);
        $task->title = $request->title;
        $task->body = $request->body;
        $task->save();
 
        return redirect()->route('task.index');
    }
 
    public function delete($id) {
        $task = Task::find($id);
        $task->delete();
 
        return redirect()->route('task.index');
    }
}

また、Gitに関して、今回は機能単位でコミットしましたが、実務ではより細かくコントローラー作成ごとやViewファイル作成ごとにコミットしたりしています。

また、本来はバリデーションなどを追加してタスク作成時や更新時におかしな入力値がないかチェックしたりするのですが、今回のアプリを一通り作ってみるというコンセプトから外れてしまうので省略しています。

まとめ

いかがでしたでしょうか？

アプリを自分で作成するとなるとかなり敷居が高く感じられますが、意外と同じことの繰り返しではないかと気づかれた方も多いかと思います。

アプリの種類にもよりますが、CRUD系のアプリの場合は作成手順は大体以下のような手順の繰り返しになると考えて差し支えないと思います。

テーブル作成
モデル作成
ルーティング作成
Controller作成
Viewファイル作成

今回は初学者を対象としているので、とりあえず一通りアプリを作成してアプリ作りを体感してもらうということに重点をおいて記事を作成しました。

実際の実務ではDBのテーブル数が100を超えていたり、Model-Controller-ViewのMVCを拡張したModel-Controller-Service-Repository-Viewの構成になっていたり、入念にテストを行ったり、アプリを作成する前に機能要件・DB設計・画面設計を作成したりなどしています。

こうした実務で実際にどういったことが行われているのかというのは初学者からは見えにくいですが、このようなことも今回作成したToDoアプリ開発の延長上にあったりします。

最初はこうした簡単なアプリの制作から始めて、少しずつ難易度を上げていくと技術力の向上が見込めるかと思います。

今後もこうした開発のチュートリアルのような記事を作成していく予定ですので、ぜひ読んでいただければと思います。

ではでは😊