【完全ガイド】Laravel初心者が3時間で作るはじめてのWebアプリケーション

SHARE

目次

目次へ

Laravelをはじめる前に知っておくべき基礎知識

PHPフレームワークとしてのLaravelの特徴と強み

Laravelは現代のWebアプリケーション開発に必要な機能を全て備えた、フルスタックPHPフレームワークです。以下の特徴により、特に初心者のWeb開発者から選ばれています：

  1. エレガントな構文と直感的な機能
  • 読みやすく保守性の高いコードが書ける
  • 面倒な処理を簡単に実装できる便利な機能が豊富
  • PHPの知識があれば比較的スムーズに学習可能
  1. 充実した開発ツール
  • Artisanコマンドによる開発効率の向上
  • Tinkerによるインタラクティブな開発環境
  • 統合テスト環境の提供
  1. 強力なエコシステム
  • 豊富なパッケージライブラリ
  • 活発なコミュニティ
  • 充実したドキュメント（日本語情報も豊富）

Laravelで開発するために必要な前提知識

Laravelを効果的に使いこなすために、以下の基礎知識を押さえておくことをお勧めします：

必須の前提知識：

  1. PHP基礎
  • 変数とデータ型
  • 制御構文（if文、ループ等）
  • 関数の定義と使用
  • クラスとオブジェクト指向の基本概念
  1. HTML/CSS
  • 基本的なマークアップ
  • CSSによるスタイリング
  • フォーム要素の理解
  1. データベース基礎
  • SQLの基本文法
  • テーブル設計の基礎
  • CRUD操作の理解

あると望ましい知識：

  1. モダンPHP開発の知識
  • Composerによるパッケージ管理
  • PSR規約の基本的な理解
  • オートローディング
  1. Git基礎
  • 基本的なバージョン管理の概念
  • commit、push、pullの操作
  1. MVC設計パターン
  • Model（データ処理）
  • View（表示）
  • Controller（制御）
    の役割分担の理解

これらの知識がなくてもLaravelでの開発は始められますが、これらを理解していることで、より効率的に学習を進めることができます。本記事では、これらの知識をベースに、実践的なWebアプリケーション開発の方法を学んでいきましょう。

Laravelの開発環境を整える

推奨される開発環境のスペックと必要なツール

Laravelでの快適な開発には、以下のような環境が推奨されます：

最小システム要件：

  • PHP 8.1以上
  • メモリ：2GB以上のRAM（4GB以上推奨）
  • ストレージ：10GB以上の空き容量
  • OS：Windows 10/11、macOS、Linux（Ubuntu 20.04以上推奨）

必須ツール：

  1. PHP 8.1以上
  2. Composer（PHPのパッケージマネージャー）
  3. Node.js（フロントエンド開発用）
  4. Git（バージョン管理用）
  5. データベース（MySQL 5.7以上推奨）

Docker環境で簡単にLaravelを始める方法

Docker環境を使用すると、OSに依存せず、簡単にLaravel開発環境を構築できます。以下の手順で設定を行います：

  1. Dockerのインストール
  1. Laravel Sailのセットアップ
# 新規プロジェクトの作成
curl -s "https://laravel.build/example-app" | bash

# プロジェクトディレクトリに移動
cd example-app

# Sailを使用してコンテナを起動
./vendor/bin/sail up

docker-compose.ymlの基本設定：

version: '3'
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.2
            dockerfile: Dockerfile
        image: sail-8.2/app
        ports:
            - '${APP_PORT:-80}:80'
        environment:
            - WWWGROUP=${WWWGROUP}
            - LARAVEL_SAIL=1
        volumes:
            - '.:/var/www/html'
        networks:
            - sail

Composerを使ったLaravelプロジェクトの作成手順

Dockerを使用しない場合は、以下の手順で環境を構築します：

  1. PHPのインストール
  • Windows: XAMPPをインストール
  • macOS: brew install php
  • Linux: sudo apt install php8.1
  1. Composerのインストール
# Windowsの場合はインストーラーを使用
# macOS/Linuxの場合
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php composer-setup.php
sudo mv composer.phar /usr/local/bin/composer
  1. Laravelプロジェクトの作成
# グローバルにLaravelインストーラーをインストール
composer global require laravel/installer

# 新規プロジェクトの作成
laravel new example-app

# 依存パッケージのインストール
cd example-app
composer install

# 環境設定ファイルの作成
cp .env.example .env
php artisan key:generate
  1. 開発サーバーの起動
php artisan serve

トラブルシューティング：

