Laravelで簡単なタスク管理アプリを作る手順

Laravelは、データベース操作や入力チェック、画面表示に必要な機能がそろったPHPフレームワークです。小さなCRUDアプリを題材にすると、ルーティング、モデル、コントローラー、Bladeテンプレートの役割をまとめて学べます。

この記事では、タスク名と完了状態を管理するシンプルなWebアプリを作ります。タスクの一覧表示、登録、編集、削除、完了切り替えまでを実装し、あとからログイン機能や期限設定を追加しやすい構成にします。

スマートフォン向けの開発経験がある人にも、Laravelの考え方は応用しやすいでしょう。以前のアプリ制作で得た画面設計の感覚と、サーバーサイドの処理を組み合わせると、実用的なポートフォリオへ発展させられます。

開発環境を整えてプロジェクトを作る

PHP、Composer、Node.js、データベースを準備し、ターミナルで次のコマンドを実行します。

composer create-project laravel/laravel task-manager
cd task-manager
php artisan serve

ブラウザで http://127.0.0.1:8000 を開き、Laravelの初期画面が表示されれば準備完了です。学習中はSQLiteを使うと、MySQLのサーバー設定を省いてすぐに開発を始められます。

.env のデータベース設定を確認し、SQLiteを利用する場合は database/database.sqlite という空ファイルを作成します。環境変数の値を変更したあとは、設定キャッシュを削除すると反映されやすくなります。

タスクには、識別子、タイトル、詳細、完了状態、作成日時、更新日時を持たせます。マイグレーションを作成するには、次のコマンドを使います。

php artisan make:model Task -m

生成されたマイグレーションの up メソッドに、title、description、is_completed を定義します。完了状態は boolean 型にして初期値を false にすると、新規タスクを未完了として扱えます。

$table->string('title');
$table->text('description')->nullable();
$table->boolean('is_completed')->default(false);

定義を保存したら、php artisan migrate を実行します。テーブル作成に失敗した場合は、.env の接続先やSQLiteファイルの場所を確認してください。

Task モデルでは、一括代入を許可する項目を指定します。タイトルなどの入力値を安全に保存するため、$fillable に必要なカラムだけを記述します。

protected $fillable = [
    'title',
    'description',
    'is_completed',
];

続いて、リソースコントローラーを作成します。

php artisan make:controller TaskController --resource

index ではタスク一覧、create では登録画面、store では保存処理を担当させます。編集、更新、削除も同じコントローラーにまとめると、処理の場所が分かりやすくなります。

routes/web.php にリソースルートを追加します。

use App\Http\Controllers\TaskController;

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

これだけで一覧や登録、編集、削除に対応するURLが用意されます。php artisan route:list を実行すれば、HTTPメソッドとURLの対応を確認できます。

保存処理では、タイトルを必須にして文字数を制限します。$request->validate() を使えば、入力エラー時に元の画面へ戻り、Blade側でメッセージを表示できます。

$data = $request->validate([
    'title' => ['required', 'max:100'],
    'description' => ['nullable', 'max:1000'],
]);
Task::create($data);

resources/views/tasks に index.blade.php、create.blade.php、edit.blade.php を作成します。共通のナビゲーションやCSSは layouts/app.blade.php にまとめると、画面ごとの重複を減らせます。

一覧画面では @foreach でタスクを表示し、登録フォームへのリンクと編集、削除ボタンを用意します。削除フォームには @csrf と @method('DELETE') を入れ、LaravelのCSRF保護とHTTPメソッド指定に対応させます。

スマートフォンでも操作しやすいように、入力欄やボタンを大きめにし、未完了と完了で色を分けると視認性が高まります。過去に作成したMonacaの開発メモのように、実機での操作感を意識すると画面改善のヒントを得られます。

完了切り替えは、専用のルートとコントローラー処理を追加すると実装できます。対象タスクを取得し、is_completed の値を反転して保存します。

$task->update([
    'is_completed' => ! $task->is_completed,
]);
return redirect()->route('tasks.index');

一覧では @if($task->is_completed) を使い、完了済みのタイトルに取り消し線を付けます。さらに、未完了だけを表示する絞り込みや、登録日時の新しい順で並べ替える機能を加えると、日常利用しやすくなります。

登録、編集、削除、完了切り替えを一通り試し、空のタイトルや長すぎる入力が適切に拒否されるか確認します。ブラウザの開発者ツールでは、フォーム送信時のステータスコードやエラーも確認できます。

次の段階では、Laravel Breezeによるログイン、ユーザーごとのタスク分離、期限日、優先度、検索機能を追加できます。iPhoneから更新しやすい画面を考えるときは、iPhoneでのWordPress更新記録のようなモバイル利用の視点も役立ちます。

まずはSQLiteとBladeで最小構成を完成させ、Gitで変更履歴を残しながら機能を増やしていきましょう。完成したタスク管理アプリは、Laravelの基礎を示すポートフォリオとして公開し、画面設計や実装上の工夫も制作記録としてまとめると価値が伝わります。