JAMstack

高速で、スケールも容易なモダンアーキテクチャ
JAMstackについて、ご紹介します。

JAMstackとは

高速で、セキュアなWebサイトやダイナミックなWebアプリケーションを作る、モダンなアーキテクチャです。クライアント側のJavaScriptと、API、事前に生成されたMarkupで構成されます。

作成されたWebアプリケーションは、Webサーバーを使わずにCDNで配信でき、大量のアクセスにも強く、配信コストも抑えられるのが特徴です。

JAMstackの構造図

JAMstackで解決できる問題

作成したWebアプリケーションが次のような問題を抱えているなら、JAMstackで開発することで解決できます。

  • レスポンス速度が遅い
  • SPAで作ったがパフォーマンスが悪い
  • SPAの初期表示が遅い
  • 端末負荷・発熱・バッテリー消費が大きい
  • CMSのセキュリティ対応が大変
  • サーバーコストが高い
  • サーバー運用トラブルが多い

JAMstackが向いていないコンテンツ

事前にHTMLを生成するというアプローチが基本になります。そのため、例えば、GmailやGoogleカレンダーのような、多くのユーザーがいて、ユーザーごとに1人1人違う情報を表示したり、認証が必要なコンテンツが中心の場合は事前にHTML生成するのは難しくなります。

またコンテンツの読み出しより、書き込みが中心となるWebアプリの場合も、ビルドの負荷が多くなり、あまり向いているとは言えません。

とはいえ、情報を整理していくと、同じWebアプリケーションの中でも、認証は必要だがユーザーごとに変更する必要がないコンテンツや、一度書き込めばあまり更新されないコンテンツがあるものです。

そういった部分だけ事前にビルドし、そのほかはAPI経由にすることでJAMstack構成と同等のメリットが得られます。

ピクセルグリッドの強み

JAMstackでは、事前にビルドするための静的サイトジェネレーターの知識や、ダイナミックな処理におけるAPI連携の高度な知識が必要です。

その点、SPAが一般的になる前から取り組み、ナレッジを蓄積してきたピクセルグリッドでは小規模から大規模までビルドに関する知識と、API連携のノウハウがあります。

また、フロントエンド専門で開発を行ってきたため、サーバー側を実装せずに各種サービスを組み合わせて、Webアプリケーションの機能を実現してきた経験も強みの1つです。

扱えるサービス例

  • Algolia
  • Auth0
  • CircleCI
  • Netlify
  • GraphCMS
  • Firebase

そのほかにも多数対応できるサービスがあります。要件に合わせて提案いたします。

JAMstackでの実績

CodeGrid

自社で運営するフロントエンド 技術情報のメディア「CodeGrid」はJAMstackで作成されています。(2019年10月中旬リニューアル公開予定)

  • 事前に生成されたページ数 約4000ページ
  • Auth0による認証
  • Netlifyでのホスティング
  • Eleventy
  • GraphCMSによるコンテンツ管理
  • Algoliaによる記事検索
  • Netlify functionによる独自API

お問い合わせ