高速なウェブのためのモダンアーキテクチャ 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でも問題ありません。

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

この記事を書いた人

2001年からウェブ業界に携わり、2002年に独立。2006年法人化。
ウェブデザインやコーディング、CMSなどの制作業務から、ウェブ解析、ウェブサイト構築・運用のコンサルテーション、広告運用代行など、ウェブに関する多様な要望に幅広く対応。
また、制作や集客だけではなく、運用・保守など全ての業務を俯瞰した視点での改善提案やアドバイザリーを行っています。

CSS NiteやWordCamp、BAU-YAなどのセミナーやイベントにも、多数登壇。企業研修やマンツーマンレッスン、ブログやSNS、YouTubeでの情報発信など、「ウェブを育てる」知識の教育活動にも意欲的に参加しています。

コメント

コメントする

CAPTCHA