0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

📝【超初心者向け】PHPとLaravelでミニレビュー投稿アプリを作ろう!🚀

Last updated at Posted at 2025-09-03

✅ 前提環境

以下を準備してください:

  • 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/ を開いて、レビューを投稿すると一覧に表示されます 🎉
blog1.PNG


💡 応用アイデア(遊び感覚で拡張)

  • 星評価を追加(1〜5の評価付きレビューに)
  • 🖼 画像アップロード機能(商品写真やスクリーンショット付き投稿)
  • 🗑 削除・編集機能を追加して「ミニCRUD化」
  • 👤 ユーザー認証を導入して「ログインした人だけ投稿可能」に

🎯 まとめ

  • Laravelでレビュー投稿アプリを作成
  • 投稿 → DB保存 → 一覧表示の基本フローを体験
  • 「動いた!」が楽しいから、学習のモチベが続く

👉 まずはこのシンプルなアプリで基礎を掴み、⭐や画像付きに拡張して遊びながらステップアップしましょう!


0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?