Laravel 5.5 入門として「基本のタスクリスト」を作成する [その3]

Laravelに入門する方を対象に、「基本のタスクリスト」チュートリアルをLaravel 5.5で行う方法を順を追って紹介しています。

この記事は、次の記事に続く3つ目の記事です。

Laravel 5.5 入門として「基本のタスクリスト」を作成する [その1]

Laravel 5.5 入門として「基本のタスクリスト」を作成する [その2]

タスクの保存

routes/web.phpの/taskルートに、TODOとして残してあるタスクの作成処理を追加します。

Route::post('/task', function (Request $request) {
        $validator = Validator::make($request->all(), [
            'name' => 'required|max:255',
        ]);

        if ($validator->fails()) {
            return redirect('/')
                ->withInput()
                ->withErrors($validator);
        }

        $task = new Task;
        $task->name = $request->name;
        $task->save();

        return redirect('/');
    });

タスクを作成するには、Taskインスタンスを作成し、nameを設定し、そしてsave()メソッドを実行するだけです。

これだけのコーディングで、データベースに保存する所まで済んでしまいます。

そして、’/’ルートにリダイレクトします。

タスクの表示

次にタスクを表示できるようにします。まずは、route/web.phpを編集して、’/’ルートからviewにタスクのデータを渡します。

view関数の第2引数に配列を渡すと、配列のキー名を変数名としてビュー中で使用できるようになります。

Route::get('/', function () {
    $tasks = Task::orderBy('created_at', 'asc')->get();
    
    return view('tasks', [
        'tasks' => $tasks
    ]);
});

Task::orderBy(…)->get() で、ソート済みのタスクをデータベースから取得します。

取得したタスク$tasksをtasks.blade.phpビューに渡します。

追記: Class ‘Task’ not foundエラーが出る場合には、route/web.phpの冒頭にuse App\Task;が書いてあるか確認してください。その1「routeの定義」を参照してください。

 

tasks.blade.phpビューにTODOとして残した部分に、foreachディレクティブを使用して$tasksを表示する処理を追加します。

@extends('layouts.app')
@section('content')
    <div class="container">
	<div class="col-sm-offset-2 col-sm-8">
	    <div class="panel panel-default">
		<div class="panel-heading">
		    New Task
		</div>
		
		<div class="panel-body">
		    <!-- Display Validation Errors -->
		    @include('common.errors')
		    
		    <!-- New Task Form -->
		    <form action="{{ url('task')  }}" method="POST" class="form-horizontal">
			{{ csrf_field() }}
			
			<!-- Task Name  -->
			<div class="form-group">
			    <label for="task-name" class="col-sm-3 control-label">Task</label>
			    <div class="col-sm-6">
				<input type="text" name="name" id="task-name" class="form-control">
			    </div>
			</div>
			
			<!-- Add Task Button -->
			<div class="form-group">
			    <div class="col-sm-offset-3 col-sm-6">
				<button type="submit" class="btn btn-default">
				    <i class="fa fa-btn fa-plus"></i>Add Task
				</button>
			    </div>
			</div>
		    </form>
		</div>
	    </div>
	    
	    <!-- Current Tasks -->
	    @if (count($tasks) > 0)
		<div class="panel panel-default">
		    <div class="panel-heading">
			Current Tasks
		    </div>
		    
		    <div class="panel-body">
			<table class="table table-striped task-table">
			    <thead>
				<th>Task</th>
				<th>&nbsp;</th>
			    </thead>
			    <tbody>
				@foreach($tasks as $task)
				    <tr>
					<td class="table-text"><div>{{ $task->name }}</div></td>
					<!-- TODO: Task Delete Button -->
					<td>&nbsp;</td>
				    </tr>
				@endforeach
			    </tbody>
			</table>
		    </div>
		</div>
	    @endif
	</div>
    </div>
	
@endsection

これで、入力値の検査・エラー表示・タスク追加の機能が実装できました。

タスク削除ボタン

あとは、タスクを削除できるようにして完成です。

<!-- TODO: Task Delete Button -->

の部分に削除ボタンを追加します。

<tr>
  <!-- Task Name -->
  <td class="table-text">
    <div>{{ $task->name }}</div>
  </td>

  <!-- Delete Button -->
  <td>
    <form action="{{ url('task/'.$task->id) }}" method="POST">
      {{ csrf_field() }}
      {{ method_field('DELETE') }}

      <button type="submit" class="btn btn-danger">
        <i class="fa fa-trash"></i> Delete
      </button>
    </form>
  </td>
</tr>

ここで、{{ method_field(‘DELETE’) }}と記述することにより、次のフィールドが生成されます。

<input type="hidden" name="_method" value="DELETE">

Laravelは、このhiddenフォームを認識すると、POSTではなくDELETEリクエストであるとして処理をします。

こうして、タスクを削除するルートが読み込まれることになります。

 

タスクのデータベースからの削除

タスク削除ルートを次のように変更します。

Route::delete('/task/{task}', function (Task $task) {
  $task->delete();

  return redirect('/');
});

 

ここで、$task->delete()が突然呼ばれていますが、これでタスクの削除が完了します。

{task}と$taskの名前が一致している場合には「暗黙の結合」という機能によって、自動的に{task}のidを持つタスクが読み込まれ $taskに代入されます。もし一致するidが見つからない場合は、404ページが生成されます。

 

これで作業は全て完了し、タスクリストのWebアプリケーションが完成しました。

ここまでのまとめ

ここまでで次の作業を行いました。

• 入力値検査に通ったタスクを保存する処理を追加。
• ‘/’ルートでタスクリストを表示する処理を追加。
• タスク削除ボタンを設置。
• タスク削除処理を記述。

出来上がったタスクリスト

次のようなものが出来上がりました。

まとめ

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

Laravel 5.5 LTSでは、5.2と一部のファイルの場所は異なりますが、それさえクリアすれば後半はほぼチュートリアル通りに進めることができたと思います。

Laravelを使えば少ない記述量でWebサービスを作成できる、ということを体感できたでしょうか。

Laravelを使うには幅広い知識が必要な上、さらにLaravelのドキュメントを読み込む必要がありますが、一回覚えてしまえば、Laravelが無かったときよりも短期間で開発がサクサクできるようになると思います。

 

Laravelをもう少し覚えてみよう、と思った方は、是非ドキュメントや市販の書籍を読み込んでみてくださいね。

以上、Laravel 5.5 入門として「基本のタスクリスト」を作成する [その3]でした。