LaravelでTodoアプリを作ってみよう！【超初心者向け】

投稿日: 投稿者:

こんにちは！🌱Webアプリ開発に興味を持ち始めたばかりのあなたへ。この記事では、PHPフレームワーク「Laravel」を使って、シンプルなTodoアプリを一緒に作ってみましょう。

「Laravelって聞いたことあるけど、難しそう…」「環境構築って何から始めればいいの？」そんな不安を抱えている方でも大丈夫！このブログは、完全初心者向けに、できるだけわかりやすく、楽しく学べるように構成しています。

途中には図解や実例コードもたっぷり。スマホでも読みやすいようにデザインにも気を配っているので、通勤中やカフェでも気軽に読んでくださいね☕

それでは、さっそくLaravelの世界へ一歩踏み出してみましょう！

Laravelってなに？🌱

Laravel（ララベル）は、PHPでWebアプリケーションを作るための フレームワークです。フレームワークとは、開発を効率よく進めるための 「便利な道具箱」のようなもの。車をゼロから手作業で作るのではなく、 必要な部品が揃ったキットを使うイメージです。

Laravelには、ルーティング、認証、データベース操作、テンプレートエンジンなど、 Web開発に欠かせない機能が最初から用意されています。 そのため、基礎を押さえるだけでシンプルなアプリから本格的なサービスまで作れるようになります。

初心者に優しい理由

Laravelの最大の特徴は、コードが読みやすく、書きやすいことです。 初めてWebアプリを作る人でも「ここに何を書けばいいのか」が直感的にわかります。 まるで森の中の小道を案内してくれるように、 迷わず開発を進められるように設計されているのです🍃

さらに公式ドキュメントや世界中のチュートリアルも豊富なので、 わからないことがあってもすぐに調べられる安心感があります。

実際に学べること

  • ルーティングを使ってページを切り替える方法
  • データベースに情報を保存・取り出す基本
  • Bladeテンプレートを使った画面表示
  • 認証やバリデーションの仕組み

これらを学びながら、実際に手を動かして Todoアプリを作ると、Laravelの便利さを自然に体感できます。

Laravelの正体をまとめると

Laravelは初心者にとって「とっつきやすく」「学びやすく」「実用的」なフレームワークです。 まずは小さなアプリを作ることで、自然にLaravelの流れを身につけることができます。 この記事では、そんなLaravelの魅力を体験できる第一歩として、 Todoアプリ作りを題材に解説していきます。あなたの最初の一歩を一緒に踏み出しましょう！

開発環境の準備

Laravelでアプリを作るには、まず開発環境を整える必要があります。といっても、難しいことはありません。以下のステップに沿って進めれば、あなたのパソコンでもすぐにLaravelが動き出します！

🌟 必要なもの

  • PHP（8.1以上推奨）
  • Composer（PHPのパッケージ管理ツール）
  • Laravel Installer または Laravelプロジェクトのクローン
  • データベース（今回はSQLiteを使用）
  • コードエディタ（VS Codeがおすすめ）

🛠 Laravelのインストール

ターミナル（コマンドプロンプト）を開いて、以下のコマンドを実行します： 

$ composer create-project laravel/laravel todo-app
$ cd todo-app
$ php artisan serve

最後の php artisan serve を実行すると、ローカルサーバーが起動し、ブラウザで http://localhost:8000 にアクセスすればLaravelの初期画面が表示されます🎉

📁 今回触るファイルやフォルダはそこまで多くありません

しかもそのほとんどが、php artisan make:xxx で作成できますので初心者でも安心して作業できるでしょう

  • .env
  • database/migrations
  • routes/web.php
  • resources/views
  • app/Http/Controllers
  • app/Models

Laravelはフォルダごとに役割が分かれていて、初心者でも構造を理解しやすいのが特徴です。次は、実際にTodoアプリの機能を作っていきましょう！

Laravelのディレクトリ構成を図解で解説！初心者でも迷わないプロジェクト…

Laravelのディレクトリ構成を図解で解説！初心者でも迷わないプロジェクト…

Webアプリケーションフレームワークとして世界中で高い人気を誇るLaravelですが、いざ学習を始めると、多くの人が最初の関門として「ディレクトリ構成」に戸惑います。ファイルやフォルダが多すぎて、「どのフォルダに何を置けばいいのか？」「自分…

