
# 目次
1. はじめに
2. microCMSとは
3. いいね機能を実装するための要件
   - 3-1. 必要な機能の洗い出し
   - 3-2. 使用する技術
4. 実装手順
   - 4-1. microCMSでの初期設定
   - 4-2. Firebase Firestoreの設定
   - 4-3. フロントエンドの設定
5. コード例
   - 5-1. Firebase初期化
   - 5-2. いいねボタンの実装
   - 5-3. リアルタイムでのいいねカウント
6. まとめ

## 1. はじめに
microCMSは手軽にコンテンツ管理を実現できるクラウドベースのCMSです。本記事では、microCMSを利用したウェブサイトにいいね機能を実装する方法を解説します。この記事は、フロントエンドの知識を持ち、Firebaseを使用したことがある中級開発者を対象としています。

## 2. microCMSとは
microCMSはAPIベースのコンテンツ管理システムです。直感的なUIでコンテンツ管理ができ、REST APIを介してデータを取得できます。カスタムフィールドや簡単な設定で始められるため、開発のスピードが求められるプロジェクトに適しています。

## 3. いいね機能を実装するための要件

### 3-1. 必要な機能の洗い出し
- いいねボタンの表示とクリックイベントの設定
- いいねの数をリアルタイムで更新
- ユーザーごとに一度のみのいいねを制御する仕組み

### 3-2. 使用する技術
- microCMS: コンテンツ管理
- Firebase Firestore: データベース管理
- JavaScript (React.jsを推奨): フロントエンド

## 4. 実装手順

### 4-1. microCMSでの初期設定
1. microCMSにログインし、新しいプロジェクトを作成。
2. 記事のコンテンツモデルを設定し、記事の識別子を用意する。

### 4-2. Firebase Firestoreの設定
1. Firebaseコンソールで新しいプロジェクトを作成。
2. Firestoreを有効化し、ルールを以下のように設定することで基本的なセキュリティを設定します。

![img](/mosaic-code.jpg)

### 4-3. フロントエンドの設定
1. JavaScriptまたはReact.jsのプロジェクトをセットアップ。
2. Firebase SDKをインポートして初期化。
3. 記事のコンテンツといいね数を表示するUIを作成。

## 5. コード例

### 5-1. Firebase初期化
![img](/mosaic-code.jpg)

### 5-2. いいねボタンの実装
![img](/mosaic-code.jpg)

### 5-3. リアルタイムでのいいねカウント
Firestoreのリアルタイム更新を利用する方法もあります。`onSnapshot`メソッドを使用して、ドキュメントが更新されるたびに実際のデータを自動的に取得することができます。

![img](/mosaic-code.jpg)

## 6. まとめ
microCMSとFirebaseを使用して記事にいいね機能を実装する方法を紹介しました。この方法を用いることで、任意の記事のいいね数を簡単に管理し、リアルタイムでの反映も可能です。エンジニアは、このシステムによりユーザーインタラクションを向上させ、コンテンツの魅力を高めることができます。組み込む際には、適切なセキュリティルールを設定し、必要に応じてFirebaseの課金プランを選んでください。 [cv:issue_marketplace_engineer]


# 目次
1. はじめに
2. microCMSとは
3. いいね機能を実装するための要件
   - 3-1. 必要な機能の洗い出し
   - 3-2. 使用する技術
4. 実装手順
   - 4-1. microCMSでの初期設定
   - 4-2. Firebase Firestoreの設定
   - 4-3. フロントエンドの設定
5. コード例
   - 5-1. Firebase初期化
   - 5-2. いいねボタンの実装
   - 5-3. リアルタイムでのいいねカウント
6. まとめ

## 1. はじめに
microCMSは手軽にコンテンツ管理を実現できるクラウドベースのCMSです。本記事では、microCMSを利用したウェブサイトにいいね機能を実装する方法を解説します。この記事は、フロントエンドの知識を持ち、Firebaseを使用したことがある中級開発者を対象としています。

## 2. microCMSとは
microCMSはAPIベースのコンテンツ管理システムです。直感的なUIでコンテンツ管理ができ、REST APIを介してデータを取得できます。カスタムフィールドや簡単な設定で始められるため、開発のスピードが求められるプロジェクトに適しています。

## 3. いいね機能を実装するための要件

### 3-1. 必要な機能の洗い出し
- いいねボタンの表示とクリックイベントの設定
- いいねの数をリアルタイムで更新
- ユーザーごとに一度のみのいいねを制御する仕組み

### 3-2. 使用する技術
- microCMS: コンテンツ管理
- Firebase Firestore: データベース管理
- JavaScript (React.jsを推奨): フロントエンド

## 4. 実装手順

### 4-1. microCMSでの初期設定
1. microCMSにログインし、新しいプロジェクトを作成。
2. 記事のコンテンツモデルを設定し、記事の識別子を用意する。

### 4-2. Firebase Firestoreの設定
1. Firebaseコンソールで新しいプロジェクトを作成。
2. Firestoreを有効化し、ルールを以下のように設定することで基本的なセキュリティを設定します。

```plaintext
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /likes/{articleId} {
      allow read, write: if true; // テスト用
    }
  }
}
```

### 4-3. フロントエンドの設定
1. JavaScriptまたはReact.jsのプロジェクトをセットアップ。
2. Firebase SDKをインポートして初期化。
3. 記事のコンテンツといいね数を表示するUIを作成。

## 5. コード例

### 5-1. Firebase初期化
```javascript
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
```

### 5-2. いいねボタンの実装
```javascript
import React, { useState, useEffect } from 'react';
import { doc, getDoc, setDoc, updateDoc } from 'firebase/firestore';

const LikeButton = ({ articleId }) => {
  const [likes, setLikes] = useState(0);

  useEffect(() => {
    const fetchLikes = async () => {
      const docRef = doc(db, "likes", articleId);
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        setLikes(docSnap.data().count);
      } else {
        await setDoc(docRef, { count: 0 });
      }
    };

    fetchLikes();
  }, [articleId]);

  const handleLike = async () => {
    const docRef = doc(db, "likes", articleId);
    await updateDoc(docRef, {
      count: likes + 1
    });
    setLikes(likes + 1);
  };

  return (
    <button onClick={handleLike}>
      👍 {likes}
    </button>
  );
};

export default LikeButton;
```

### 5-3. リアルタイムでのいいねカウント
Firestoreのリアルタイム更新を利用する方法もあります。`onSnapshot`メソッドを使用して、ドキュメントが更新されるたびに実際のデータを自動的に取得することができます。

```javascript
import { doc, onSnapshot } from 'firebase/firestore';

useEffect(() => {
  const docRef = doc(db, "likes", articleId);
  const unsubscribe = onSnapshot(docRef, (doc) => {
    setLikes(doc.data().count);
  });

  return () => unsubscribe();
}, [articleId]);
```

## 6. まとめ
microCMSとFirebaseを使用して記事にいいね機能を実装する方法を紹介しました。この方法を用いることで、任意の記事のいいね数を簡単に管理し、リアルタイムでの反映も可能です。エンジニアは、このシステムによりユーザーインタラクションを向上させ、コンテンツの魅力を高めることができます。組み込む際には、適切なセキュリティルールを設定し、必要に応じてFirebaseの課金プランを選んでください。 

目次

続きを読むには単価診断を受けてください（30秒）