【Laravel】Webアプリケーション開発の大まかな流れ

Laravel

「XAMPPとVSCodeが入ったWindows 11環境で、Laravel開発を始める全体フローを知りたい！」

すでにXAMPP（PHP/MySQL/Apache）が導入されている場合、新たな環境構築や php artisan serve コマンドの実行は必要ありません。

本記事では、XAMPP環境（Apache / phpMyAdmin）を活用し、さらに開発効率を飛躍的に上げる「シーダー（Seeder）」と「ファクトリー（Factory）」を使ったダミーデータの投入まで、8つのステップで開発の全体像を解説します。

開発の全体ロードマップ

  1. STEP 1： 新規プロジェクトの作成 & ブラウザ確認（XAMPPのApacheを利用）
  2. STEP 2： データベース接続設定 & マイグレーション作成（phpMyAdmin利用）
  3. STEP 3： テスト用初期データの自動生成（ファクトリー & シーダー）
  4. STEP 4： モデル（Model）の構築
  5. STEP 5： ルーティング（Routing）の設定
  6. STEP 6： コントローラー（Controller）の実装
  7. STEP 7： ビュー（Blade View）の作成 & VSCodeの活用
  8. STEP 8： 自動テスト（Pest / PHPUnit）の実装と実行
  9. STEP 9： 動作確認 & Windows特有の注意点

STEP 1：新規プロジェクトの作成 & ブラウザ確認

XAMPPの htdocs ディレクトリ（C:\xampp\htdocs）内でLaravelプロジェクトを作成します。すでにApacheが起動しているため、php artisan serve を起動しなくても直接ブラウザでアクセスできます。

1. VSCodeでプロジェクトを作成

