JAMstackとは

JAMstack

JAMstackの良さ

1. 高パフォーマンス
   • 事前ビルドしてCDN経由で配信すれば超高速
   • UXの向上
2. 高セキュリティ
   • 全ての通信がAPIを介する
   • サーバ処理がマイクロサービスAPIとして抽象化されていて、攻撃対象域を減らせる
3. 開発しやすくなる
   • コンテンツとマーケティングのそれぞれで個別にスタックを用意しなくていい
   • フロントエンドとバックエンドを分けられる
   • 開発とデバッグにフォーカスできる
   • Gitでの管理と必要な依存関係のインストールが簡単にできるため、複数人開発や開発環境がシンプルになる
   • 最新のビルドツールを導入でき、開発期間とムーブメントとで生じるニーズのズレを減らせる
4. コストを減らせ、生産性も上がる
   • デザインやSSGなどの変更が今までのコンテンツ資産をたもったまますぐできる
   • 制作や管理、リソース
   • 低コストのスケーリング。CDNによる配信スケーリング。瞬間的高負荷の処理。トラフィック削減

ビルド: 開発用のコードファイルをWebブラウザが扱えるファイルに変換するプロセス

CDN: サーバの分散ネットワーク。エンドユーザーに近いエッジサーバにキャッシュされたコンテンツを格納して、それぞれのユーザーに各地のエッジサーバから直接配信するコンテンツ配信ネットワーク。配信元オリジンサーバのトラフィック削減になる

API: アプリなどの一部を外部に公開することで、第三者が開発したアプリと機能を共有できるようにしてくれるもの

UX: ユーザーエクスペリエンス。ユーザーのアクションを即座に反映して、操作から目的地までのタイムラグを限りなくゼロにすることでユーザー体験は向上する。ブランド評価にもつながる

Git: データの変更履歴を記録・追跡するシステム。各ユーザーのPCディレクトリに全履歴含めリポジトリの複製を作り、各地のユーザーで同じプロジェクトの作業ができる。分散型バージョン管理システム。アプリ開発や執筆やビジュアルデザインなどで有用に使える

スケーリング: 最高負荷の日に合わせサーバやネットワークを用意すると低負荷の日でも最高負荷用の過剰性能分のコストがかかる。最高負荷の日はCDNにより展開すると負荷を肩代わりしてもらえ、自社サーバのサービスが安定提供できる

SSG: スタティックサイトジェネレータ/ 静的サイトジェネレーター。WebサイトのHTMLファイルを生成するツールのこと。コンパイル時にGraphQLやAPIなどからすべてのデータを取得し全てのHTMLを最初に生成する。生成されたファイルをNetlifyなどのホスティングサービスを用いてサーバレスで公開する仕組みが主流

効果的な使い方や状況

• コーポレートサイト
• オウンドメディア
• LP
• サポート/Q&A/Helpページ
• EC
• SEO対策を重視したい場合
• 開発ではない担当者が直接コンテンツを追加できるようにしたい場合
• 動的なWebアプリ内の静的な一部分のみで使う場合

オウンドメディア: 自社で運営・記事を書いて情報発信するメディア。SNSや広告媒体と組み合わせる。長期的なブランディング

LP: ランディングページ。ひとつの商品・ブランドの強みや情報をワンページにまとめたサイト。対象の商品・ブランドに関係のない情報は一切書かない。集客に特化したWebページ

SEO: サーチエンジンにて上位に優先して表示されるための対策。マークアップやメタ情報や表示速度などが関わる

JAMstackの条件

• Webサーバへの依存がないサーバレス
• 事前にビルドされた静的なファイルからJavaScript経由でAPIを呼び出している
• 静的なファイルをCDN経由で配信している

JAMstackのJAM

1. JavaScript: クライアント上で実行
2. API: サーバサイドの処理はAPIとして抽象化されている
3. Markup: 動的生成ではなく事前にビルドされている

※JAMすべてを含んでなくてもいい

※手動ビルドかSSGかはどちらでもいい

JAMstackではないもの