よくある問題と解決方法：

  1. Composerのメモリ不足エラー
   COMPOSER_MEMORY_LIMIT=-1 composer install
  1. パーミッションエラー
   # storage, bootstrapディレクトリの権限設定
   chmod -R 775 storage bootstrap/cache
  1. .envファイルが存在しないエラー
   cp .env.example .env
   php artisan key:generate

以上の手順で、Laravelの開発環境が整います。次のセクションでは、この環境を使って実際にプロジェクトを作成していきます。

はじめてのLaravelプロジェクトを作成する

artisanコマンドを使った新規プロジェクトの作成方法

artisanは、Laravelの開発を効率化する強力なコマンドラインツールです。以下の基本的なコマンドを覚えておくと開発がスムーズになります：

# 新規プロジェクトの作成
laravel new my-first-app

# プロジェクトディレクトリに移動
cd my-first-app

# 開発サーバーの起動
php artisan serve

# コントローラーの作成
php artisan make:controller TaskController

# モデルの作成（マイグレーションファイルも同時に作成）
php artisan make:model Task -m

# ミドルウェアの作成
php artisan make:middleware CheckTaskOwner

プロジェクト構造の基本的な理解

Laravelのプロジェクト構造は、機能ごとに明確に分かれており、保守性の高いコードを書くのに役立ちます：

my-first-app/
├── app/                # アプリケーションのコアコード
│   ├── Http/          # コントローラー、ミドルウェア等
│   ├── Models/        # Eloquentモデル
│   └── Providers/     # サービスプロバイダー
├── config/            # 設定ファイル
├── database/          # マイグレーション、シーダー
├── public/            # 公開ディレクトリ
├── resources/         # ビュー、CSS、JavaScript等
├── routes/            # ルーティング定義
├── storage/           # キャッシュ、ログ等
└── tests/             # テストファイル

重要なディレクトリの役割：

  1. app/Http/Controllers/
  • リクエストの処理ロジックを記述
  • 例：TaskControllerの基本構造
   <?php

   namespace App\Http\Controllers;

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

   class TaskController extends Controller
   {
       public function index()
       {
           $tasks = Task::all();
           return view('tasks.index', compact('tasks'));
       }
   }
  1. app/Models/
  • データベースとのやり取りを管理
  • 例：Taskモデルの基本構造
   <?php

   namespace App\Models;

   use Illuminate\Database\Eloquent\Model;

   class Task extends Model
   {
       protected $fillable = ['title', 'description', 'status'];
   }
  1. resources/views/
  • ビューテンプレートを配置
  • 例：tasks/index.blade.phpの基本構造
   @extends('layouts.app')

   @section('content')
   <div class="container">
       <h1>タスク一覧</h1>
       @foreach($tasks as $task)
           <div class="card mb-3">
               <div class="card-body">
                   <h5>{{ $task->title }}</h5>
                   <p>{{ $task->description }}</p>
               </div>
           </div>
       @endforeach
   </div>
   @endsection

重要な設定ファイルの確認と調整

プロジェクトの設定は主に以下のファイルで管理します：

  1. .env
  • 環境変数の設定
   APP_NAME=MyFirstApp
   APP_ENV=local
   APP_DEBUG=true
   DB_CONNECTION=mysql
   DB_HOST=127.0.0.1
   DB_PORT=3306
   DB_DATABASE=my_first_app
   DB_USERNAME=root
   DB_PASSWORD=
  1. config/app.php
  • アプリケーションの基本設定
   return [
       'name' => env('APP_NAME', 'Laravel'),
       'env' => env('APP_ENV', 'production'),
       'debug' => env('APP_DEBUG', false),
       'timezone' => 'Asia/Tokyo',
       'locale' => 'ja',
   ];
  1. config/database.php
  • データベース接続設定
   return [
       'default' => env('DB_CONNECTION', 'mysql'),
       'connections' => [
           'mysql' => [
               'driver' => 'mysql',
               'host' => env('DB_HOST', '127.0.0.1'),
               'database' => env('DB_DATABASE', 'forge'),
               'username' => env('DB_USERNAME', 'forge'),
               'password' => env('DB_PASSWORD', ''),
           ],
       ],
   ];

重要なポイント：

  • .envファイルはGitにコミットしない（セキュリティ上の理由）
  • 本番環境ではAPP_DEBUG=falseに設定する
  • タイムゾーンは必ずAsia/Tokyoに設定する
  • 日本語化する場合はlocaleをjaに設定する

これらの設定が完了したら、次のセクションで実際のタスク管理アプリケーションの開発に進みます。

シンプルなタスク管理アプリを作ってみよう

データベースのセットアップとマイグレーション

