
2025.02.12
職員一人あたり52時間の残業削減に成功 kintone導入がもたらした富士吉田市の自治体DX“変革”ハウツー
リンクをコピー
記事をブックマーク
中村享介氏:今日は「Jamstackで失敗した3つのこと」というタイトルでお話しします。まず簡単に自己紹介します。中村享介と言います。ふだんは、株式会社ピクセルグリッドという会社で代表をしています。ここ3年ぐらいJamstackばかりやっているので、最近はJamstackエンジニアと名乗っています。
株式会社ピクセルグリッドは、フロントエンド専門の開発の会社です。お客さんの開発をお手伝いしています。Jamstackの会社ということで、最近はいろいろなサービスを利用したアプリ全体の設計のようなこともやっています。
また、「CodeGrid」という自社メディアをやっていて、フロントエンドに関する情報や、Jamstackに関する情報などの発信もしています。今日はこのリニューアルの話をしようと思っています。
今日話すことですが、まずJamstackを知らない人もいると思うので、「Jamstackとは?」というお話をします。そのあとにCodeGridをJamstackにしてどうだったかについても、しばらく運用しているので、お話ししたいと思っています。最後に、その中で「今思うとちょっと失敗したかな」ということがあるので、それを3つほど紹介しようと思っています。
まずは、「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のメリットについてお話しします。まず、静的なので非常に高速です。サーバーにアクセスしていろいろなプログラム走らせたり、データベースにアクセスしたりせず、でき上がったHTMLを返すだけなので、とても早くできます。
それからCDNで配信できるので、世界のどこからでもそれなりに速い速度で返せるのも強みです。「Yahoo!ニュース」に載ってアクセスが急増したような場合でも、ほぼCDNで返すだけなので、おおよその対応ができるのも強い点です。
セキュリティも優秀です。静的なのでユーザー入力の影響を受けにくいです。SQLインジェクションしようと思っても、データベースにアクセスしていないので、かなり無敵です。
加えてAPIに関しては、JSONを返すように作るので、きちんとセキュリティも考えてやらなければいけませんが、静的な部分に関してはかなり強くなります。
このイベントは「PWA Night」なので「PWAと関係あるの?」という点で話すと、あまり関係はありません。ただ、インストールをするように高速なWebを作る方法なので、PWAはWebを作る際に採用できる手法といえます。Jamstackは、単に高速なWebを作る方法だと思っていいと思います。
(次回に続く)
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
PR | 2025.02.07
プロジェクトマネージャーは「無理ゲーを攻略するプレイヤー」 仕事を任せられない管理職のためのマネジメントの秘訣
2025.02.06
落合陽一氏や松尾豊氏の研究は社会に届いているか? ひろゆき氏が語るアカデミアの課題と展望
2025.02.05
「納得しないと動けない部下」を変える3つのステップとは マネージャーの悩みを解消する会話のテクニック
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.10
A4用紙を持ち歩いて殴り書きでアウトプット コクヨのワークスタイルコンサルタントが語る、2種類のメモ術
2025.02.05
エンジニアとして成功するための秘訣とは? ひろゆき氏が語る、自由な働き方を叶えるアプリ開発とキャリア戦略
2025.02.04
日本企業にありがちな「生産性の低さ」の原因 メーカーの「ちょっとした改善」で勝負が決まる仕組みの落とし穴
2025.02.03
「昔は富豪的プログラミングなんてできなかった」 21歳で「2ちゃんねる」を生んだひろゆき氏が語る開発の裏側
PR | 2025.02.04
能登半島地震で自宅は全壊、「これでどうやってDXするねん」 被災したサイボウズ社員と支援者らが語る災害支援のノウハウ
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
PR | 2025.02.07
プロジェクトマネージャーは「無理ゲーを攻略するプレイヤー」 仕事を任せられない管理職のためのマネジメントの秘訣
2025.02.06
落合陽一氏や松尾豊氏の研究は社会に届いているか? ひろゆき氏が語るアカデミアの課題と展望
2025.02.05
「納得しないと動けない部下」を変える3つのステップとは マネージャーの悩みを解消する会話のテクニック
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.10
A4用紙を持ち歩いて殴り書きでアウトプット コクヨのワークスタイルコンサルタントが語る、2種類のメモ術
2025.02.05
エンジニアとして成功するための秘訣とは? ひろゆき氏が語る、自由な働き方を叶えるアプリ開発とキャリア戦略
2025.02.04
日本企業にありがちな「生産性の低さ」の原因 メーカーの「ちょっとした改善」で勝負が決まる仕組みの落とし穴
2025.02.03
「昔は富豪的プログラミングなんてできなかった」 21歳で「2ちゃんねる」を生んだひろゆき氏が語る開発の裏側
PR | 2025.02.04
能登半島地震で自宅は全壊、「これでどうやってDXするねん」 被災したサイボウズ社員と支援者らが語る災害支援のノウハウ
新人の報連相スキルはマネージメントで引きあげろ!~管理職の「他責思考」を排除~
2025.01.29 - 2025.01.29
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
【著者来館】『成果を上げるプレイングマネジャーは「これ」をやらない』出版記念イベント!
2025.01.10 - 2025.01.10
片付けパパ対談【特別編】 整理術×行動術×メモ術で、仕事も人生も自在にデザイン!
2024.12.16 - 2024.12.16