VSCodeで C:\xampp\htdocs フォルダを開き、統合ターミナル（Ctrl + Shift + `）で以下を実行します。

最新版でインストールする場合

Bash
# htdocs 内で実行
composer create-project laravel/laravel my-app

# 作成されたプロジェクトフォルダを開き直す
cd my-app
code . -r

Laravelのバージョンを指定する場合（例はLaravel12）

Bash
# htdocs 内で実行
composer create-project "laravel/laravel=12.*" my-app

2. ブラウザでのアクセス確認

XAMPP Control Panelで Apache が起動（Start）していれば、以下のURLにアクセスするだけでLaravelの初期画面が表示されます。

Plaintext
http://localhost/my-app/public

　もし以下のようなエラーが表示された場合は、You are runningの後に表示されているPHPのバージョンをメモしておく。（以下の例では8.2.12）

Fatal error: Uncaught RuntimeException: Composer detected issues in your platform: Your Composer dependencies require a PHP version “>= 8.4.0”. You are running 8.2.12.

PowerShell
PS C:\xampp\htdocs> cd my-app
PS C:\xampp\htdocs\my-app> composer config platform.php 8.2.12
PS C:\xampp\htdocs\my-app> composer --no-plugins update --no-scripts

STEP 2：データベース接続設定 & マイグレーション作成

XAMPPに同梱されているMySQL（phpMyAdmin）とLaravelを接続し、テーブル定義を作成します。

1. phpMyAdminでDB作成 & .env の編集

  1. ブラウザで http://localhost/phpmyadmin/ にアクセスし、laravel_app_db という名前で空のデータベースを作成します。
  2. VSCodeでプロジェクト直下の .env を開き、接続情報を編集します。
Plaintext
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_app_db
DB_USERNAME=root
DB_PASSWORD=

(※ XAMPP初期設定ではMySQLパスワードは空欄 DB_PASSWORD= です)

2. マイグレーション作成と実行

VSCodeのターミナルで実行します。

PHP
php artisan make:migration create_posts_table

database/migrations/xxxx_create_posts_table.php の up() メソッドを編集します。

PHP
public function up(): void
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('body');
        $table->timestamps();
    });
}
Bash
# テーブルの自動生成
php artisan migrate

STEP 3：テスト用初期データの投入（ファクトリー & シーダー）

開発中にレイアウトや一覧・ページネーションの動作を確認するため、手動で1件ずつ入力するのではなく、ファクトリー（ダミー生成ルール） と シーダー（DB注入実行） を使って大量のテストデータを一括作成します。

1. ファクトリー（Factory）の作成

ダミーデータの内容（日本語ランダム文字列など）を定義します。

Bash
php artisan make:factory PostFactory

database/factories/PostFactory.php を編集します。

PHP
namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;

class PostFactory extends Factory
{
    public function definition(): array
    {
        return [
            'title' => fake()->realText(20),  // 20文字の日本語ダミータイトル
            'body'  => fake()->realText(200), // 200文字の日本語ダミー本文
        ];
    }
}

2. シーダー（Seeder）の設定と実行

database/seeders/DatabaseSeeder.php を開き、作成したファクトリーを呼び出します。

PHP
namespace Database\Seeders;

use App\Models\Post;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    public function run(): void
    {
        // 50件のテスト用投稿データを一括生成
        Post::factory(50)->create();
    }
}

ターミナルでシーダーを実行し、データベースにデータを入力を実行します。

Bash
php artisan db:seed

開発テクニック： テーブル構造を変更した際、php artisan migrate:fresh --seed を実行すると「DBの初期化 ➔ 最新マイグレーション適用 ➔ シーダー実行」が一発で完了します

STEP 4：モデル（Model）の構築

データベースとのデータのやり取りを担うモデルを作成し、一括割り当て（Mass Assignment）を許可します。

Bash
php artisan make:model Post

app/Models/Post.php を開き、$fillable を定義します。

PHP
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;

    protected $fillable = ['title', 'body'];
}

STEP 5：ルーティング（Routing）の設定

URLアクセスとコントローラーの処理を結びつけます。routes/web.php を開いて追記します。

PHP
use App\Http\Controllers\PostController;

Route::get('/', function () {
    return redirect()->route('posts.index');
});

Route::get('/posts', [PostController::class, 'index'])->name('posts.index');
Route::post('/posts', [PostController::class, 'store'])->name('posts.store');

STEP 6：コントローラー（Controller）の実装

リクエストの受け取り・DB操作・ビューへのデータ受け渡しを行うロジックを記述します。

Bash
php artisan make:controller PostController

app/Http/Controllers/PostController.php を編集します（シーダーで作成した大量データを表示できるようページネーションを追加）。

PHP
namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        // 最新順に10件ずつ取得
        $posts = Post::latest()->paginate(10);
        return view('posts.index', compact('posts'));
    }

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

        Post::create([
            'title' => $request->title,
            'body'  => $request->body,
        ]);

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

STEP 7：ビュー（Blade View）の作成 & VSCodeの活用

画面表示用のBladeテンプレートを作成します。

おすすめVSCode拡張機能：

  • PHP Intelephense: PHPの型補完・定義ジャンプ
  • Laravel Blade Snippets: Blade構文の自動補完
  • Laravel Extra Intellisense: ルートやコントローラーの補完

resources/views/posts/index.blade.php を作成します。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Laravel 掲示板</title>
</head>
<body>
    <h1>新規投稿</h1>
    <form action="{{ route('posts.store') }}" method="POST">
        @csrf
        <div><label>タイトル:</label><br><input type="text" name="title"></div>
        <div><label>本文:</label><br><textarea name="body"></textarea></div>
        <button type="submit">送信</button>
    </form>

    <hr>

    <h2>投稿一覧</h2>
    @foreach ($posts as $post)
        <div style="border-bottom: 1px solid #ccc; margin-bottom: 10px;">
            <h3>{{ $post->title }}</h3>
            <p>{{ $post->body }}</p>
            <small>{{ $post->created_at }}</small>
        </div>
    @endforeach

    <!-- ページネーションリンク -->
    {{ $posts->links() }}
</body>
</html>

STEP 8：自動テスト（Pest / PHPUnit）の実装と実行

作成した機能（一覧表示や保存処理）が意図通りに動くか、自動テスト（Feature Test）を作成してプログラムで自動検証します。

1. テストファイルの作成

VSCodeターミナルで以下を実行します。

Bash
php artisan make:test PostTest

2. テストコードの記述（tests/Feature/PostTest.php）

「一覧画面が200レスポンスを返すか」「フォーム送信でデータが正しく保存されるか」をテストします。

PHP
namespace Tests\Feature;

use App\Models\Post;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

class PostTest extends TestCase
{
    use RefreshDatabase; // テスト実行時にデータベースをクリーンに保つ

    /** @test */
    public function 投稿一覧画面を表示できる()
    {
        $response = $this->get('/posts');

        $response->assertStatus(200);
    }

    /** @test */
    public function 新しい投稿を作成できる()
    {
        $postData = [
            'title' => 'テストタイトル',
            'body'  => 'テスト本文',
        ];

        // POSTリクエストを送信
        $response = $this->post('/posts', $postData);

        // 一覧画面へのリダイレクトを確認
        $response->assertRedirect('/posts');

        // データベースにデータが存在することを確認
        $this->assertDatabaseHas('posts', $postData);
    }
}

3. テストの実行

VSCodeの統合ターミナルで以下を実行します。

Bash
php artisan test

緑色で PASS と表示されれば、機能が正常に実装できていることが保証されます。

STEP 9：動作確認 & まとめ

1. 動作確認

ブラウザで http://localhost/my-app/public にアクセスします。

  • シーダーで生成した50件のダミーデータが10件ずつページ分割されて表示されているか確認します。
  • フォームから手動で新規投稿し、1ページ目に最新データとして反映されるか検証します。

2. Windows 11 + XAMPP環境での補足・注意点

  • composer コマンドエラーが出る場合： Windowsの「システム環境変数の編集」を開き、PATHに C:\xampp\php が登録されているか確認します。
  • cURL error 60 (SSL証明書エラー)： Composer実行時などにSSLエラーが出る場合は、cacert.pem を取得して php.ini の curl.cainfo にパスを指定します。

コメント