
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.13
“最近の新人は報連相をしない”という、管理職の他責思考 部下に対する「NG指示」から見る、認識のズレを防ぐコツ
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
2025.02.13
AIを使いこなせない人が直面する本当の課題 元マッキンゼー・赤羽雄二氏が“英語の情報”を追い続ける理由
2025.02.12
マネージャーは「プレイング3割」が適切 チームの業績を上げるためのマネジメントと業務の比率
2025.02.12
何度言っても変わらない人への指示のポイント 相手が主体的に動き出す“お願い”の仕方
2025.02.13
「みんなで決めたから」を言い訳にして仲良しクラブで終わる組織 インパクトも多様性も両立させるソース原理
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.10
32歳で「すかいらーく」を創業、75歳で「高倉町珈琲」で再起業 「失敗したからすかいらーくができた」横川竟氏流の経営哲学
2025.02.14
報連相ができない部下に対するコミュニケーションの取り方 「部下が悪い」で終わらせない、管理職のスキル向上のポイント
2025.02.10
A4用紙を持ち歩いて殴り書きでアウトプット コクヨのワークスタイルコンサルタントが語る、2種類のメモ術
着想から2か月でローンチ!爆速で新規事業を立ち上げる方法
2025.01.21 - 2025.01.21
新人の報連相スキルはマネージメントで引きあげろ!~管理職の「他責思考」を排除~
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