"Be Jamstack Engineer." -WordPressコーダーのJamstack入門-

この記事は「BEMALab アドベントカレンダー 2024」24日目の記事です。

はじめに 

こんにちは！
メンバーズルーツカンパニーでフロントエンドエンジニアをしている岡田です。

私は数ヶ月前まで、従来の開発手法しか経験の無いしがない「コーダー（HTML、 CSS、 Javascriptなどの低級言語しか扱わない開発者、マークアップエンジニアとも言われる）」でした。

そんな現状を打破するために、これからのフロントエンド開発に欠かせない「Jamstack」技術を推進するチームに所属させていただきました。
そこで得た経験を基にJamstackエンジニアへの入門の参考となる内容をまとめましたので、ぜひご覧ください。

Jamstackへの第一歩を踏み出し、このサイトのコンセプトである"BEMA"（Be Engineer, More Agile）を共に志すエンジニアが増えることを願っています。

コーダーとしての苦悩

私はここ数年間、WordPressなどの従来型CMSを使用したウェブサイト構築や静的ページの制作に携わってきました。
主にHTMLやCSS、JavaScriptを直接記述するコーディング作業が中心で、ReactやVueといったモダンなJavaScriptフレームワークに触れる機会はほとんどありませんでした。
このような環境で、最新のフロントエンド技術や開発手法から自然と遠ざかっていき、「今の開発トレンドについていけていないのでは？」「今後のキャリアに影響するのでは？」という不安を抱えながら日々の業務をこなしていました。
今のフロントエンド業界において、従来型の開発手法でウェブサイトを作り続けているエンジニアはまだまだ多いのではないでしょうか。
特にWordPressサイトの開発・運用に関わるエンジニアであれば、以下のような課題に直面することも多いと思います。

• WordPressの保守運用コストを下げたい
• サイトの表示速度を向上させたい
• セキュリティリスクを低減させたい
• コンテンツ更新を効率的に行いたい

この記事では、これらの課題を解決する可能性を秘めた「Jamstack」という技術構成に出会い、WordPressコーダーとしての経験を活かしてJamstackエンジニアに入門するまでの経緯をご紹介します。
Jamstackに興味を持ち、一歩踏み出そうとする方々に向けて、少しでも参考になる情報を提供できればと思います。

Jamstackとの出会い

まず、はじめてJamstackに関連する技術に関心を寄せたのは「ヘッドレスCMS」という言葉を聞くようになった時でした。
WordPressの構成や仕組みにちょうど慣れてきた頃だったので、また新しい技術を学ばないとな、と若干憂鬱な気持ちを抱いていたことをよく覚えています。

そんな中でヘッドレスCMSについて調べていたところ、初めて「Jamstack」という言葉に出会いました。

Jamstackとは

Jamstackとは「JavaScript、APIs、Markup」の頭文字を組み合わせた造語で、モダンなウェブサイト開発のアーキテクチャを表します。

Jamstackの構成では、WordPressなどの従来型CMSとは異なり、以下のような特徴があります。

• フロントエンドとバックエンドの完全な分離
• ビルド時に静的ファイルを生成
• CDNによる高速なコンテンツ配信
• データベースやサーバーサイド処理に起因するセキュリティリスクの軽減

特徴を知った当初は、ふーん、なんかすごそう、程度にしかとらえてなかった記憶でしたが、WordPressなどの従来型CMSとの違いを理解していくうちに、Jamstackの重要性に気付き始めました。

そんな中でJamstackについて学べる環境に身を置きたいと思い、社内で推進活動を行なっていたJamstack研究会に参加することにしました。

Jamstackの構成要素と学習アプローチ

Jamstack研究会では、Jamstackの構成要素である静的サイトジェネレーターに「Astro」、ヘッドレスCMSに「microCMS」、ホスティングサービスに「AWS Amplify」を利用したJamstackのサイト構築をチュートリアルに採用しています。

同じようなスタートラインのエンジニアにとっては、以下のように思うことでしょう。私もその一人でした。

1. 静的サイトジェネレーターが分からない
2. ヘッドレスCMSが分からない
3. ホスティングサービスが分からない

ここからは、Jamstack研究会のメンバーとして、研究会で採用している各技術について説明を加えながら、これらの壁に対する学習アプローチを紹介していきます。

1.静的サイトジェネレーターが分からない

Jamstackのアーキテクチャでは、従来のウェブサイトとは異なり、公開サーバー側でのデータベース処理や動的なHTML生成を行いません。その代わり、ビルド時に必要なデータを取得し、最適化された静的なHTMLファイルを事前に生成します。
この静的ファイルを効率的に生成するためのツールとして「静的サイトジェネレーター」が重要な役割を担っています。

静的サイトジェネレーターには「Next.js」「Gatsby」「Hugo」など、多くの選択肢が存在します。
その中でもJamstack研究会では、高速なパフォーマンスと親しみやすい開発者体験を提供する「Astro」を推奨フレームワークとして採用しています。

Astroとは

Astroは、HTML、CSS、JavaScriptの基本知識があれば始められる、モダンな静的サイトジェネレーターです。
従来のウェブ制作の経験がそのまま活かせる特徴があり、以下の点が特にマークアップエンジニアに適しています。

1. 親しみやすい開発環境
   　・標準的なHTMLとCSSの記法がそのまま使える
   　・コンポーネントの考え方が直感的に理解できる
   　・JavaScriptの基礎知識で十分に開発可能
   　・日本語の公式ドキュメントが充実
   
   
2. 効率的なウェブ開発手法への第一歩
   　・デフォルトで高速なサイトが作れる
   　・必要な機能から段階的に学習できる
   　・モダンな開発手法が自然と身につく
   
   
3. 将来性のある拡張性
   　・ReactやVueなどへの発展的な学習が可能
   　・CMSとの連携でより実践的な開発を経験できる
   　・既存のウェブ開発スキルを活かしながら成長できる

学習アプローチ

Astroを効果的に学ぶためには、公式ドキュメントのチュートリアルを参考にするのがおすすめです。
このチュートリアルでは、ブログサイトの構築を通じてAstroの主要な機能を学ぶことができます。

2.ヘッドレスCMSが分からない

Jamstackのアーキテクチャでは、コンテンツ管理とフロントエンド表示を分離することで、より柔軟で効率的な開発が可能になります。この構成を実現するための重要な要素として「ヘッドレスCMS」があります。
ヘッドレスCMSとは、従来のCMSとは異なり、コンテンツ管理機能のみを提供し、APIを通じて様々なフロントエンドからコンテンツを取得・表示できる仕組みのことです。

ヘッドレスCMSには「Contentful」「Strapi」などの選択肢が存在します。
従来型CMSの代表格であるWordPressも、REST APIを標準搭載しているため、ヘッドレスCMSとして利用することが可能ですが、セットアップや保守の手間を考慮し、Jamstack研究会では直感的な操作性と充実した日本語対応を提供する「microCMS」を推奨CMSとして採用しています。

microCMSとは

microCMSは、APIベースの日本製ヘッドレスCMSです。情報セキュリティマネジメントシステムに関する国際標準規格「ISO 27001（ISMS）」の認証を取得しており、セキュリティ面においても信頼性が高いとされています。

契約プランによって利用できる機能が異なりますが、以下のような機能が備わっています。

• 画像API with imgix
  imgixの画像APIを標準搭載しているため、画像のリサイズやトリミング、フォーマット変換を行うことができます。
  メディアアセットはCDN（Content Delivery Network）経由で配信され、高速なアクセスを実現します。
• トリガー（Webhook）
  コンテンツ更新など特定の操作を行った際に外部システムとの連携を行う機能です。
  コンテンツ公開に合わせて、静的サイトの再ビルドを行うなどの自動化が可能です。
