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

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

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

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

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

Table of Contents

Laravelってなに？🌱

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

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

初心者に優しい理由

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

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

実際に学べること

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

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

Laravelの正体をまとめると

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

PHPフレームワークLaravel入門第2版 [ 掌田津耶乃 ]

価格:3300円
(2025/9/20 13:10時点)
感想(2件)

Laravelの教科書バージョン10対応 [ 加藤じゅんこ ]

価格:3300円
(2025/9/20 13:10時点)
感想(0件)

開発環境の準備

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のディレクトリ構成について初心者向けに丁寧に解説します。初めてLaravelを使うときに「フォルダが多すぎてどこを触ればいいの？」と迷う方が多いですよね。そこで今回は図解と実例を交えて、L…

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

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一覧」という画面が表示されるはずです！🌟 イメージとしては以下のような図で表せます。

【超入門】Laravelの「Controller」とは？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のデータを保存する準備が整いました！次は、フォームを作って実際に登録してみましょう🌿

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

Laravel初心者の方にとって「データベース操作」って難しそうに感じませんか？🤔 でも大丈夫！LaravelにはEloquent ORMという便利な仕組みがあり、SQLをゴリゴリ書かなくても直感的にデータを操作できちゃい…

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>

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>

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

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

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

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

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

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

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

動かして学ぶ！Laravel開発入門（NEXT ONE） [ 山崎大助 ]

価格:3300円
(2025/9/20 13:10時点)
感想(0件)

PHPフレームワークLaravel実践開発 [ 掌田津耶乃 ]

価格:3300円
(2025/9/20 13:11時点)
感想(1件)