Laravel いいね機能の実装方法

「いいね」機能をつける場合、ログインユーザーのみが「いいね」できるようにする方法が一般的ですが、ログインなしの場合でも可能です。

今回は、前半はログインしているユーザー用の「いいね」機能について解説します。

後半は、ここにログインなしユーザーの「いいね」も反映されるようにしていきます。

ログインなしの場合は、IPアドレスを使って、ユーザーを識別します。

じゅんこ

Laravelの醍醐味のひとつは、リレーション。

今回はリレーションをフル活用して、機能を搭載していきますね。

Laravel いいね機能追加・ログインユーザー用

Laravel いいね機能追加・ログインユーザー用

まずはログインユーザーのみが「いいね」できる機能を搭載します。

今回は、すでにUserモデルとPostモデルがあるとします。UserモデルとPostモデルに多対多リレーションを設定していきます。

① 中間テーブルを作成

PostとUserの中間テーブルを作成します。

php artisan make:migration create_post_user_table

マイグレーションファイルには、次のようにいれます。

    public function up()
    {
        Schema::create('nices', function (Blueprint $table) {
            $table->id();
            $table->foreignId('post_id');
            $table->foreignId('user_id');
            $table->timestamps();
        });
    }

マイグレートを実行します。

php artisan migrate

② リレーションを設定

多対多リレーションを設定します。

【Userモデルファイル】

1人ユーザーが複数の投稿をする可能性があるので、Postモデルに対して、すでにhasManyメソッドを設定がされているとします。

さらに、１人のユーザーが複数の投稿にに対して「いいね」をする可能性があるので、多対多リレーションを設定し、belongsToManyメソッドを設定します。

    public function posts() {
        return $this->hasMany(Post::class);
    }

    public function favorites()
    {
        return $this->belongsToMany(Post::class);
    }

【Postモデルファイル】

ひとつの投稿は、ひとりのユーザーに紐づくので、Postモデルに対して、すでにbelongsToメソッドを設定されているとします。

さらに、ひとつの投稿は、複数のユーザーの「いいね」を獲得する可能性があるので、多対多リレーションを設定し、belongsToManyメソッドを設定します。

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

    public function followers()
    {
        return $this->belongsToMany(User::class);
    }

③ ルートファイルの設定

今回は既にある投稿表示用の画面に「いいね」機能を搭載することにします。

新たに下記のルート設定を加えます。

【routes/web.php】

use App\Http\Controllers\PostController;

（省略）

Route::post('/post/{post}/like', [PostController::class, 'like'])->name('post.like');

④ コントローラーの作成

「いいね」を付け足し消したりする処理を記述するため、PostContollerに処理を加えます。もしまだコントローラがなければ、作成します。

php artisan make:controller PostController

PostControllerを開き、上部に、use宣言を追加しておきましょう。

namespace App\Http\Controllers;
use Illuminate\Http\Request;
// use宣言追加
use App\Models\Post;

次に「いいね」をつけるためにlikeメソッドを入れます。もし「いいね」があれば、いいねを外す、なければ追加するようにしました。

【PostController likeメソッド】

public function like(Post $post)
    {
        $user = auth()->user();
        $isLiked = $user->favorites()->where('post_id', $post->id)->exists();

        if ($isLiked) {
            $user->favorites()->detach($post);
        } else {
            $user->favorites()->attach($post);
        }

        return back();
    }

⑥ビューファイルの作成

最後は、見える部分を作っていきます。

既にある投稿一覧用のビューファイルに、次のように、「いいね」ボタンを設置します。

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            投稿一覧
        </h2>
    </x-slot>
    <div class="container mx-auto mt-8">
        <table class="table-auto w-full">
            <thead>
                <tr class="bg-gray-200">
                    <th class="px-4 py-2">ID</th>
                    <th class="px-4 py-2">本文</th>
                    <th class="px-4 py-2">いいね</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($posts as $post)
                    <tr class="border-b border-gray-200 hover:bg-gray-100">
                        <td class="px-4 py-2">{{ $post->id }}</td>
                        <td class="px-4 py-2">{{ $post->body }}</td>
                        <td class="px-4 py-2">
                            <form action="{{ route('post.like', $post) }}" method="POST">
                                @csrf
                                <button type="submit" class="{{ $post->followers->contains(auth()->user()) ? 'bg-red-500 hover:bg-red-700' : 'bg-blue-500 hover:bg-blue-700' }} text-white font-bold py-2 px-4 rounded">
                                    {{ $post->followers->contains(auth()->user()) ? 'いいね取り消し' : 'いいね' }}
                                </button>
                            </form>
                            {{ $post->followers->count() }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</x-app-layout>