【Laravel】Laravelで簡単なつぶやきアプリを開発してみた！

最近、PHPのフレームワーク「Laravel」を学んでいるので、学んだことをアウトプットするために、簡易的なつぶやきアプリを開発してみました。

このアプリでは、ユーザーが簡単につぶやきを投稿・編集・削除できるようになっています。また、セキュリティを考慮し、ログインユーザーのみが投稿できる機能も実装しました。

今回は、Laravelを使ってどのようにアプリを作成したのか、その流れを解説します！

1. Laravelでつぶやきを投稿する機能を作成

まず、つぶやきを投稿できるようにするため、Laravelのモデル・マイグレーション・コントローラーを作成しました。

① データベースのテーブル作成

つぶやきを保存するためのテーブルをマイグレーションで作成。

php artisan make:migration create_tweets_table

マイグレーションファイルに、以下のカラムを追加。

Schema::create('tweets', function (Blueprint $table) {
    $table->id();
    $table->string('content');
    $table->foreignId('user_id')->constrained()->onDelete('cascade');
    $table->timestamps();
});

② Eloquentモデルの作成

php artisan make:model Tweet

モデル内で、ユーザーと紐づくようにリレーションを設定。

public function user() {
    return $this->belongsTo(User::class);
}

③ コントローラーで投稿機能を実装

php artisan make:controller TweetController

TweetControllerに以下のコードを追加し、フォームからの投稿を保存できるようにしました。

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

    Tweet::create([
        'content' => $request->content,
        'user_id' => auth()->id(),
    ]);

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

これで、つぶやきの投稿ができるようになりました！

2. 投稿の編集・削除機能を追加

投稿したつぶやきを編集・削除できるようにします。

① 編集機能の実装

編集画面を作成し、以下のルートを設定。

Route::get('/tweets/{tweet}/edit', [TweetController::class, 'edit'])->name('tweets.edit');

コントローラーで編集処理を実装。

public function update(Request $request, Tweet $tweet) {
    $this->authorize('update', $tweet);

    $request->validate(['content' => 'required|max:255']);
    $tweet->update(['content' => $request->content]);

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

② 削除機能の実装

削除処理を追加。

public function destroy(Tweet $tweet) {
    $this->authorize('delete', $tweet);
    $tweet->delete();

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

これで、つぶやきの編集・削除ができるようになりました。

3. ユーザー認証（ログイン機能）を実装

つぶやきはログインユーザーのみが投稿可能とするため、Laravelの認証機能（Laravel Breeze）を導入しました。

composer require laravel/breeze --dev
php artisan breeze:install
php artisan migrate

ミドルウェアで、ログインユーザーのみが投稿できるように設定。

Route::middleware('auth')->group(function () {
    Route::post('/tweets', [TweetController::class, 'store'])->name('tweets.store');
    Route::get('/tweets/{tweet}/edit', [TweetController::class, 'edit'])->name('tweets.edit');
    Route::delete('/tweets/{tweet}', [TweetController::class, 'destroy'])->name('tweets.destroy');
});

これで、未ログインユーザーは投稿できず、閲覧のみ可能になりました。

4. アプリのデザインを整える

最後に、BladeテンプレートとTailwind CSSを活用して、デザインをシンプルに整えました。

一覧ページのBladeテンプレート例：

@foreach($tweets as $tweet)
    <div class="bg-white p-4 rounded shadow mb-2">
        <p>{{ $tweet->content }}</p>
        <small>投稿者: {{ $tweet->user->name }} | 投稿日: {{ $tweet->created_at->diffForHumans() }}</small>
    </div>
@endforeach

シンプルながら見やすく、使いやすいデザインに仕上げました！

まとめ

今回は、Laravelを使って簡単なつぶやきアプリを開発しました。

つぶやきを投稿できる機能を実装
投稿の編集・削除機能を追加
ログイン機能を導入し、投稿は認証ユーザーのみ可能に
デザインを整えて、シンプルで使いやすいUIを作成

Laravelの基礎を学ぶには、実際に動くアプリを作ることが一番の近道です！
これからも、いろいろな機能を追加しながら、さらに技術を磨いていきます。

試してみたい機能があればコメントください！

今後も技術を追求しながらアップデートしていきます！

「こんな機能を試してほしい」「ここを詳しく知りたい」など、皆様のお悩みも随時募集しております！

カテゴリー: 未分類

タグ: movie-10