お問い合わせ
シナップの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
実装したコンポーネントを一覧で確認することができるツールです。ダミーのコンテンツを入れることができ、コンポーネント単体での動作テストも兼ねています。
代表的な手法を掲載しています。プロジェクトに合わせて最適なプランをご提案します。
シナップが提供するサービス
UXデザイン
ユーザーのことをよく理解し、サービス全体の中でその体験がどうあるべきかを、ユーザーの視点、ビジネスの視点それぞれで考え、課題の抽出、要件定義、解決策の提示を行います。
フロントのデザインやUIといった表層的な部分だけでなく、機能やインフラ、さらにサービスを実現するための運用やオペレーションまで、サービスを取り巻く広い範囲で考えることが得意です。
サービス提供例
新規事業開発からWeb戦略、サイトの制作・開発、グロース・運用まで幅広いサービスを提供、パートナーとして伴走支援します。