Webアプリケーションフレームワークとして世界中で高い人気を誇るLaravelですが、いざ学習を始めると、多くの人が最初の関門として「ディレクトリ構成」に戸惑います。ファイルやフォルダが多すぎて、「どのフォルダに何を置けばいいのか？」「自分…

ルーティングとコントローラーの作成

Laravelでは、ユーザーがアクセスするURLと、それに対応する処理をルーティングで定義します。そして、その処理の中身はコントローラーに書いていきます。まずは、Todo一覧を表示するためのルートとコントローラーを作ってみましょう！

📍 ルートの定義

routes/web.php に以下のコードを追加します： 

use App\Http\Controllers\TodoController;

Route::get('/', [TodoController::class, 'index']);

これで、ユーザーが / にアクセスしたときに、TodoController の index メソッドが呼ばれるようになります。

🧭 コントローラーの作成

Artisanコマンドでコントローラーを作成します： 

$ php artisan make:controller TodoController

作成された app/Http/Controllers/TodoController.php に以下のように記述します： 

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class TodoController extends Controller {
    public function index() {
        return view('todos.index');
    }
}

📄 ビューの作成

resources/views/todos/index.blade.php を作成し、以下のように書いてみましょう： 

<!DOCTYPE html>
<html>
    <head>
        <title>Todo一覧</title>
    </head>
    <body>
        <h1>📝 Todo一覧</h1>
        <p>ここにTodoが表示されます。</p>
    </body>
</html>

これで、ブラウザで http://localhost:8000 にアクセスすると、「Todo一覧」という画面が表示されるはずです！🌟 イメージとしては以下のような図で表せます。

URL: / TodoController@index ビュー表示

【超入門】Laravelの「Controller」とは？Webアプリの頭脳を…

【超入門】Laravelの「Controller」とは？Webアプリの頭脳を…

一言でいうと、コントローラーはWebアプリケーションの「頭脳」であり、リクエストとレスポンスの「交通整理」を行う司令塔です。 ユーザーがブラウザで行うアクション（例：「ログインボタンを押す」「商品を購入する」な…

一言でいうと、コントローラーはWebアプリケーションの「頭脳」であり、リクエストとレスポンスの「交通整理」を行う司令塔です。 ユーザーがブラウザで行うアクション（例：「ログインボタンを押す」「商品を購入する」な…

データベースとモデルの設定

Todoアプリでは、ユーザーが登録した「やること」をデータベースに保存します。Laravelでは、モデルという仕組みを使って、データベースとのやりとりを簡単に行うことができます。

📦 SQLiteの準備

今回は初心者向けに、設定が簡単な SQLite を使います。以下の手順で準備しましょう： 

$ touch database/database.sqlite

そして、.env ファイルのデータベース設定を以下のように変更します： 

DB_CONNECTION=sqlite
DB_DATABASE=/absolute/path/to/database/database.sqlite

/absolute/path/to/ の部分は、あなたのプロジェクトの実際のパスに置き換えてくださいね。

🧬 モデルとマイグレーションの作成

Todoを保存するためのモデルとマイグレーションを作成します： 

$ php artisan make:model Todo -m

これで、app/Models/Todo.php と database/migrations/xxxx_xx_xx_create_todos_table.php が作成されます。

🧱 マイグレーションの編集

マイグレーションファイルを以下のように編集します： 


public function up() {
    Schema::create('todos', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->boolean('completed')->default(false);
        $table->timestamps();
    });
}

編集が終わったら、以下のコマンドでテーブルを作成します： 

$ php artisan migrate

これで、todos テーブルがデータベースに作成されました！🎉

🧩 モデルの設定

app/Models/Todo.php を以下のように編集します： 

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
class Todo extends Model {
    protected $fillable = ['title', 'completed'];
}

$fillable を設定することで、フォームから受け取ったデータを安全に保存できるようになります。たったこれだけでEloquentが使えちゃうんです！

Todoモデル todosテーブル

これで、Todoのデータを保存する準備が整いました！次は、フォームを作って実際に登録してみましょう🌿

【初心者必見】LaravelのEloquent入門！たった10分でデータベー…

【初心者必見】LaravelのEloquent入門！たった10分でデータベー…

