2024.12.24
ビジネスが急速に変化する現代は「OODAサイクル」と親和性が高い 流通卸売業界を取り巻く5つの課題と打開策
リンクをコピー
記事をブックマーク
中村享介氏:今日は「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.01.16
社内プレゼンは時間のムダ パワポ資料のプロが重視する、「ペライチ資料」で意見を通すこと
2025.01.20
組織で評価されない「自分でやったほうが早い病」の人 マネジメント層に求められる「部下を動かす力」の鍛え方
2025.01.21
言われたことしかやらないタイプの6つの言動 メンバーが自主的に動き出すリーダーのマインドセット
2025.01.15
若手がごろごろ辞める会社で「給料を5万円アップ」するも効果なし… 従業員のモチベーションを上げるために必要なことは何か
2025.01.14
目標がなく悩む若手、育成を放棄する管理職… 社員をやる気にさせる「等級制度」を作るための第一歩
2025.01.21
今までの1on1は「上司のための時間」になりがちだった “ただの面談”で終わらせない、部下との対話を深めるポイント
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.01.14
コンサルが「理由は3つあります」と前置きする理由 マッキンゼー流、プレゼンの質を向上させる具体的Tips
2025.01.22
部下に言いづらいことを伝える時のリーダーの心得 お願いを快く引き受けてもらう秘訣
2025.01.09
マッキンゼーのマネージャーが「資料を作る前」に準備する すべてのアウトプットを支える論理的なフレームワーク
コミュニケーション能力の高い人が“無自覚”にやっている話し方 5選
2022.08.07 - 2022.08.07
チームの生産性を上げるマネジメント術
2024.12.11 - 2024.12.11
特別対談「伝える×伝える」 ~1on1で伝えること、伝わること~
2024.12.16 - 2024.12.16
安野たかひろ氏・AIプロジェクト「デジタル民主主義2030」立ち上げ会見
2025.01.16 - 2025.01.16
国際コーチング連盟認定のプロフェッショナルコーチ”あべき光司”先生新刊『リーダーのためのコーチングがイチからわかる本』発売記念【オンラインイベント】
2024.12.09 - 2024.12.09