まず、タスク管理に必要なデータベーステーブルを作成します：

  1. マイグレーションファイルの作成
php artisan make:model Task -m
  1. マイグレーションファイルの編集 (database/migrations/yyyy_mm_dd_create_tasks_table.php)
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('description')->nullable();
            $table->enum('status', ['未着手', '進行中', '完了'])->default('未着手');
            $table->date('due_date')->nullable();
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('tasks');
    }
};
  1. マイグレーションの実行
php artisan migrate

基本的なCRUD操作の実装手順

  1. モデルの設定 (app/Models/Task.php)
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

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

    protected $casts = [
        'due_date' => 'date'
    ];
}
  1. コントローラーの作成と実装 (app/Http/Controllers/TaskController.php)
<?php

namespace App\Http\Controllers;

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

class TaskController extends Controller
{
    // タスク一覧表示
    public function index()
    {
        $tasks = Task::orderBy('created_at', 'desc')->get();
        return view('tasks.index', compact('tasks'));
    }

    // タスク作成フォーム表示
    public function create()
    {
        return view('tasks.create');
    }

    // タスク保存処理
    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required|max:255',
            'description' => 'nullable',
            'status' => 'required|in:未着手,進行中,完了',
            'due_date' => 'nullable|date'
        ]);

        Task::create($request->all());

        return redirect()->route('tasks.index')
            ->with('success', 'タスクが作成されました');
    }

    // タスク編集フォーム表示
    public function edit(Task $task)
    {
        return view('tasks.edit', compact('task'));
    }

    // タスク更新処理
    public function update(Request $request, Task $task)
    {
        $request->validate([
            'title' => 'required|max:255',
            'description' => 'nullable',
            'status' => 'required|in:未着手,進行中,完了',
            'due_date' => 'nullable|date'
        ]);

        $task->update($request->all());

        return redirect()->route('tasks.index')
            ->with('success', 'タスクが更新されました');
    }

    // タスク削除処理
    public function destroy(Task $task)
    {
        $task->delete();

        return redirect()->route('tasks.index')
            ->with('success', 'タスクが削除されました');
    }
}

ルーティングとコントローラーの基礎

  1. ルートの定義 (routes/web.php)
<?php

use App\Http\Controllers\TaskController;
use Illuminate\Support\Facades\Route;

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

Route::resource('tasks', TaskController::class);
  1. ビューの作成

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

@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">タスク一覧</h1>
        <a href="{{ route('tasks.create') }}" 
           class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            新規タスク作成
        </a>
    </div>

    @if(session('success'))
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4">
            {{ session('success') }}
        </div>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        @foreach($tasks as $task)
            <div class="border rounded-lg p-4 shadow-sm">
                <h2 class="text-xl font-semibold mb-2">{{ $task->title }}</h2>
                <p class="text-gray-600 mb-2">{{ $task->description }}</p>
                <div class="flex justify-between items-center">
                    <span class="px-2 py-1 rounded text-sm
                        @if($task->status === '完了') bg-green-100 text-green-800
                        @elseif($task->status === '進行中') bg-yellow-100 text-yellow-800
                        @else bg-gray-100 text-gray-800 @endif">
                        {{ $task->status }}
                    </span>
                    <div class="space-x-2">
                        <a href="{{ route('tasks.edit', $task) }}" 
                           class="text-blue-500 hover:text-blue-700">編集</a>
                        <form action="{{ route('tasks.destroy', $task) }}" 
                              method="POST" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" 
                                    class="text-red-500 hover:text-red-700"
                                    onclick="return confirm('本当に削除しますか？')">
                                削除
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection

タスク作成フォーム (resources/views/tasks/create.blade.php):

@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold mb-6">新規タスク作成</h1>

    <form action="{{ route('tasks.store') }}" method="POST" class="max-w-lg">
        @csrf

        <div class="mb-4">
            <label for="title" class="block text-gray-700 font-bold mb-2">
                タイトル
            </label>
            <input type="text" name="title" id="title" 
                   class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                   value="{{ old('title') }}" required>
            @error('title')
                <p class="text-red-500 text-xs italic">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="description" class="block text-gray-700 font-bold mb-2">
                説明
            </label>
            <textarea name="description" id="description" rows="3" 
                      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">{{ old('description') }}</textarea>
        </div>

        <div class="mb-4">
            <label for="status" class="block text-gray-700 font-bold mb-2">
                ステータス
            </label>
            <select name="status" id="status" 
                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                <option value="未着手">未着手</option>
                <option value="進行中">進行中</option>
                <option value="完了">完了</option>
            </select>
        </div>

        <div class="mb-4">
            <label for="due_date" class="block text-gray-700 font-bold mb-2">
                期限日
            </label>
            <input type="date" name="due_date" id="due_date" 
                   class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                   value="{{ old('due_date') }}">
        </div>

        <div class="flex items-center justify-between">
            <button type="submit" 
                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                作成する
            </button>
            <a href="{{ route('tasks.index') }}" 
               class="text-gray-600 hover:text-gray-800">
                キャンセル
            </a>
        </div>
    </form>
