【JavaScript】Webページに「いいね」ボタンと「バッド」ボタンをカウント付きで実装する方法

2024.04.02

Webページで「いいね」ボタンや「バッド」ボタンなどのフィードバック機能を実装することは、ユーザーエンゲージメントを高めるために重要です。この記事では、JavaScriptとサーバーサイドの両方で「いいね」ボタンと「バッド」ボタンをカウント付きで実装する方法について解説します。

クライアント側の実装 (JavaScript)

まずは、クライアント側での実装を行います。以下のコードは、HTMLとJavaScriptを使用して「いいね」ボタンと「バッド」ボタンをカウント付きで実装したものです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>いいね/バッド カウンター</title>
<style>
    button {
        margin-right: 10px;
    }
</style>
</head>
<body>
    <h1>いいね/バッド カウンター</h1>
    <button id="likeBtn">いいね</button>
    <span id="likeCount">0</span>
    <button id="dislikeBtn">バッド</button>
    <span id="dislikeCount">0</span>

    <script>
        // いいねボタンのクリック回数
        let likeCount = 0;
        // バッドボタンのクリック回数
        let dislikeCount = 0;

        // いいねボタンのクリック時の処理
        document.getElementById('likeBtn').addEventListener('click', function() {
            likeCount++;
            document.getElementById('likeCount').textContent = likeCount;
            // サーバーにいいねカウントを送信
            sendCountToServer('like', likeCount);
        });

        // バッドボタンのクリック時の処理
        document.getElementById('dislikeBtn').addEventListener('click', function() {
            dislikeCount++;
            document.getElementById('dislikeCount').textContent = dislikeCount;
            // サーバーにバッドカウントを送信
            sendCountToServer('dislike', dislikeCount);
        });

        // サーバーにカウントを送信する関数
        function sendCountToServer(type, count) {
            // サーバーのエンドポイントにPOSTリクエストを送信
            fetch('/update-count', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    type: type,
                    count: count
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('サーバーエラー');
                }
                return response.json();
            })
            .then(data => {
                console.log(data.message);
            })
            .catch(error => {
                console.error(error.message);
            });
        }
    </script>
</body>
</html>

このコードでは、ボタンのクリック回数を管理し、クリック時にサーバーにカウントを送信するJavaScriptを実装しています。

サーバーサイドの実装

次に、サーバーサイドでの実装を行います。ここではNode.jsとExpress.jsを使用した例を示します。

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

app.use(bodyParser.json());

let likeCount = 0;
let dislikeCount = 0;

// クライアントからのカウント更新リクエストを処理
app.post('/update-count', (req, res) => {
    const { type, count } = req.body;
    if (type === 'like') {
        likeCount = count;
        res.json({ message: 'いいねカウントが更新されました。' });
    } else if (type === 'dislike') {
        dislikeCount = count;
        res.json({ message: 'バッドカウントが更新されました。' });
    } else {
        res.status(400).json({ message: '無効なリクエストです。' });
    }
});

app.listen(port, () => {
    console.log(`サーバーがポート ${port} で起動しました。`);
});

このサーバーサイドのコードでは、Expressフレームワークを使用してHTTPリクエストを処理し、’/update-count’エンドポイントに対してPOSTリクエストを受け取ります。受け取ったデータを解析し、いいねカウントとバッドカウントを更新します。その後、適切なレスポンスを返します。

まとめ

この記事では、JavaScriptとサーバーサイドを使用して「いいね」ボタンと「バッド」ボタンをカウント付きで実装する方法について解説しました。
クライアント側ではJavaScriptを使用してボタンのクリック回数を管理し、サーバーサイドではExpress.jsを使用してHTTPリクエストを処理してカウントを更新します。このようにすることで、ユーザーエンゲージメントを高めるフィードバック機能を実装することができます。