ひさしぶりの勉強会
2025-06-09 勉強会
はじめに
ひさしぶりの勉強会。
実は前回の勉強会で取り組みたかったのは、サスケWorksをヘッドレスCMSとして利用し、Reactでフロントエンドを構築するという試みでした。
ただ、当時はまだAIの活用も一般的ではなく、技術的な課題も多かったため、思うように進まず一度は断念していました。。
今回はAIをうまく使うことで、多少のつまずきはあっても、全体的にはスムーズに進行することができました。
WorksとReactの連携はひとまず置いて、今回自分に課したお題はこちらです！
実は前回の勉強会で取り組みたかったのは、サスケWorksをヘッドレスCMSとして利用し、Reactでフロントエンドを構築するという試みでした。
ただ、当時はまだAIの活用も一般的ではなく、技術的な課題も多かったため、思うように進まず一度は断念していました。。
今回はAIをうまく使うことで、多少のつまずきはあっても、全体的にはスムーズに進行することができました。
WorksとReactの連携はひとまず置いて、今回自分に課したお題はこちらです！
コンテンツ管理部分の作成 - microCMS
まずは、コンテンツ管理部分（バックエンド側）を作っていきます。
今回ヘッドレスCMSとして利用するのは「microCMS」です。
選んだ理由は色々なフレームワークと連携できるからです。
※「microCMS」は、APIベースの日本製ヘッドレスCMSです。
今回ヘッドレスCMSとして利用するのは「microCMS」です。
選んだ理由は色々なフレームワークと連携できるからです。
※「microCMS」は、APIベースの日本製ヘッドレスCMSです。
1. アカウント登録、ログイン、サービスの作成
microCMSを使うには、まずアカウントを登録し、ログイン後にサービスを作成します。サービスはコンテンツ単位の管理となります。
2. API設定
サービスを作成したら、次にAPIの設定を行います。
エンドポイント名やAPIの種類（オブジェクト／リスト）、フィールド構成などをここで定義します。
設定内容は後のフロント側実装にも関わる重要な部分です。
エンドポイント名やAPIの種類（オブジェクト／リスト）、フィールド構成などをここで定義します。
設定内容は後のフロント側実装にも関わる重要な部分です。
3. コンテンツ（記事）の作成
APIの設定が完了したら、管理画面から実際にコンテンツ（記事）を作成します。
あらかじめ定義したフィールドに沿って、タイトルや本文、画像などの情報を入力して保存することで、API経由で取得できるようになります。
あらかじめ定義したフィールドに沿って、タイトルや本文、画像などの情報を入力して保存することで、API経由で取得できるようになります。
表示部分の作成 - Gatsby
続いて、表示部分（フロントエンド側）を作っていきます。
フロントエンド開発ではReactのフレームワークである「Gatsby」を採用しています。
Gatsbyの特徴としては、静的な HTML ページを生成し、非常に高速なパフォーマンスを実現することに主眼を置いて開発されている点です。
こちらが採用するポイントとなりました。
なので今回は環境構築が終わったあとに、サイトのページスピードも検証していきたいと思います。
フロントエンド開発ではReactのフレームワークである「Gatsby」を採用しています。
Gatsbyの特徴としては、静的な HTML ページを生成し、非常に高速なパフォーマンスを実現することに主眼を置いて開発されている点です。
こちらが採用するポイントとなりました。
なので今回は環境構築が終わったあとに、サイトのページスピードも検証していきたいと思います。
1. Gatsbyのプロジェクト作成
まずはGatsby CLIを使ってプロジェクトを作成します。
公式テンプレートをベースに構成することで、ReactやGraphQLの環境が整った状態で開発をスタートできます。
公式テンプレートをベースに構成することで、ReactやGraphQLの環境が整った状態で開発をスタートできます。
2. Gatsbyを使用してサスケWorksのトップページをリプレイス
作成したGatsbyプロジェクト上で、既存のサスケWorksのトップページを再構築していきます。
画面はコンポーネント（セクション）単位で組み立てていきました。
今回の勉強会では、Reactコンポーネントの構築を一から学びながら進めたため、従来のHTML＋CSS＋JavaScriptで作られたページを置き換える作業には、最も時間をかけた部分となります。
画面はコンポーネント（セクション）単位で組み立てていきました。
今回の勉強会では、Reactコンポーネントの構築を一から学びながら進めたため、従来のHTML＋CSS＋JavaScriptで作られたページを置き換える作業には、最も時間をかけた部分となります。
3. 開発サーバーの起動（ローカルプレビュー）
Gatsbyでは、開発用のローカルサーバーを簡単に立ち上げることができます。
コマンドを実行することで、実際の動作をブラウザ上で確認しながら作業を進められます。
コマンド: gatsby develop
コマンドを実行することで、実際の動作をブラウザ上で確認しながら作業を進められます。
コマンド: gatsby develop
Gatsby + microCMS 連携
ここまでできたら実際に、microCMSのコンテンツデータを取得してGatsbyで表示させてみます。
今回は、動画をピックアップで紹介しているセクションをCMS化して連携します。
今回は、動画をピックアップで紹介しているセクションをCMS化して連携します。
1．APIキーとサービスIDの設定
ここでは、microCMSで発行されたAPIキーやサービスIDをGatsby側に設定します。
これらの変数は、セキュリティと保守性の観点から、.envファイルに格納して管理します。
これらの変数は、セキュリティと保守性の観点から、.envファイルに格納して管理します。
2. GraphQLを使用したデータ確認
Gatsbyでは、GraphQLを使ってmicroCMSなど外部サービスから取得したデータを確認できます。
3. 開発サーバーを起動し、再度プレビュー
データが正しく取得できることを確認したら、テンプレート側にもデータ取得用の処理を追加し、ローカル環境でプレビューを行います。
microCMSのデータを取得してプレビューすることができました。
microCMSのデータを取得してプレビューすることができました。
サーバー連携 - Vercel
最後に、microCMSとGatsbyの連携ができたら、Gitを利用してサーバーへ自動デプロイする仕組みも作ってみたいと思います。
サーバーはサーバーレスな環境で自動デプロイを可能にする「Vercel」を選びました。
サーバーはサーバーレスな環境で自動デプロイを可能にする「Vercel」を選びました。
microCMS + Vercel 連携（コンテンツ更新後の自動デプロイ）
Webhookの利用
Vercelでデプロイhookを発行し、microCMSにVercelで発行したWebhookを登録します。
Vercelでデプロイhookを発行し、microCMSにVercelで発行したWebhookを登録します。
Gatsby + Vercel 連携（サイト更新時の自動デプロイ）
GitHubの利用
Vercelでは、GitHubのリポジトリを指定することで、自動デプロイを簡単に構築できます。
今回はGitHubを経由してVercelと連携し、サイトを更新すると自動でビルド＆デプロイされるよう設定しました。
なお、環境変数を記述した .envファイルはセキュリティの観点から、Git管理には含めていないため、Vercel 側の「Environment Variables」機能を使って個別に登録しています。
Vercelでは、GitHubのリポジトリを指定することで、自動デプロイを簡単に構築できます。
今回はGitHubを経由してVercelと連携し、サイトを更新すると自動でビルド＆デプロイされるよう設定しました。
なお、環境変数を記述した .envファイルはセキュリティの観点から、Git管理には含めていないため、Vercel 側の「Environment Variables」機能を使って個別に登録しています。
ここまでの作業でようやく、Vercelを起点とした、Gatsby、microCMSの更新を検知して自動デプロイする仕組みを作ることができました。
ページスピードの検証
無事サーバーへの自動デプロイもできたので、今回の目的の一つであるページスピードの検証も行います。
検証に使うツールはGoogleが提供する「ページスピードインサイト」です。
表示スピードの評価で高スコアを出すには、多くの技術的要素が必要で難易度が高く、特にモバイルでの90点超えは、なかなかレアなケースです。
ページの表示スピードを高速化するために今回は「Gatsby」を採用したので、効果がどの程度のものか早速ためしてみます。
検証に使うツールはGoogleが提供する「ページスピードインサイト」です。
表示スピードの評価で高スコアを出すには、多くの技術的要素が必要で難易度が高く、特にモバイルでの90点超えは、なかなかレアなケースです。
ページの表示スピードを高速化するために今回は「Gatsby」を採用したので、効果がどの程度のものか早速ためしてみます。
現時点のスコア
現時点のトップページのスコアを確認してみました（※自宅環境での測定）。
結果は、モバイルで47点、デスクトップで75点というスコア。
フレームワークを使っていない構成としては、まずまずのラインといえそうですが、特にモバイル側はもうひと押し改善したいところです。
結果は、モバイルで47点、デスクトップで75点というスコア。
フレームワークを使っていない構成としては、まずまずのラインといえそうですが、特にモバイル側はもうひと押し改善したいところです。
Gatsbyでのスコア
まずはモバイル
いきなりレアケースの96点というハイスコアがでました。
いきなりレアケースの96点というハイスコアがでました。
続いてデスクトップ
こちらもモバイル同様にハイスコアがでています。
こちらもモバイル同様にハイスコアがでています。
ページスピードの検証では、Gatsbyを採用したことで、狙い通りの高速なパフォーマンスを実現できました。
今後の実サイト運用を見据えるうえでも、今回の検証を通じて選択肢のひとつを具体的に試せたことは、大きな収穫でした。
今後の実サイト運用を見据えるうえでも、今回の検証を通じて選択肢のひとつを具体的に試せたことは、大きな収穫でした。
【おまけ】Gatsby + WordPress 連携
ちなみに今回は、WordPress専用のローカル環境構築アプリ「Local」を使用して、WordPress + Gatsbyの構成も実践してみました。
内容的にはmicroCMSとの連携と一緒で、代わりにWordPressをヘッドレスCMSと使用し、Gatsbyでフロント側を作ります。
※この検証は、ローカルでのプレビュー確認までとなります。
※この検証は、ローカルでのプレビュー確認までとなります。
1. WordPress環境の準備（Local）
まずは、Localをローカルにインストールします笑。完了したらLocalを起動して、WordPressサイトを新規作成します。
WordPressインストール完了後、http://your-site.local のアドレスにアクセスします。サイトが表示されました。
次に、管理画面からGatsbyとの連携に必要なプラグインを導入します。
今回導入したプラグインは主に以下となります。
・ WPGatsby
・ WPGraphQL（Gatsby連携用 GraphQL API）
・ Advanced Custom Field（ACF）
・ WPGraphQL for ACF（ACFをGraphQL対応）
今回導入したプラグインは主に以下となります。
・ WPGatsby
・ WPGraphQL（Gatsby連携用 GraphQL API）
・ Advanced Custom Field（ACF）
・ WPGraphQL for ACF（ACFをGraphQL対応）
2. Gatsbyプロジェクトの作成
WordPress側の設定が終わったら、Gatsbyのプロジェクトを新規作成します。
前途の要領でGatsbyに必要なプラグインをインストールしてプロジェクトを作成します。
前途の要領でGatsbyに必要なプラグインをインストールしてプロジェクトを作成します。
3. Gatsby + WordPress 連携
プロジェクトができたら、GatsbyとWordPressを連携していきます。Configファイルの設定やテンプレにGraphQLのデータを取得するためのおまじないを書きます。
4. 開発サーバーの起動（ローカルプレビュー）
連携後、Gatsbyの開発サーバーを起動してプレビューします。
コマンド: gatsby develop
プレビューが表示されました。
コマンド: gatsby develop
プレビューが表示されました。
Gatsby + WordPressの連携検証はひとまずここまでとなります。
先にmicroCMSを使った構築をやったおかげか、思った以上にスムーズに進めることができました。
この検証では、ヘッドレスCMSの選択肢としてWordPressにもトライしてみた形ですが、実際に触ってみることで比較の軸が増えたのは大きな収穫でした。
用途や運用スタイルに応じて、CMSを選べる余地が広がったのはよかったです。
先にmicroCMSを使った構築をやったおかげか、思った以上にスムーズに進めることができました。
この検証では、ヘッドレスCMSの選択肢としてWordPressにもトライしてみた形ですが、実際に触ってみることで比較の軸が増えたのは大きな収穫でした。
用途や運用スタイルに応じて、CMSを選べる余地が広がったのはよかったです。
さいごに
AIの登場のおかげで、前回できなかった自分のモヤモヤを解消することができました。
勉強会は、どこに自分のモチベーションを置くかでやる気の度合いが大きく変わりますが、実際に着手してみると、いろいろと乗り越えるべき課題がある中でも楽しんで取り組めたことが良かったかなと満足しています。
また一つ、突破力を身につけることができました。
最後まで読んでいただき、ありがとうございました！
勉強会は、どこに自分のモチベーションを置くかでやる気の度合いが大きく変わりますが、実際に着手してみると、いろいろと乗り越えるべき課題がある中でも楽しんで取り組めたことが良かったかなと満足しています。
また一つ、突破力を身につけることができました。
最後まで読んでいただき、ありがとうございました！