</div>
@endsection

これで基本的なタスク管理アプリケーションの実装は完了です。アプリケーションを起動して動作確認を行いましょう：

php artisan serve

ブラウザで http://localhost:8000 にアクセスすると、作成したタスク管理アプリケーションが表示されます。

Laravelアプリケーションのデプロイ方法

本番環境にデプロイする際の注意点

デプロイ前の重要なチェックリスト：

  1. セキュリティ設定
// .env
APP_ENV=production
APP_DEBUG=false
APP_URL=https://your-domain.com

// config/app.php
'debug' => env('APP_DEBUG', false),
'env' => env('APP_ENV', 'production'),
  1. パフォーマンス最適化
# キャッシュクリア
php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear

# キャッシュ生成
php artisan config:cache
php artisan route:cache
php artisan view:cache
  1. 依存パッケージの最適化
# 開発用パッケージを除外してインストール
composer install --no-dev --optimize-autoloader
  1. ストレージディレクトリのセットアップ
# ストレージディレクトリのシンボリックリンク作成
php artisan storage:link

# ストレージディレクトリのパーミッション設定
chmod -R 775 storage bootstrap/cache

無料で使えるホスティングサービスの選び方

初めてのデプロイには、以下のホスティングサービスがおすすめです：

1. Heroku

  • メリット
  • 無料プランあり（制限付き）
  • デプロイが簡単
  • GitHubと連携可能

デプロイ手順：

# Heroku CLIのインストール
# Windowsの場合
scoop install heroku-cli

# macOSの場合
brew tap heroku/brew && brew install heroku

# Herokuへのログイン
heroku login

# アプリケーションの作成
heroku create my-first-laravel-app

# Procfileの作成
echo "web: vendor/bin/heroku-php-apache2 public/" > Procfile

# デプロイ
git push heroku main

# 環境変数の設定
heroku config:set APP_KEY=$(php artisan key:generate --show)

2. Railway

  • メリット
  • 無料クレジットあり
  • GitHubと連携可能
  • デプロイが自動化しやすい

デプロイ設定例：

// railway.json
{
  "build": {
    "builder": "NIXPACKS"
  },
  "deploy": {
    "startCommand": "php artisan migrate --force && php artisan serve --host 0.0.0.0 --port $PORT",
    "restartPolicyType": "ON_FAILURE",
    "restartPolicyMaxRetries": 10
  }
}

デプロイ前の本番環境チェックリスト：

  1. データベース設定
DB_CONNECTION=mysql
DB_HOST=${DB_HOST}
DB_PORT=${DB_PORT}
DB_DATABASE=${DB_DATABASE}
DB_USERNAME=${DB_USERNAME}
DB_PASSWORD=${DB_PASSWORD}
  1. セキュリティヘッダーの設定
// app/Http/Middleware/TrustProxies.php
protected $proxies = '*';
  1. SSLの設定
// app/Providers/AppServiceProvider.php
public function boot()
{
    if(config('app.env') === 'production') {
        \URL::forceScheme('https');
    }
}
  1. エラーログの設定
// config/logging.php
'channels' => [
    'stack' => [
        'driver' => 'stack',
        'channels' => ['single'],
        'ignore_exceptions' => false,
    ],
    'single' => [
        'driver' => 'single',
        'path' => storage_path('logs/laravel.log'),
        'level' => env('LOG_LEVEL', 'debug'),
    ],
]

デプロイ後のチェックポイント：

  1. アプリケーションが正常に起動するか
  2. データベース接続が正常か
  3. ファイルアップロードが機能するか
  4. キャッシュが正常に動作するか
  5. メール送信が機能するか（設定している場合）

デプロイ後のトラブルシューティング：

# ログの確認
heroku logs --tail  # Herokuの場合

# マイグレーションの確認
php artisan migrate:status

# キャッシュのクリア
php artisan optimize:clear

# アプリケーションステータスの確認
php artisan about

これらの手順に従えば、初めてのLaravelアプリケーションを安全に本番環境にデプロイすることができます。次のセクションでは、今後の学習ロードマップについて解説します。

