株式会社ピクセルグリッド 中村 享介さんのJAMstackのセッション。
今までのアーキテクチャ
昔は手書きでHTMLを作成していたが、ページ量産に向かないので、サーバー側プログラミングに移行してきましたが、アクセス増でサーバーが遅延しがち。
最近は、シングルページアプリケーションという、HTML側とAPIサーバーを利用する形を取っていましたが、JavaScriptの肥大化が問題。
モバイル端末だとバッテリーがどんどん減ってしまうようです。API側が遅いケースも多く、フロントの速さが活かせない、開発の遅延などの問題もあるようです。
JAMstackとは
JAMはJavascript、API、事前に生成されたMarkupを利用して高速で安全なサイトやアプリケーションを作る技術。
ブラウザのJavaScriptのみ利用
サーバー側のプログラムの利用は禁止されています。
再生可能なAPI
サーバーにアクセスするのもはAPIにまとめる
あらかじめ生成するMarkup
HTMLは先にビルドツールに投げてCDNに置いておく。
データを埋め込んだHTMLを予め生成しておくのが一番大きな特徴です。
静的ファイルを生成している状態なので、シンプルで高速になります。
また、静的ファイルはCDNで配信可能なので、サーバーなしで配信が可能。
急なアクセスにも強く、CDNは安く運用ができるようです。
動的な機能はJavaScriptとAPIでやりとりします。
事例
自社で運用しているCodeGridというサイト。７年運用し、1300を超える記事のあるサイトでのJAMstack運用事例です。
netlify
静的ファイルのホスティングサービス。GitHubと連携でビルド、公開が可能。ブランチごとにプレビューもできるようです。
11ty
静的サイトジェネレーター。JavaScriptフレームワークを強制しないのが特徴。複数のテンプレートをサポートしています。
WordPressのようなテンプレートの書き方になるようです。
GraphCMS
headlessCMSと言われるもの。GraphQLのAPI。Markdown、Jsonで書けるようです。
API
APIとして使っているサービスは、Auth0で認証・認可、algoliaで記事検索を利用。
ユーザーごとのお気に入りなどは、Netlify funcitonsに作って置いてるそうです。
ビルドの時間は、動画でデモが見られましたが、3588ファイルで45秒前後。
キャッシュしたものなどもあれば、20秒程度でビルド可能らしいです。
まとめ
JAMstackにしないといけない、というよりは問題がなければSPAでもCMSでも問題ありません。
コーダーには向いているので、チャレンジしてみても良いのではないでしょうか。
コメント