Laravel 5を使用したシンプルなタスクリストアプリの作成 – 第4部

Laravelは非常に強力なPHPフレームワークであり、シンプルなタスクリストアプリの開発においてもその力を存分に発揮します。第4部では、タスクリストアプリのさらなる機能追加を行います。この章では、データベースの操作、タスクの更新、削除機能を実装し、ユーザーインターフェースを改善する方法に焦点を当てます。

必要な準備

まず、前回までの内容に基づいて、プロジェクトのフォルダがすでにセットアップされている前提で進めます。データベースの設定が完了していることを確認してください。また、Laravelの基本的なインストールが完了しており、必要なパッケージがインストールされている状態であることを前提に進めます。

ステップ1: マイグレーションの作成

タスクを管理するためには、タスクを保存するためのデータベーステーブルを作成する必要があります。Laravelのマイグレーション機能を使って、必要なテーブルを作成します。

以下のコマンドを実行して、マイグレーションファイルを作成します。

bash
CopyEdit
php artisan make:migration create_tasks_table --create=tasks

作成されたマイグレーションファイルを開き、次のように編集します。

php
CopyEdit
public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->increments('id');
        $table->string('title');
        $table->text('description')->nullable();
        $table->boolean('completed')->default(false);
        $table->timestamps();
    });
}

title カラムにはタスクのタイトル、description にはタスクの詳細説明を格納し、completed にはタスクが完了しているかどうかを示すブール値を格納します。

マイグレーションを実行して、テーブルをデータベースに作成します。

bash
CopyEdit
php artisan migrate

ステップ2: モデルの作成

タスクデータを操作するためのモデルを作成します。以下のコマンドで Task モデルを生成します。

bash
CopyEdit
php artisan make:model Task

生成された Task モデルを開き、次のように編集します。

php
CopyEdit
namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    protected $fillable = ['title', 'description', 'completed'];
}

$fillable 配列により、モデルを通じて一括代入が可能となるカラムを指定しています。

ステップ3: コントローラーの作成

タスクを管理するためのコントローラーを作成します。以下のコマンドで TaskController を作成します。

bash
CopyEdit
php artisan make:controller TaskController

TaskController を開き、基本的なアクション（一覧表示、作成、更新、削除）を追加します。

php
CopyEdit
namespace App\Http\Controllers;

use App\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    public function index()
    {
        $tasks = Task::all();
        return view('tasks.index', compact('tasks'));
    }

    public function create()
    {
        return view('tasks.create');
    }

    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required|string|max:255',
            'description' => 'nullable|string',
        ]);

        Task::create([
            'title' => $request->title,
            'description' => $request->description,
        ]);

        return redirect()->route('tasks.index');
    }

    public function edit(Task $task)
    {
        return view('tasks.edit', compact('task'));
    }

    public function update(Request $request, Task $task)
    {
        $request->validate([
            'title' => 'required|string|max:255',
            'description' => 'nullable|string',
        ]);

        $task->update([
            'title' => $request->title,
            'description' => $request->description,
        ]);

        return redirect()->route('tasks.index');
    }

    public function destroy(Task $task)
    {
        $task->delete();
        return redirect()->route('tasks.index');
    }
}

index, create, store, edit, update, destroy アクションを定義しています。それぞれ、タスクの表示、作成フォームの表示、タスクの保存、編集フォームの表示、タスクの更新、タスクの削除を担当します。

ステップ4: ルートの設定

次に、ルートファイル web.php を編集して、上記のコントローラーアクションをURLに関連付けます。

php
CopyEdit
use App\Http\Controllers\TaskController;

Route::resource('tasks', TaskController::class);

resource メソッドを使うと、タスクリソースに対する標準的なRESTfulなルートが一括で設定されます。

ステップ5: ビューの作成

次に、タスク一覧画面、タスク作成画面、タスク編集画面のビューを作成します。

タスク一覧画面 (resources/views/tasks/index.blade.php)

php
CopyEdit

"ja">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    


    
タスクリスト
    "{{ route('tasks.create') }}">新しいタスクを作成
    

        @foreach ($tasks as $task)
            

                {{ $task->title }}
                "{{ route('tasks.edit', $task->id) }}">編集
                
"{{ route('tasks.destroy', $task->id) }}" method="POST" style="display:inline;">
                    @csrf
                    @method('DELETE')
                    "submit">削除
                
            
        @endforeach
    

タスク作成画面 (resources/views/tasks/create.blade.php)

php
CopyEdit

"ja">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    


    
新しいタスクの作成
    
"{{ route('tasks.store') }}" method="POST">
        @csrf
        

            for="title">タイトル
            "text" id="title" name="title" required>
        
        

            for="description">説明
            <span><span class="hljs-string">"description"</span></span><span> name=</span><span><span class="hljs-string">"description"</span></span><span>>
        
        "submit">作成
    

タスク編集画面 (resources/views/tasks/edit.blade.php)

php
CopyEdit

"ja">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    


    
タスクの編集
    
"{{ route('tasks.update', $task->id) }}" method="POST">
        @csrf
        @method('PUT')
        

            for="title">タイトル
            "text" id="title" name="title" value="{{ $task->title }}" required>
        
        

            for="description">説明
            <span><span class="hljs-string">"description"</span></span><span> name=</span><span><span class="hljs-string">"description"</span></span><span>>{{ </span><span><span class="hljs-variable">$task</span></span><span>->description }}
        
        "submit">更新
    

ステップ6: 動作確認

すべての設定が完了したら、サーバーを起動して動作確認を行います。

bash
CopyEdit
php artisan serve

ブラウザで http://localhost:8000/tasks にアクセスし、タスクの一覧表示、作成、編集、削除ができることを確認してください。

まとめ

この第4部では、Laravelを使用してタスク管理アプリケーションにおける基本的なCRUD（作成、読み込み、更新、削除）機能を実装しました。タスクを管理するためのコントローラー、モデル、ビュー、マイグレーションを作成し、ユーザーがタスクを簡単に管理できるようにしました。

次回は、タスクの完了状態を管理するための機能や、さらに詳細なスタイリングを加えてアプリケーションを改善していきます。