月刊『致知』をWebで読めるサービス「致知電子版」の設計と開発を担当。 Jamstack構成により、素早くユーザーにコンテンツを届けられるメディアサイトを、ランニングコストを抑えて実現しました。
メディアサイト
- Svelte
- Prismic
- AWS Amplifyホスティング
- Amazon Cognito
- GitHub
- Eleventy
- Tailwind CSS
- Stripe
Jamstackは、「プリレンダリング(pre-rendering)」と「分離(decoupling)」という2つの原則に基づいたWebアーキテクチャです。
これにより、Webの高速化、セキュリティ向上、スケーラビリティの確保を同時に実現できます。
プリレンダリングとは、Webページをユーザーのアクセス時に動的に生成するのではなく、あらかじめ静的なHTMLやアセットとしてビルドしておく手法です。
生成されたページは、Git連携型ホスティングやCDN(コンテンツ配信ネットワーク)から直接配信されるため、次のようなメリットがあります。
分離とは、フロントエンドとバックエンドの機能を明確に切り分け、それぞれを独立したサービスとして扱う考え方です。
たとえば、認証、決済、コンテンツ管理、検索などの機能は、それぞれ専門の外部サービス(例:Auth0、Stripe、MicroCMS、Algoliaなど)をAPI経由で利用します。
このように、機能単位でサービスを活用することには、次のような利点があります。
Jamstackは、「静的なだけ」の仕組みではありません。事前レンダリングによる高速な配信と、分離による柔軟な機能構成を両立することで、より複雑でリッチなWeb体験を実現できる、モダンなWebアーキテクチャです。
Webのパフォーマンスや信頼性、開発体験を重視するプロジェクトにおいて、Jamstackは強力な選択肢となります。
Jamstackを理解するためには、Jamstackではない構成の例を知っておくと良いかもしれません。
具体的には、次のようにサーバーサイドでHTMLが作られるWebサイト、WebアプリはJamstackではありません。
Webサーバーを使わず、ホスティングサービスによって配信できるメリットをこれまでのWebとの比較しながら解説します。
Jamstackの特徴である、Webフレームワークや静的サイトジェネレーター(SSG)を利用して事前にデータを埋め込んだ静的HTMLをつくるメリットを詳しく説明します。
静的なHTMLだからといって、高度なUIや動的なデータを扱えないわけではありません。ピクセルグリッドの得意とするJavaScriptとSPAの技術を利用したWebアプリについて解説します。
Jamstackで従来のCMSのように管理画面からコンテンツを更新できるようにするにはヘッドレスCMSを使います。現在はさまざまなヘッドレスCMSが提供されています。
月刊『致知』をWebで読めるサービス「致知電子版」の設計と開発を担当。 Jamstack構成により、素早くユーザーにコンテンツを届けられるメディアサイトを、ランニングコストを抑えて実現しました。
メディアサイト
リニューアル時のフロントエンド開発を担当。 EleventyとmicroCMSによるJamstack構成で、情報を整理し更新しやすく、高速でセキュリティを考慮したWebサイトを実現しました。
コーポレートサイト
Jamstackで解決したいプロジェクトがあれば、技術選定の前に気軽にお問い合わせよりご相談ください。
お問い合わせ