🎒 はじめに

超シンプルないいね機能をLaravelで実装してみました．

🎒 自己紹介

初めまして．趣味でweb開発を勉強している273*(ﾂﾅｻﾝﾄﾞ) / Kei.と申します．フルスタック開発やツール制作を行なっています．まだまだ初心者です．

テーブル作成

中間テーブルを作成します．user，postテーブルは事前に用意しておきましょう．
php artisan make:migration create_post_likes_table
yyyy_mm_dd_hhmmss_create_likes_table.php

public function up(): void
{
    Schema::create('likes', function (Blueprint $table) {
        // constrainedの第一引数は参照するテーブル名．
        // 何も指定しない場合は外部キー(foreignId)から自動で推測される．
        $table->foreignId('user_id')->constrained("users")->onDelete('cascade');
        $table->foreignId('post_id')->constrained("posts")->onDelete('cascade');
        // 主キーをuser_idとpost_idの組み合わせにする
        $table->primary(['user_id', 'post_id']);
        $table->timestamps();
    });
}

モデルの作成，追加

php artisan make:model Like
Like.php

// リレーション (Like belongs to a Post)
public function post()
{
	return $this->belongsTo(Post::class);
}

// リレーション (Like belongs to a User)
public function user()
{
	return $this->belongsTo(User::class);
}

User.php / Post.php(追加)

public function likes()
{
	// User / Post has many Likes
	return $this->hasMany(Like::class);
}

ルーティング

web.php

Route::post('/posts/{postId}/like', [LikeController::class, 'likePost'])->middleware("auth");

いいね登録・削除処理

LikeController.php

 public function likePost(Post $post)
{

    // ログインユーザーのidを取得
    $user_id = Auth::id();

    // ログインユーザーがその投稿をいいねしているレコードを取得
    $liked_post = $post->likes()->where('user_id', $user_id);

    // 既に「いいね」しているか確認
    if (!$liked_post->exists()) {

        //「いいね」していない場合は，likesテーブルにレコードを追加
        $like = new Like();
        $like->user_id = $user_id;
        $like->post_id = $post->id;
        $like->save();
    } else {
        // 既に「いいね」をしていた場合は，likesテーブルからレコードを削除     
        $liked_post->delete();
    }

    // いいねの数を取得
    $likes_count = $post->likes->count();

    
    $param = [
        'likes_count' => $likes_count, // いいねの数
    ];

    // フロントにいいねの数を返す
    return response()->json($param);
}

いいねボタンの挙動を実装

resourcesディレクトリにlike.jsを作成
流れ：全てのいいねボタンを取得，いいねボタンを押されたら，バックエンドにいいね処理を行うように送信．処理が成功したら，非同期でいいね数とアイコンを変更．

resources/like.js

// 非同期でいいね機能を実装

// 全てのいいねボタン(ハートアイコン)の要素を取得
const likeBtns = document.querySelectorAll(".like-btn");

likeBtns.forEach((likeBtn) => {
    // どれかのいいねボタンがクリックされた時の処理
    likeBtn.addEventListener("click", async (e) => {
        // クリックされたいいねボタンのid(post id)を取得
        const postId = e.target.id; 

        // /posts/{postId}/likeにPOSTリクエストを送信
        await fetch(`/posts/${postId}/like`, {
            method: "POST", // リクエストメソッドはPOST
            headers: {
                //Content-Typeでサーバーに送るデータの種類を伝える。今回はapplication/json
                "Content-Type": "application/json",
                //csrfトークンを付与
                "X-CSRF-TOKEN": document
                    .querySelector('meta[name="csrf-token"]')
                    .getAttribute("content"),
            },
        })
            .then((res) => res.json()) // レスポンスをJSON形式に変換;
            .then((data) => {
                // いいねの数を更新
                e.target.nextElementSibling.innerHTML = data.likesCount;
                
                // いいねの状態によってハートアイコンの色を変更
                if (e.target.classList.contains("text-pink-500")) {
                    e.target.classList.remove("text-pink-500");
                    e.target.setAttribute("name", "heart-outline");
                } else {
                    e.target.classList.add("text-pink-500");
                    e.target.setAttribute("name", "heart");
                }
            })
             // 失敗した場合はアラートを表示
            .catch(() => alert("いいね処理が失敗しました"));
    });
});

app.js

import "./like"; // 追加

いいねボタンの作成

アイコン：Ionicons: Premium Open Source Icon Pack for Ionic Framework
登録不要でscriptタグで読み込むだけで使用可能．
index.blade.php / show.blade.php

<!-- bladeファイルのheadタグ -->
<head>
    <meta charset="utf-8">
    <title>Blog</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

	<!-- アイコンの読み込み -->
	<meta name="csrf-token" content="{{ csrf_token() }}">
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</head>

<!--いいねボタンの作成 -->

<div class="flex items-center gap-3">
    <h2 class='title text-xl text-blue-600 font-bold'>
	    <a href="/posts/{{ $post->id }}">{{ $post->title }}</a>
    </h2>
    @auth
    <!--その投稿がいいねしているか判定 -->
    @if (Auth::user()->likes()->where('post_id', $post->id)->exists())
    <ion-icon name="heart" class="like-btn cursor-pointer text-pink-500" id={{$post->id}}></ion-icon>
    @else
    <ion-icon name="heart-outline" class="like-btn cursor-pointer" id={{$post->id}}></ion-icon>
    @endif
    <p class="count-num">{{$post->likes->count()}}</p>
    @endauth
</div>

🎒 最後に

Laravelは非常に扱いやすいフレームワークですね．今後も触っていきたいと思います．最後まで読んでいただきありがとうございました！