• WordPressなどサーバサイドCMS
• サーバサイド言語で作られたWebアプリ
• SPAで最初にSSRしてるWebアプリ

CMS: コンテンツマネジメントシステム。Webプログラミング言語など専門知識がない担当者でもWebサイトのコンテンツを更新管理できるようにしたシステム。入稿ソースとWebページの最終的な見た目ビューを確認しながら編集できる

SPA: シングルページアプリケーション。単一のページで構成する設計構造のWebアプリ。クライアント側のブラウザでJavaScriptを実行してサーバ側から必要なデータを持ってきて、HTMLページを生成する

SSR: サーバサイドレンダリング。SPAでクライアント側のブラウザで実行されていたJavaScriptの実行とHTMLページの生成をサーバ側でおこなう仕組み

JAMstackに適さないもの

• ユーザー毎にコンテンツが異なる動的なWebアプリ

このPortfolio.JAMstackの構成

コンテンツを投稿

FORESTRY

GitベースのHeadless CMS。GitHubと連携、全ての作業はGitのワークフローとして残るのでバージョン管理できる。

Headless CMS: ヘッドレスコンテンツマネジメントシステム。CMSからWebページの最終的な見た目ビュー機能をなくしたもの。入稿ソースとビューが一体化されていないので特定CMSサービスの汎用能力に依存せず、コンテンツ情報のみをAPIで流通できる。入稿ソース編集システムも最終的な見た目ビューシステムも自分で作れ開発の自由度があがる。Webページ表示速度のパフォーマンスも向上する

サイトを配信

Vercel

自動デプロイ・ホスティング環境を構築できる。開発の助けになる機能がたくさんあるフロントエンド向けのオールインワンPaaS。日本向けのCDNサーバは東京にある。

PaaS: プラットフォーム・アズ・ア・サービス。Webアプリを稼働させるためのプラットフォーム一式を提供するサービス形態

UX/UI Design

Gridsome

Vue.jsで作られたフレームワーク。全てのデータソースへのアクセスをGraphQLで一元管理できる。JAMstack。SEO最適化。快適な開発環境。

Tailwind CSS

ユーティリティファーストなCSSフレームワーク。ソースファイルの記述量が減ったり、デザインシステムを簡単に構築できたり、メンテナンスコストの削減にもつながる。

コンテンツ公開までのフロー

1. FORESTRYにコンテンツを追加する #手動
2. FORESTRYはGitHubリポジトリに更新内容をPUSHする #自動
3. VercelがWebhookによりGitHubリポジトリ更新を検知、Gridsomeを呼び出しビルド。静的ファイルを生成する #自動
4. Vercelは作成した静的ファイルをホスティングサーバにDeploy #自動
5. CDN経由でユーザーに配信され、サイト内でコンテンツが公開状態になる #自動

リポジトリ: プロジェクトのソースコードや関連ドキュメントやファイルを一元管理するため格納している場所

PUSH: ローカルで作業したローカルリポジトリをリモートリポジトリにアップロードして反映させること

Webhook: アプリの更新情報を他アプリへリアルタイムに提供する仕組み

Deploy: 作成物を本番環境などに置き、使える状態に設定すること

技術選定

• SSG
  • Gridsome
• HTML
  • Pug
• CSS
  • Tailwind CSS
  • SCSS (Sass)
  • PurgeCSS
• JavaScript
  • Vue.js
  • Chart.js
• Backend (Data Source)
  • GraphQL
  • Frontmatter (YAML, Markdown)
• Design
  • Google Fonts
  • Font Awesome
  • SVG
• Headless CMS
  • FORESTRY
• CI/CD
  • Vercel
• Hosting
  • Vercel
• Git
  • GitHub
• Community
  • Gitter

開発環境

• Node.js
  • nvm
  • yarn
• Terminal
  • VS Code
  • WebStorm
  • Hyper
• Code Edit
  • VS Code
  • WebStorm
  • Brave developer tools
  • Altair
  • REPL
• Version Control
  • VS Code
  • WebStorm
  • Gitkraken
• Design
  • Studio
• Project Management
  • ClickUp
  • Linear
  • Notion