Jamstackとは?

ピクセルグリッドがオススメするJamstackについて解説します。

Jamstack

事前にデータを埋め込んだ静的なHTMLをベースに、JavaScriptを使いAPIを通じて動的なコンテンツを扱うWebアプリ・WebサイトのアーキテクチャをJamstackといいます。

静的なHTMLとJavaScriptをベースにすることで、CDNで配信でき、Webサーバーの管理や運用をなくせます。 大量のアクセスに強く、高速に配信でき、セキュリティ面とコスト面でも有利な構成です。

Jamstackの解説

Jamstackの定義

次のような特徴を持つWebアプリ、WebサイトがJamstackです。

  • CDN/ADNで配信できる静的なHTMLがベース
  • 動的なコンテンツはJavaScriptにより、APIを通じて取得し表示
  • フロントエンドとサーバーサイドは完全分離

Jamstackではない構成

Jamstackを理解するためにはJamstackではない構成の例を知っておくと良いかもしれません。
具体的には、次のようにサーバーサイドでHTMLが作られるWebサイト、WebアプリはJamstackではありません。

  • WordPressなどのサーバーサイドで動くCMSにより管理・公開されているWebサイト
  • PHP、JSPなどによりサーバーサイドでHTMLが作られ、公開されるWebサイト
  • Ruby on RailsによりサーバーサイドでHTMLが作られるWebアプリ
  • SSR(サーバーサイドレンダリング)されるSPA(シングルページアプリケーション)

ピクセルグリッドの開発実績

CodeGrid

自社で運営するフロントエンド 技術情報のメディア「CodeGrid」はJamstackで作成されています。

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

CodeGridで採用されているサービス、ライブラリ

  • Netlify
  • GitHub
  • CircleCI
  • GraphCMS
  • Auth0
  • Algolia
  • Eleventy
  • Preact

SARF CMS

エイベックス・エンタテインメント株式会社が提供する音声AR体験"SARF"。そのコンテンツを管理する"SARF CMS"の情報設計、画面UI設計、画面デザインとフロントエンド開発を担当。Amazon Cognitoの認証に対応したSPAをNuxt.jsで実装した。また、Netlifyを利用したプレビュー環境を構築し、開発時のスムーズな状況共有とコミュニケーションを実現した。

SARF CMSで採用されているサービス、ライブラリ

  • Netlify
  • GitHub
  • Nuxt.js
  • Amazon Cognito

Jamstackで解決したいプロジェクトがあれば、
技術選定の前に気軽にご相談ください。

お問い合わせ