Webアプリケーション開発に必須のLaravelを学び始めたものの、「データベース操作が難しそう」「SQL文を書くのが煩雑でミスが多い」と感じていませんか？ 特に、初心者の方や、他業種からエンジニアを目指している方にとって、データベース（D…

Webアプリケーション開発に必須のLaravelを学び始めたものの、「データベース操作が難しそう」「SQL文を書くのが煩雑でミスが多い」と感じていませんか？ 特に、初心者の方や、他業種からエンジニアを目指している方にとって、データベース（D…

Todoの登録フォームと保存処理

ここまでで、データベースとモデルの準備が整いました。次は、ユーザーが「やること」を入力して登録できるように、フォームを作成し、保存処理を実装していきましょう！

📝 フォームの作成

resources/views/todos/index.blade.php に以下のフォームを追加します： 

<form method="POST" action="{{ route('post-do') }}">
    @csrf
    <button>追加</button>
</form>

@csrf はCSRF対策のために必ず入れておきましょう。Laravelが自動でトークンを生成してくれます。

📮 ルートの追加

routes/web.php に以下のルートを追加します： 

 Route::post('/todos', [TodoController::class, 'store'])->name('post-todo');

📦 保存処理の追加

TodoController.php に store メソッドを追加します： 

use App\Models\Todo;

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

    Todo::create(['title' => $request->input('title'), 'completed' => false]);

    return redirect('/');
}

バリデーションを通過したら、Todoモデルを使ってデータベースに保存し、トップページにリダイレクトします。

📋 登録されたTodoの表示

index メソッドを以下のように変更して、登録されたTodoを表示できるようにします： 

 public function index() {
    $todos = Todo::all();
    return view('todos.index', compact('todos'));
}

そして、ビューに以下のコードを追加して表示します： 

<ul>
    @foreach ($todos as $todo)
        <li>{{ $todo->title }}</li>
    @endforeach
</ul>
フォーム入力 TodoController@store DB保存

Todoの完了チェックと削除機能

Todoアプリを使うなら、「やることを終えたらチェックしたい」「不要になったら削除したい」と思うよね。ここでは、完了状態の切り替えと削除機能を追加して、より実用的なアプリに仕上げていこう！

✅ 完了チェックの仕組み

まずは、Todoの完了状態を切り替えるためのルートとコントローラーを追加します。 

Route::patch('/todos/{id}/toggle', [TodoController::class, 'toggle'])->name('toggle-todo');

次に、コントローラーに toggle メソッドを追加します： 

public function toggle($id) {
  $todo = Todo::findOrFail($id);
  $todo->completed = !$todo->completed;
  $todo->save();

  return redirect('/');
}

ビュー側では、各Todoに完了ボタンを追加します： 

<form method="POST" action="{{ toggle-todo }}">
    <button>{{ $todo->completed ? '未完了に戻す' : '完了！' }}</button>
</form>

🗑️ 削除機能の追加

削除用のルートを追加します： 

Route::delete('/todos/{id}', [TodoController::class, 'destroy'])->name('destroy-todo');

コントローラーに destroy メソッドを追加します： 

public function destroy($id) {
    $todo = Todo::findOrFail($id);
    $todo->delete();

    return redirect('/');
}

ビュー側では、削除ボタンを追加します： 

<form method="POST" action="{{ destroy-todo }}">
    <button>削除</button>
</form>
完了ボタン toggleメソッド 削除ボタン destroyメソッド

これで、Todoの完了チェックと削除ができるようになりました！アプリとしての完成度がぐっと上がったね✨ 次は、FAQでよくある疑問を解消していこう！

FAQ：よくある質問

Q1: Laravelを使っていれば、セキュリティ対策は自動で完璧ですか？

A: LaravelはCSRFやXSS、SQLインジェクションなど、よくある脆弱性に対して 初期状態で強力な防御 を備えています。でも、開発者が不用意に生のSQLを書いたり、ユーザー入力をそのままHTMLに出力したりすると、Laravelの保護をすり抜けてしまうこともあります。

フレームワークに頼りすぎず、「この処理は安全か？」 と意識することが、安心できるアプリを作る第一歩です。Laravelは「守ってくれる盾」だけど、使い方を誤ればその盾も意味をなさなくなってしまうよ🍃

