【9章】microCMS導入演習の振り返り＋ブランチの作成方法など

CMSについて

CMS（Content Management System）とは？

・ Webサイトのコンテンツ（記事や画像など）を管理・更新できる仕組みのこと
・ 専門的なプログラミング知識がなくても、管理画面から簡単に投稿や編集ができる

ヘッドレスCMSとは？

・表示部分（フロントエンド）を持たず、API経由でデータを提供するCMSのこと
・今回使用した microCMS はヘッドレスCMSの一種

ブランチの作成方法等

毎回操作が不安なので自分のメモ用として残しておきますm(__)m

前提：今の状態

• ローカルには my-next フォルダがあり、main ブランチにいる

• ８章で実施したfeature/chapter-8 ブランチも存在

• これから GitHub に chapter-9 という新しいリモートリポジトリを作成し、
  ローカルと紐づけfeature/chapter_9のブランチで課題を進めたい

ステップ①：GitHubで新しいリポジトリを作成

１．GitHubにログイン
２．右上の「＋」→「New repository」をクリック
３．以下を入力：

• Repository name：chapter-9

• Description（任意）：簡単な説明（空でもOK）

• Visibility：Public（またはPrivate）

• その他はデフォルトのままでOK

４．「Create repository」をクリック！
→GitHub上でchapter-9のリポジトリが作成

ステップ②：ローカルのリポジトリの設定

１．VS Code のターミナルで、現在のリモート設定を確認：git remote -v

→現在、ローカルのリポジトリは chapter-8 のGitHubリポジトリとつながっている状態

２．「chapter-9」という新しいリモートリポジトリに切り替えるため
　　今のリモート設定を削除する：git remote remove origin

→これで、chapter-8との接続が解除された状態

ステップ③：以降の手順は、前回のブログを参照

「GitHubの使い方 〜6章でつまずいた私の備忘録〜」に記載のステップ③以降を実施

前回の課題のブランチが残っている場合

• feature/chapter_9 が 現在作業中のブランチ（* がついてる）

• mainブランチのほか、feature/chapter-8 のブランチも ローカルに存在している

feature/chapter-8 が不要な場合の削除手順：

１．差分を確認：git diff main..feature/chapter-8
→何も表示されなければ、差分なし＝削除してOK

２．削除：git branch -d feature/chapter-8
→Deleted branch feature/chapter-8 (was 8767a97).と表示されれば削除成功

９章での学び

①categoryのエラー

修正前

categories の型は、文字列の配列：string[]
→エンドポイント："categories":["React","TypeScript"]
→表示方法：{category}

修正後

categories の型は、オブジェクトの配列：（{ id: string; name: string }[]）
→エンドポイント："categories": [{"id": “<id名>","name": "TypeScript”}]
→表示方法：{category.id}や{category.name}

データの形が変わると、表示の仕方も変える必要がある

②useEffectの理解

useEffect(() => {
  const fetcher = async () => {
    const res = await fetch("https://q84h2qjhgn.microcms.io/api/v1/posts", {
      headers: {
        "X-MICROCMS-API-KEY": process.env
          .NEXT_PUBLIC_MICROCMS_API_KEY as string,
      },
    });
    const { contents } = await res.json();
    setPosts(contents);
    setIsLoading(false);
  };

  fetcher();
}, []);

• useEffect(() => { ... }, [])
  → 初回レンダリング時に一度だけ実行される副作用処理

• fetcher
  → 非同期関数で、microCMSから記事データを取得

• fetch(...)

  →fetch は外部のAPIにリクエストを送る関数

  →await でレスポンス（res）が返ってくるのを待ってる

  →headers に X-MICROCMS-API-KEY を設定して、microCMSにアクセスするための鍵を渡している

• res.json()
  → レスポンスをJSON形式に変換し、contents を取り出す

• setPosts(contents)
  → ステートを更新して、Reactが再描画を行う

③APIキーのセキュリティ対策

APIキーはGitHubに公開されると危険！ そのため、以下の対策が必要！

• 環境変数の設定（.env.local に保存）

  NEXT_PUBLIC_MICROCMS_API_KEY=<APIキー>

  ※Next.jsの公式なルールとして、NEXT_PUBLIC_ がついていない環境変数は、クライアント側では使えない

• コード内で使用：

  headers: {
    'X-MICROCMS-API-KEY': process.env.NEXT_PUBLIC_MICROCMS_API_KEY!,
  }

• .gitignore に .env.local があることにより、GitHubにアップロードされないようになっている

これで .env.local が GitHub にアップロードされず、安全にAPIキーを管理できる！

おわりに

毎回、新しい内容が増えていくけど、新しいことを知れるって本当に楽しいです！

次はいよいよバックエンド開発に入っていきます！
以前、仕事でPHPでバックエンドを実装したことがあるのでなんとなくイメージはついているのですが、Next.jsではどのように実装していくのか、とても楽しみです！

引き続き、10章も頑張っていきます🔥🔥🔥