• 権限管理
  サービスの各メンバーに対して、コンテンツの閲覧権限や編集権限を細かく設定できる機能です。
• ワークフロー
  コンテンツを公開する前に、他メンバーへレビュー依頼を送信できます。
  権限管理機能と組み合わせることで、チームでの効率的なコンテンツ運用を実現します。

学習アプローチ

microCMSを効果的に学ぶためには、Astroと組み合わせたチュートリアルがおすすめです。
このチュートリアルでは、実際のブログサイト構築を通じてmicroCMSの基本的な使い方を学ぶことができます。

3.ホスティングサービスが分からない

Jamstackのアーキテクチャでは、静的サイトジェネレーターで生成したファイルをCDN経由で配信することで、高速で安定したウェブサイトを実現します。このホスティング環境を提供するのが「ホスティングサービス」です。

ホスティングサービスには「Vercel」「Netlify」「Cloudflare Pages」など、多くの選択肢が存在します。
Jamstack研究会では、AWSのクラウドサービスを契約している影響から「AWS Amplify」を採用しています。

AWS Amplifyとは

AWS Amplifyは、モダンなウェブアプリケーションの開発とデプロイを効率化するAWSのプラットフォームです。
GitHubなどのリポジトリと連携することで、コードの変更を自動的にビルドし、ウェブサイトとして公開する機能を提供します。
また、AWSの他のサービスとも簡単に連携できます。例えば、独自のドメインを設定したり、ユーザー認証を追加したりといった機能拡張も、専門的な知識がなくても実装できるようになっています。

学習アプローチ

AWS Amplifyには無料利用枠が用意されておりますが、ホスティングサービスの学習用途であれば、よりシンプルな料金体系と充実した無料枠を提供するNetlifyの利用をおすすめします。
前述したAstroやmicroCMSのチュートリアルでもNetlifyを利用したデプロイ手順が紹介されています。

Jamstackの奥深さと可能性

前章において、Astro、microCMS、AWS AmplifyといったJamstackの構成要素についてご紹介しましたが、実際のところ、これらのアーキテクチャがどんな状況においても利用できるわけではありません。

プロジェクトの規模や目的に合わせて、最適なクラウドサービスを選定し、効率的なJamstackアーキテクチャを設計することは、エンジニアとしての重要なスキルとなります。
フロントエンド開発にとどまらず、クラウドインフラ、セキュリティ、パフォーマンス最適化など、幅広い技術分野への探求は、エンジニアとしての成長を加速させる絶好の機会と言えるでしょう。

Jamstackの学習は、現代のウェブ開発全体を俯瞰できる視野を広げ、技術選定の引き出しを増やすことにつながります。フロントエンドエンジニアが、クラウドネイティブな開発やDevOpsの領域で活躍できるフルスタックエンジニアへと進化していく、そんな豊かなキャリアパスを切り開く入り口となるはずです。

まとめ：これからJamstackに挑戦するエンジニアへ

従来的な開発手法やWordPressなどのCMS開発から新しい技術スタックへの移行は、初めは不安や抵抗を感じるかもしれません。
しかし、Jamstackは従来の開発手法しか経験の無いエンジニアにとっても学びやすく、発展性の高い技術構成であるため、第一歩として取り組む価値があると思います。

Jamstackの学習を通じて、フロントエンドエンジニアとしてのスキルをさらに高め、新たなキャリアの可能性を広げていきましょう。

おまけ：WordPressをmicroCMSに移行してみる

もしあなたがWordPressを利用したマイクロサービスやブログサイトを管理している場合、
WordPressのコンテンツをmicroCMSに移行することで、Jamstackのアーキテクチャを採用した新しいサイト構築にスムーズに移行することができます。
WordPressのコンテンツをmicroCMSに移行する方法について、microCMSブログへと寄稿しチュートリアルとして掲載させていただいておりますので、ぜひご参照ください！