高速なWebサイトやアプリが作れる「Jamstack」　基本原則は「事前生成」と「分離」

自己紹介とセッションの内容

中村享介氏：今日は「Jamstackで失敗した3つのこと」というタイトルでお話しします。まず簡単に自己紹介します。中村享介と言います。ふだんは、株式会社ピクセルグリッドという会社で代表をしています。ここ3年ぐらいJamstackばかりやっているので、最近はJamstackエンジニアと名乗っています。

株式会社ピクセルグリッドは、フロントエンド専門の開発の会社です。お客さんの開発をお手伝いしています。Jamstackの会社ということで、最近はいろいろなサービスを利用したアプリ全体の設計のようなこともやっています。

また、「CodeGrid」という自社メディアをやっていて、フロントエンドに関する情報や、Jamstackに関する情報などの発信もしています。今日はこのリニューアルの話をしようと思っています。

今日話すことですが、まずJamstackを知らない人もいると思うので、「Jamstackとは？」というお話をします。そのあとにCodeGridをJamstackにしてどうだったかについても、しばらく運用しているので、お話ししたいと思っています。最後に、その中で「今思うとちょっと失敗したかな」ということがあるので、それを3つほど紹介しようと思っています。

Jamstackとは何か

まずは、「Jamstackとは？」という話です。Jamstackの公式サイトがあるので、これを見ていきます。（スライドを示し）このようなトップページになっていて、メインのコピーをざっくり訳すと、「高速な『Webサイトやアプリ』を作るモダンな方法」と書いてあります。

これだけで速いサイトが作れることはわかると思いますが、わかりにくいので、もう少し「Jamstackとは何か？」というページを見ていきます。

そうすると、本文の中にJamstackの基本原則は「pre-renderingとdecouplingである」と書かれています。これをもとに話していこうと思います。

PWAにも「prerender」というものが出てきましたが、Jamstackのpre-renderingはそれとは別で、もっと単純なものです。何かというと、サーバーでHTMLを作らず、ビルドで静的HTMLを作ることです。

サーバーでHTMLを作らないというのはどういうことかというと、（スライドを指して）WordPressやPHPやRailsなど、サーバーサイドのプログラミングを使って実行するとこんな感じになりますが、そういうことをしないで、先にHTMLを生成しておくものです。

Jamstackの全体はこんな感じです。順番に説明すると、PWAを作る時でもSPA（Single Page Application）にすることはけっこうあると思いますが、SPAで必ずやるビルドのプロセスで、静的サイトを事前に生成します。

その際に使うのが、「静的サイトジェネレーター（Static Site Generator：SSG）」です。これはビルドでHTMLを作るツールです。いくつか例を挙げます。まずGatsbyですが、これはReactとGraphQLベースで高速なサイトを生成するものです。

ほかにも11tyという、もう少しシンプルなHTMLを生成するだけのツールもあって、公式サイトも11tyで作られています。あとはNext.jsやNuxtJSなどです。これらは、サーバーサイドレンダリングのツールですが、最近は静的なHTMLを吐き出す仕組みがあり、それをJamstackに使えます。

また、最近公開されたAstroというものがあります。これはJavaScriptのバンドル量を大幅に減らそうというおもしろいコンセプトのSSGで、ReactやVue、Svelteなどのコンポーネントを埋め込める、よさそうなツールになっているので、一応紹介しました。まだアーリーベーターで、触った感じだとバグもけっこうあるので、すぐには使えないと思いますが、期待しているプロジェクトです。

これらのSSGのどれかを選んで静的HTMLをビルドするというのが、Jamstackのビルドの部分です。

そこでビルドした静的なHTML、静的サイトはCDN（Content Delivery Network）で配信できます。

その時に使うのが、静的サイトホスティングサービスです。基本的にはGitリポジトリと連携すると、自動的に更新された時にビルドしてくれて、そのままCDNで公開してくれます。

こういったものが、今はけっこういっぱいあります。昔からあるものでJamstackとして有名なのは、Netlifyですね。ほかにはNext.jsの開発元が提供しているVercelや、AWSのAmplify Consoleもあります。

また、CDN大手のCloudflareも最近Pagesというサービスを提供しています。GatsbyのGatsby Cloudや、Jamstack用を名乗っているLayer0というサービスも出ています。

こういったものを使って、静的サイトホスティングで配信します。これによってCDNでの配信が簡単にできます。

次に、もう1点原則で出てきた、decouplingのほうです。分離ということですが、動的コンテンツはJavaScriptとAPIに分離することになっています。

静的サイトはできないことがいろいろあります。例えばユーザー認証や、弊社のメディアサイトでいうと、お気に入りデータのようなユーザーごとのデータを保存することなどです。

あとは検索です。ユーザーはなにを検索するかわからないので、全部を生成しておくことは絶対にできません。そのため、こういったものはAPIに分けて、JavaScriptで処理することになります。静的なHTMLでできないことは、JavaScriptとAPIで対応します。

「静的だと、CMSによるコンテンツ管理とかができないんじゃない？」と疑問に思うかもしれないですが、その際に使うのがヘッドレスCMSです。ヘッドレスCMSは、コンテンツの管理画面でWordPressの管理画面のようなものと、それにデータを入れるとできるAPIで構成されています。

いくつか例を挙げると、「Contentful」はけっこう有名かと思います。CodeGridで採用しているのは、「GraphCMS」という、GraphQLベースのAPIが簡単に作れるCMSです。ほかにWordPressのようなコンテンツをいろいろといじれるものでいうと、「Prismic」や「microCMS」などを使うのがいいのではないかと思います。

このヘッドレスCMSは、pre-renderingでも、decouplingでも使えます。まずpre-renderingの段階でヘッドレスCMSのデータをビルドすると、事前にレンダリングしたり、HTMLにヘッドレスCMSのデータを埋め込めます。

次に、ヘッドレスCMSのコンテンツを検索したい場合は、ヘッドレスCMSのコンテンツのAPIをJavaScriptから直接叩くことで検索を実現できます。

もう一度繰り返すと、Jamstackの基本原則はpre-renderingとdecouplingです。具体的には、サーバーではなくビルドで静的HTMLを作ってCDNで配信し、動的コンテンツはJavaScriptとAPIで対応するやり方です。

Jamstackのメリット

次にJamstackのメリットについてお話しします。まず、静的なので非常に高速です。サーバーにアクセスしていろいろなプログラム走らせたり、データベースにアクセスしたりせず、でき上がったHTMLを返すだけなので、とても早くできます。

それからCDNで配信できるので、世界のどこからでもそれなりに速い速度で返せるのも強みです。「Yahoo!ニュース」に載ってアクセスが急増したような場合でも、ほぼCDNで返すだけなので、おおよその対応ができるのも強い点です。

セキュリティも優秀です。静的なのでユーザー入力の影響を受けにくいです。SQLインジェクションしようと思っても、データベースにアクセスしていないので、かなり無敵です。

加えてAPIに関しては、JSONを返すように作るので、きちんとセキュリティも考えてやらなければいけませんが、静的な部分に関してはかなり強くなります。

このイベントは「PWA Night」なので「PWAと関係あるの？」という点で話すと、あまり関係はありません。ただ、インストールをするように高速なWebを作る方法なので、PWAはWebを作る際に採用できる手法といえます。Jamstackは、単に高速なWebを作る方法だと思っていいと思います。

（次回に続く）