✅ 前提環境
以下を準備してください:
- OS: Windows / Mac / Linux(XAMPP推奨)
- XAMPP: Apache と MySQL(MariaDB)が起動可能
- Composer: インストール済み
- エディタ: VS Code 推奨
確認コマンド(ターミナル or PowerShell):
php -v # PHPバージョン確認(例: 8.2.12)
composer -V # Composerバージョン確認(例: 2.x.x)
🧭 作るもの(完成イメージ)
- トップ画面にレビュー投稿フォーム
- 投稿するとデータベースに保存
- 一覧画面でレビューが表示される
- 「アプリを作った!」という実感が得られる 🎉
🛠 手順
1. Laravelプロジェクト作成
cd C:\xampp\htdocs # XAMPP環境の場合
composer create-project laravel/laravel review-app
cd review-app
php artisan serve
ブラウザで http://127.0.0.1:8000
にアクセスしてLaravel初期画面が出れば成功。
2. データベース作成(phpMyAdmin)
- ブラウザで
http://localhost/phpmyadmin/
を開く -
新規作成 → 名前を
review_app
にして作成 - 照合順序:
utf8mb4_general_ci
3. .env
設定
review-app/.env
を編集:
APP_NAME="ReviewApp"
APP_ENV=local
APP_DEBUG=true
APP_URL=http://localhost
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=review_app
DB_USERNAME=root
DB_PASSWORD=
SESSION_DRIVER=file
設定を反映:
php artisan key:generate
php artisan config:clear
4. マイグレーション作成
php artisan make:migration create_reviews_table --create=reviews
database/migrations/xxxx_xx_xx_create_reviews_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(): void
{
Schema::create('reviews', function (Blueprint $table) {
$table->id();
$table->string('author'); // 投稿者
$table->text('content'); // レビュー本文
$table->timestamps();
});
}
public function down(): void
{
Schema::dropIfExists('reviews');
}
};
実行:
php artisan migrate
5. モデル作成
php artisan make:model Review
app/Models/Review.php
を編集:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Review extends Model
{
protected $fillable = ['author', 'content'];
}
6. コントローラ作成
php artisan make:controller ReviewController
app/Http/Controllers/ReviewController.php
を編集:
<?php
namespace App\Http\Controllers;
use App\Models\Review;
use Illuminate\Http\Request;
class ReviewController extends Controller
{
public function index()
{
$reviews = Review::latest()->get();
return view('reviews.index', compact('reviews'));
}
public function store(Request $request)
{
$request->validate([
'author' => 'required|string|max:50',
'content' => 'required|string|max:500',
]);
Review::create($request->all());
return redirect()->route('reviews.index')->with('status', 'レビューを投稿しました!');
}
}
7. ルート設定
routes/web.php
:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ReviewController;
Route::get('/', [ReviewController::class, 'index'])->name('reviews.index');
Route::post('/reviews', [ReviewController::class, 'store'])->name('reviews.store');
8. ビュー作成
resources/views/reviews/index.blade.php
:
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レビュー投稿アプリ</title>
<style>
body { font-family: sans-serif; background: #f3f4f6; margin: 0; padding: 20px; }
.container { max-width: 700px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; }
h1 { text-align: center; }
form { margin-bottom: 20px; }
input, textarea { width: 100%; margin: 5px 0; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
button { padding: 8px 16px; background: #2563eb; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #1d4ed8; }
.review { border-bottom: 1px solid #eee; padding: 10px 0; }
.author { font-weight: bold; color: #374151; }
.content { margin-top: 5px; }
.status { color: green; margin-bottom: 10px; }
</style>
</head>
<body>
<div class="container">
<h1>📝 レビュー投稿アプリ</h1>
@if(session('status'))
<p class="status">{{ session('status') }}</p>
@endif
<form method="post" action="{{ route('reviews.store') }}">
@csrf
<input type="text" name="author" placeholder="名前" required>
<textarea name="content" rows="3" placeholder="レビュー内容" required></textarea>
<button type="submit">投稿</button>
</form>
<h2>レビュー一覧</h2>
@forelse($reviews as $review)
<div class="review">
<div class="author">{{ $review->author }}</div>
<div class="content">{{ $review->content }}</div>
<small>{{ $review->created_at->format('Y-m-d H:i') }}</small>
</div>
@empty
<p>まだレビューはありません。</p>
@endforelse
</div>
</body>
</html>
🚀 実行
php artisan serve
ブラウザで http://127.0.0.1:8000/
を開いて、レビューを投稿すると一覧に表示されます 🎉
💡 応用アイデア(遊び感覚で拡張)
- ⭐ 星評価を追加(1〜5の評価付きレビューに)
- 🖼 画像アップロード機能(商品写真やスクリーンショット付き投稿)
- 🗑 削除・編集機能を追加して「ミニCRUD化」
- 👤 ユーザー認証を導入して「ログインした人だけ投稿可能」に
🎯 まとめ
- Laravelでレビュー投稿アプリを作成
- 投稿 → DB保存 → 一覧表示の基本フローを体験
- 「動いた!」が楽しいから、学習のモチベが続く
👉 まずはこのシンプルなアプリで基礎を掴み、⭐や画像付きに拡張して遊びながらステップアップしましょう!