高速なウェブのためのモダンアーキテクチャ JAMstack CSS Nite LP64

株式会社ピクセルグリッド 中村 享介さんのJAMstackのセッション。

今までのアーキテクチャ

昔は手書きでHTMLを作成していたが、ページ量産に向かないので、サーバー側プログラミングに移行してきましたが、アクセス増でサーバーが遅延しがち。

最近は、シングルページアプリケーションという、HTML側とAPIサーバーを利用する形を取っていましたが、JavaScriptの肥大化が問題。

モバイル端末だとバッテリーがどんどん減ってしまうようです。API側が遅いケースも多く、フロントの速さが活かせない、開発の遅延などの問題もあるようです。

JAMstackとは

JAMはJavascript、API、事前に生成されたMarkupを利用して高速で安全なサイトやアプリケーションを作る技術。

ブラウザのJavaScriptのみ利用

サーバー側のプログラムの利用は禁止されています。

再生可能なAPI

サーバーにアクセスするのもはAPIにまとめる

あらかじめ生成するMarkup

HTMLは先にビルドツールに投げてCDNに置いておく。

データを埋め込んだHTMLを予め生成しておくのが一番大きな特徴です。

静的ファイルを生成している状態なので、シンプルで高速になります。

また、静的ファイルはCDNで配信可能なので、サーバーなしで配信が可能。
急なアクセスにも強く、CDNは安く運用ができるようです。

動的な機能はJavaScriptとAPIでやりとりします。

事例

自社で運用しているCodeGridというサイト。7年運用し、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でも問題ありません。

コーダーには向いているので、チャレンジしてみても良いのではないでしょうか。

お問い合せはこちらから
無料メルマガ登録

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA