#24「Jamstackの技術構成と技術選定のポイント」

前回のポッドキャスト「#22「政府統一Webサイト構想が「Jamstack」に注目している理由とは？」に引き続き、Jamstackの技術構成や、導入するときに気をつけることなどについてお話ししました。

※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。

加藤
こんにちは！ ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフがWebデザイン、 WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのポッドキャストです。
10月に公開した「政府統一Webサイト構想が「Jamstack」に注目している理由とは？」というエピソードの続編ということで、再度Jamstackマスターの古川さんをお呼びして今回はJamstackを実現する技術構成のところを中心にお話していきたいと思います。古川さんよろしくお願いします。
古川
よろしくお願いします！
加藤
まずは簡単に前回のエピソードの復習をしておきましょうか。
古川
はい。まずはJamstackってなんだっけ？ってことなんですが、Jamstackとは「Webサイトをより速く、安全で、かつかんたんに拡張できるように設計されたWebサイトの仕組み」のことです。 「分業化が進んだWebサイトを運営する組織が、よりよい顧客体験を、早い開発サイクルで継続的に提供するためには、Webサイトの構築・運用に関わるすべての人が無理せずにうまくいくシステムの仕組みが必要だ」という課題に対してアプローチができます。
加藤
はい。ありがとうございます。Jamstackアーキテクチャを採用することで、「パフォーマンス」「セキュリティ」「スケーラビリティ」「開発者体験」の4つの面で利点を得られるという話をしたのですが、気になる方はぜひ前回のポッドキャストを聞いてみてください！
はい、では本題に移りたいと思います。まずはJamstackって結局どういう技術で構成されているの？という点について聞いてもいいですか？
古川
はい。Jamstackを構成する技術はたくさんあるんですけど、今回は主要な技術要素である静的サイトジェネレータと、コンテンツ管理機能、CDNつきホスティングサービスの3つに絞って取り上げたいと思います。
加藤
一つ目の静的サイトジェネレータとは、テンプレートとコンテンツデータから静的なサイトを構築するツールを指していて、データがストックされているところからコンテンツを取りだして、それをテンプレートと合体させて、静的なHTMLページを生成します。静的サイトジェネレータと呼ばれているツールはかなりたくさんありますよね？
古川
そうですね。たとえばGatsbyとか、Jekyll、Eleventy、Next.jsとか…ぱっと思いつくだけでもたくさん出てきて、正直どれを使っていいか迷ってしまいます。Jamstack公式サイトに、静的サイトジェネレータのリストがあるのでそちらを参照してみてもいいかもしれません。
加藤
これらのツールってどんな観点で選んだらいいでしょうか。
古川
開発チームが慣れてる言語やフレームワークが使えるツールである、とかですかね。たとえばGoで構築されてる静的サイトジェネレータもありますし、あと同じJavaScriptが使えるものでも、テンプレートがReactで作られてるものもあれば、EJSで作られてるものもあったりします。ちなみにこのリストなんですが、GitHubリポジトリのスターの数でもソートできるので、その辺りも参考にするといいかもしれません。
加藤
たしかに調べたときに情報が多く出てくるので、ある程度人気があるかどうかというところもひとつの判断基準になりますね。個人的にはビルドにかかる時間とかもひとつのポイントになるかなと思ってます。ほとんど無料で使えるものばかりなので、まずはチームで試してみて馴染むものを選定するのがいいかもしれませんね。
続いて、コンテンツデータをストックする機能について話したいと思います。
古川
はい。前提としてJamstackでは記事やお知らせの内容などのコンテンツデータと、サイトを生成するテンプレートは分けて管理されます。コンテンツデータをストックする方法としては、CMSを使うのが定番ですが、最近だとGitHubなどにMarkdownファイルを置いてデータベースとして扱う方法もあります。
加藤
Jamstackの文脈ではヘッドレスCMSを使うのが割と一般的ですかね。
古川
そうですね。ヘッドレスCMSはデータをストックする場所と、そこからデータを取得する手段の両方を提供してくれます。CMSと聞くと、WordPressのような、管理画面からコンテンツを入力してそれがそのままページとして出力されるものを想像すると思いますが、ヘッドレスCMSはAPIを介してデータとしてコンテンツを提供します。
加藤
有名なヘッドレスCMSのサービスだとContentfulやGhost、microCMSなどが挙げられますね。ヘッドレスCMSについてもJamstack公式サイトにリストがありますが、こちらはどういった観点で選択するのがいいでしょうか？
古川
記事の投稿をしたり、削除したりなどコンテンツを管理する人は誰で、その人にとってどんな機能が必要なのかを考える必要がありますね。たとえばその管理者が開発者だけで、すべてCLIやテキストエディタだけで更新できるというフローであれば、Markdownのコンテンツ管理方法が向いてるかなと思います。開発者はMarkdownに慣れてますし、ほかに何かコンテンツ管理のサービスを導入しなくても済むのでそこでコストメリットが出せます。
加藤
なるほど。
古川
逆に管理するのがコード編集に不慣れなビジネスユーザーさんが中心の場合は、フォーム感覚で入力できるような管理画面を提供してあげるのが、学習コストと心理的安全性の面から見るといいですよね。となると、管理画面を自前で構築するのか、すでにあるサービスを利用するのか、で、後者だった場合は…という風に、技術選定が行えると思います。
加藤
技術的な面だけではなくだれがどう運用していくかというところがポイントになるわけですね。
3つめはCDNつきホスティングサービスと自動デプロイの部分についてです。Jamstackアーキテクチャでは静的サイトジェネレータを使ってコンテンツを生成したあと、生成したページをCDNで配信するまでの一連の流れが自動化される仕組みを持っています。
古川
この工程を自前で実装するのはかなり大変なのですが、一連の機能をセットで提供してくれるサービスがあります。たとえばNetlify、Vercel、Amplify Console、Azure Static Web Apps、Cloudflare Pagesなどです。これらのサービスはGitHubリポジトリと連携して、リポジトリへのプッシュをきっかけにビルド、デプロイを行います。
加藤
やっぱりホスティングサービスも、どのような機能が必要か、によって選定するのが重要ですか？
古川
それも必要だと思いますが、あとは、ここが不特定多数のユーザにさらされるいちばんのポイントなので、企業が設けているセキュリティ審査の要件を満たしているサービスなのかどうかを気をつけた方がよいと思います。大手クラウドベンダーがサービスを提供していたりするので、同ベンダーのほかのサービスを会社で使っている場合は、社内のセキュリティ審査のハードルやコストが低くなるかもしれません。
加藤
なるほど。ありがとうございます。
ここまでの話の中で技術選定のときのポイントを挙げていただいたんですが、ほかに気をつけるべきことはありますか？
古川
全体的に言えることは、技術選定のときに、誰が運用を行うのか、運用ワークフロー含めて関係者全員で見直して、どんな機能が必要なのか明確にした上で、チームのパフォーマンスが最大限に発揮できるものを選ぶことでしょうか。とくにコンテンツ管理画面なんかは、技術者ではない人が利用する可能性があるので、開発者の独断ではなく関係者全員が納得できるものを選択したほうがよいです。
加藤
簡単にまとめると、Webサイトの運用ワークフローを考えたうえで、ベストなものを選択しましょうってことですね。
古川
あとはセキュリティですかね。Jamstackは従来のWebサイトに比べるとセキュリティ的に優れた点が複数ありますが、セキュリティ面の心配がまったく必要ないわけではありません。たとえば、外部サービスの複数利用はJamstackアーキテクチャの特徴なんですが、外部サービス自体にセキュリティリスクが潜んでいる場合があります。なので、有事に備えて、どのサービスにどんなリスクがあるのかを把握し、対策を考えておく「リスク評価」を行うことをおすすめします。
加藤
そのリスク評価とは具体的にどういったところを確認したほうがよいのでしょうか？
古川
各企業で設けている基準があると思いますので一概にこう、とは言い難いですが、たとえば、情報資産の取り扱いや外部サービスの管理体制はどうなっているのか、だったりとか、サービスにセキュリティ侵害が起きたときにどのような体制で対応するのか、などが考えられます。このリスク評価に関連してなんですが、外部サービスの障害のことも考えたほうがいいと思います。たとえばCDNは一般に障害に強く止まりにくいと言われていますが、100％ダウンしないシステムは存在しません。やっぱり止まる時は止まります。
加藤
うん、そうですよね。記憶に新しいものだと、FastlyというメジャーなCDNサービスがダウンしたのは覚えてますね。
古川
はい。JamstackアーキテクチャではCDNがダウンするとサイト自体にアクセスできなくなってしまうので、CDN障害時にオリジンサーバーへ自動的に切り替える、などの代替手段を用意しておいたほうがよいでしょう。また、CDNを選ぶときに、ダウンする恐れがどれくらいあるのかの指標であるサービス品質保証、いわゆるSLAを確認したほうがよいです。
加藤
たとえばAWSのCloudFrontというCDNサービスだと99.9％のSLAを目指しますと記載がありました。一方NetlifyではプランによってSLAの有無が異なっていて、エンタープライズプランのみで99.99%のSLAの保証と書かれています。
古川
このあたりはコストとの兼ね合いですね。CDNは無料で使えるものがありますが、少しでも止まると大損害になってしまうというサービスであれば、コストをかけてでも高いSLAを担保しているサービスを選ぶといいと思います。
加藤
はい。Jamstackの技術選定を行う上で、気をつけなければいけないポイントがだいぶ見えてきた気がします。少し話がずれてしまうのですが、ある程度スキルのある開発者はすでにJamstackが実現できるというのは肌感覚で理解していると思うのですが、国内であんまり事例が増えないのはどういう背景があるんでしょうか。
古川
いろいろ要因はあると思いますが、ひとつにアメリカと日本でWebサイトを運営する組織形態が違うということが挙げられるかなと思います。 2021年版のIPA人材白書によれば、日本のIT人材の所属先は、7割くらいがIT企業、3割くらいがユーザー企業であるのに対し、アメリカではその真逆の傾向だというデータがあります。つまり、日本の多くの企業では、ITシステムの開発や運用を外部委託する傾向にあるみたいです。
加藤
プロダクトを内製している企業のほうがJamstackアーキテクチャを採用しやすいってことですか？
古川
まあそうですね。内製がいいとかそういう話ではもちろんないんですが外部委託によって、事業変化への対応スピードが遅くなりがちなのが、近年課題視されているっていう実情もあります。企業が今後どのように成長し、そのためにWebサイト運営はどう関わっていくのか、それを実現するための組織形態はどうあるべきか？を考えて、Jamstackを採用するか判断するのがいいのかもしれません。
加藤
なるほど。では私たちのような制作会社が、制作会社としてどうJamstackに向き合っていくかというところは考えていかないといけないですね。
はい、ここまでJamstackの技術構成を中心にざっくりお話してきました。
古川
さきほどの海外動向の話に関連してなんですが、Netlifyが行ったJamstack Survey 2021によると、Jamstackコミュニティ人口における学生の割合が急激に増えている傾向にあるみたいです。WebサイトをJamstackアーキテクチャ前提で学習しているんじゃないかと分析されてるみたいで、もしかしたら将来的にはJamstackアーキテクチャが当たり前になってくみたいな波が海外では来てるのかもしれません。
加藤
そうなんですね…となるとやっぱり、日本で今後Jamstackがトレンドになるのか、ならないのかが気になりますね。順当に行けば12月に政府統一Webサイトの評価版が完成するはずなので、運用体制含め、政府がJamstackアーキテクチャなWebサイトをどう運営してくのか、ひとつのユースケースとしてかなり注目ですね。
古川
今後も動向について積極的にキャッチアップしていきたいと思います！
加藤
はい、最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
また、このPodcastはApple Podcast、Google Podcast、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。 ご意見、ご感想などありましたら 「#ミツエーテックラジオ」で呟いていただけると嬉しいです！それでは今日はこの辺で！ありがとうございました！
古川
ありがとうございました！