Production
制作・開発

Jamstackアプリケーション開発

表示速度やセキュリティに優れ、近年採用例も増加しているJamstack。シナップでも採用例があり、高パフォーマンス・高セキュリティのサイトを実現できるため、おすすめしています。その概要と特徴、シナップで提供している構成をご紹介します。


シナップのJamstack開発の強み

そもそもJamstackとは

事前にデータを埋め込んだ静的なHTML(Markup)をベースにJavaScriptを使い、APIを通じて動的にコンテンツを扱うWebサイト構成(stack)のことです。
サーバーサイドとクライアントサイドが分離されていることが特徴で、従来通り動的コンテンツをサーバーサイドで運用する場合も、UIやHTML/CSSという見た目の開発から分離されるため、デザインの変更に影響されずAPIの開発を行うことができます。

これまでのWebの構成と問題

従来の構成では大量のコンテンツをDBに入れて、それをサーバーサイド言語によって取り出してWebページを表示していました。
この構成では大規模になるにつれインフラが複雑になり、構築も維持もコストがかさみます。またデザインのみを修正したい場合も、サーバーサイドプログラムを変更する必要があり、機能面にも影響するリスクがありました。
JamstackではデータはAPIによって取得し、ページ自体は静的配信されるため、スケールしやすいというメリットがあります。また、サーバーサイドとクライアントサイドが分離されているため、デザインのみの変更、機能のみの変更を分けて開発・リリースすることができます。

シナップが推奨するJamstack構成のメリット

CDN(ADN)によりコンテンツを高速に配信

Jamstackではフロントエンドの静的出力結果をユーザーから地理的にサーバー(エッジサーバー)でキャッシュして配信します。この仕組みをCDN(ContentsDeliveryNetwork)と言います。地理的に近くラグが少ない点と、DBへ問い合わせを行わずキャッシュを使用するため、高速に表示が可能です。

高いスケーラビリティで負荷に応じてスケールアップ可能

大量のアクセスが予想される場合オンプレミスでは、Webサーバーやアプリケーションサーバー、データーベースなどボトルネックとなる部分を特定してあらかじめ増強が必要となりますが、JamstackではCDN(ADN)によって負荷分散されているため容易に対処が可能です。また、多くの静的サイトジェネレーターはオートスケールに対応しており、アクセスの増加に対して自動でスケールアップすることができます。

Webサーバーを置かない点でセキュリティ上有利

事前に静的コンテンツを生成しており、ユーザーの入力によって動的にコンテンツが生成されないので、クロスサイトスクリプティング(XSS)やSQLインジェクションといった攻撃を受けにくい特徴があります。また、CMSのログイン画面等もサーバー上にないため、そこから侵入されるリスクもありません。

サーバーサイドとクライアントサイドがそれぞれの開発に専念出来る

サーバーサイドとクライアントサイドが分離しているため、お互いに別のソースコードで開発できます。サーバーサイドの機能はAPIという形でクライアントサイドへ提供され、クライアントサイドの変更はサーバーサイドには影響しません。


サービス内容

シナップが提供するJamstackの標準構成

シナップでは、クライアントの要件に合わせて最適なJamstack構成を提案します。
以下は、Jamstack構成のご提案の一例です。

Next.js

主にフロントエンドの開発を行うReactベースの高機能なJavaScriptフレームワークです。近年採用例の多いフレームワークで、CSR、SSR、SSG、ISRとページ生成機能が豊富で、要件によって使い分けることができます。

Vercel

Next.jsを開発する会社が提供するホスティングサービスです。Next.jsと親和性が高く、またパフォーマンスもほかのホスティングサービスと比較しても優れています。

microCMS

ヘッドレスCMSです。APIベースでデザイン管理などは一切なく、高速でセキュアなCMSです。多くのヘッドレスCMSは海外製で英語のみの対応ですが、microCMSは日本製なので、エンジニア以外でも使いやすい点がメリットです。

Storybook

実装したコンポーネントを一覧で確認することができるツールです。ダミーのコンテンツを入れることができ、コンポーネント単体での動作テストも兼ねています。

最適な解決方法をご提案します
SINAPでは、Webサイトやアプリの制作・開発に関わる様々なサービスを提供しています。制作・開発に関するお困りごとの相談をいただければ、お客様のご状況に合わせた最適な解決方法をご提案させていただきます。まずはお気軽に、ご相談ください。
制作・開発 サービスメニュー

代表的な手法を掲載しています。プロジェクトに合わせて最適なプランをご提案します。

このサイトでは、利用状況の把握などのために、プライバシーポリシーに基づき、Cookieを使用してアクセスデータの取得・利用等を行います。