次のステップ：Laravelの学習ロードマップ

推奨される学習順序と重要な概念

初級レベル（1-2ヶ月）

  1. 基本的なルーティングとコントローラー
// 基本的なルーティング
Route::get('/tasks', [TaskController::class, 'index']);

// リソースコントローラー
Route::resource('tasks', TaskController::class);

// グループ化とミドルウェア
Route::middleware(['auth'])->group(function () {
    Route::get('/dashboard', DashboardController::class);
});
  1. Eloquentモデルの基礎
// リレーションシップの定義
class User extends Model
{
    public function posts()
    {
        return $this->hasMany(Post::class);
    }
}

// クエリビルダーの基本
$users = User::where('active', true)
            ->orderBy('name')
            ->get();
  1. ブレードテンプレートの基本
@if(auth()->check())
    <div>ようこそ、{{ auth()->user()->name }}さん</div>
@endif

@foreach($tasks as $task)
    <div>{{ $task->title }}</div>
@endforeach

中級レベル（3-6ヶ月）

  1. 認証と認可
  • Laravelの認証システム
  • Gates & Policies
  • ロールとパーミッション
  1. フォームリクエストとバリデーション
class TaskRequest extends FormRequest
{
    public function rules()
    {
        return [
            'title' => 'required|max:255',
            'description' => 'nullable|string',
            'due_date' => 'required|date|after:today',
        ];
    }
}
  1. イベントとリスナー
// イベントの定義
class TaskCompleted
{
    public $task;

    public function __construct(Task $task)
    {
        $this->task = $task;
    }
}

// リスナーの実装
class SendTaskCompletionNotification
{
    public function handle(TaskCompleted $event)
    {
        // 通知処理
    }
}

上級レベル（6ヶ月以降）

  1. アーキテクチャパターン
  • リポジトリパターン
  • サービスレイヤー
  • DTOs（Data Transfer Objects）
  1. キャッシュとパフォーマンス最適化
// キャッシュの活用例
public function index()
{
    return Cache::remember('tasks', 3600, function () {
        return Task::with('user')
                  ->latest()
                  ->paginate(20);
    });
}
  1. テスト駆動開発（TDD）
class TaskTest extends TestCase
{
    public function test_can_create_task()
    {
        $this->post('/tasks', [
            'title' => 'Test Task',
            'description' => 'Test Description'
        ])->assertStatus(201);

        $this->assertDatabaseHas('tasks', [
            'title' => 'Test Task'
        ]);
    }
}

実践的なプロジェクトアイデアと参考資料

初級者向けプロジェクト：

  1. 個人ブログシステム
  • 記事のCRUD操作
  • カテゴリー管理
  • コメント機能
  1. シンプルなECサイト
  • 商品管理
  • カート機能
  • 注文処理

中級者向けプロジェクト：

  1. 予約管理システム
// 予約モデル
class Reservation extends Model
{
    protected $fillable = [
        'user_id',
        'service_id',
        'start_time',
        'end_time',
        'status'
    ];

    public function isAvailable()
    {
        return !static::where('service_id', $this->service_id)
            ->where('start_time', '<', $this->end_time)
            ->where('end_time', '>', $this->start_time)
            ->exists();
    }
}
  1. SNSクローン
  • ユーザー認証
  • フォロー機能
  • 投稿とコメント
  • リアルタイム通知

上級者向けプロジェクト：

  1. マイクロサービスアーキテクチャ
  • APIゲートウェイ
  • サービス間通信
  • 非同期処理
  1. SaaSプラットフォーム
  • マルチテナンシー
  • サブスクリプション管理
  • API開発

推奨学習リソース：

  1. 公式ドキュメント
  • Laravel公式ドキュメント（日本語）
  • Laracastsのビデオチュートリアル
  1. 書籍
  • 『実践Laravel』
  • 『Laravel Clean Code』
  • 『テスト駆動Laravel』
  1. オンラインコミュニティ
  • Laravel.jp
  • Qiita Laravelタグ
  • PHPコミュニティ

学習のポイント：

  1. 公式ドキュメントを常に参照する習慣をつける
  2. 小さなプロジェクトから始めて徐々に規模を拡大
  3. コードレビューを積極的に受ける
  4. テストコードを書く習慣をつける
  5. セキュリティベストプラクティスを意識する

この学習ロードマップに従って、段階的にスキルアップを図ることで、Laravelの実践的な開発者として成長することができます。

前の記事

【保存版】Laravel FormRequestで実現する堅実…

次の記事

Laravel Filamentで実現する高機能な管理画面開発…