Q2: Laravelのバージョンは常に最新にしておくべき？

A: はい、強くおすすめ します。Laravelは活発に開発されていて、新しいバージョンにはセキュリティ修正や便利な機能が追加されています。古いバージョンを使い続けると、既知の脆弱性にさらされるリスクが高まります。

特に商用サービスやユーザー情報を扱うアプリでは、バージョンアップは 「やっておいた方がいい」ではなく「やるべきこと」 です。手間はかかるけど、それ以上に安心と信頼が得られるよ🌟

Q3: フォームにHTMLタグを入力されたくない場合は？

A: Laravelの バリデーション機能 を使えば、HTMLタグの混入を防ぐことができます。例えば、string ルールや regex ルールを使って、特定の文字だけを許可することができます。

また、strip_tags() 関数を使って、入力からタグを除去する方法もあります。ただし、入力時のチェック＋出力時のエスケープ の両方を意識することが大切です。Bladeテンプレートの {{ }} は自動でエスケープしてくれるので、表示時の安全性も確保できるよ。

Q4: SQLiteじゃなくてMySQLやPostgreSQLでも使える？

A: もちろん使えます！Laravelは複数のデータベースに対応していて、.env ファイルの設定を変えるだけで、MySQLやPostgreSQLに切り替えることができます。SQLiteは初心者向けに設定が簡単なので今回使いましたが、将来的に本番環境ではMySQLなどを使うことが多いです。

Q5: Artisanコマンドって何？

A: ArtisanはLaravelに標準で搭載されている コマンドラインツール です。コントローラーの作成、マイグレーションの実行、サーバーの起動など、さまざまな作業を簡単に行うことができます。まるで森の中の道具箱みたいに、開発を助けてくれる便利な存在だよ🍀

「入力エラー」で悩まない！Laravelのフォームバリデーションを完全マスタ…

「入力エラー」で悩まない！Laravelのフォームバリデーションを完全マスタ…

Laravel初心者の方が最初に直面する大きな壁のひとつが「フォームバリデーション」です。ユーザーが入力するデータは必ずしも正しいとは限らず、空欄や誤った形式、不正な値などが送られてくることもあります。これを放置すると、エラーが多発したり、…

Laravel初心者の方が最初に直面する大きな壁のひとつが「フォームバリデーション」です。ユーザーが入力するデータは必ずしも正しいとは限らず、空欄や誤った形式、不正な値などが送られてくることもあります。これを放置すると、エラーが多発したり、…

まとめ

ここまで読んでくれてありがとう！🌿Laravelを使ったTodoアプリづくり、いかがだったかな？最初は「難しそう…」と思っていたかもしれないけど、ひとつひとつ手順を踏んでいけば、ちゃんと動くアプリが完成するんだって実感できたはず。

今回のTodoアプリでは、以下のようなLaravelの基本機能を体験できたよね：

  • ルーティング: URLと処理のつなぎ方を学んだ
  • コントローラー: ロジックを整理して書く場所を知った
  • ビュー: ユーザーに見せる画面を作った
  • モデルとマイグレーション: データベースとのやりとりを体験
  • フォームとバリデーション: 安全にデータを受け取る方法を理解
  • 完了チェックと削除: 実用的な操作を追加

これらはLaravelのほんの入り口。でも、入り口をくぐったあなたはもうWebアプリ開発者の仲間入りだよ！🎉

これからもっと複雑な機能やデザインに挑戦したくなったら、Laravelの公式ドキュメントや、コミュニティの記事、動画などを活用してみてね。わからないことがあっても、調べながら進める力がついてきているはず。

最後にひとこと。アプリ開発は、まるで森の中を探検するようなもの。迷うこともあるけど、地図（ドキュメント）と仲間（コミュニティ）があれば、きっと前に進めるよ。あなたの作るアプリが、誰かの役に立つ日を楽しみにしてるね🍀

🌟 おつかれさまでした！次はログイン機能やAPIにも挑戦してみよう！🌟

「この記事を読んでもまだよく分からない」「続けられるか不安」——
そんな方こそ、いちど話してみませんか？
現役エンジニアがあなたの現状を聞きながら、無理のない学習ステップをご提案します。

まずは気軽に相談してみる（無料）