弊社サイトで使われているJamstackとは何か?

エンジニアリング
弊社サイトで使われているJamstackとは何か?

はじめに

弊社コーポレートサイトはJamstackという構成で作られています。Jamstackは高セキュリティで高速表示というメリットがあり、弊社ではお客様からのご希望がない限りJamstackでサイト制作をさせていただいております。
ですが、そのJamstack。なかなか聞き慣れない言葉ですよね。なのでこの記事ではJamstackについて解説をしてみたいと思います。

Jamstackとは

Jamstack(ジャムスタック)とはエンジニアがよく使う技術の頭文字を取ってつけられたWEBサイトを構築するための構成(stack)のことをいいます。

  • J = JavaScriptというプログラミング言語
  • a = APIと言ってデータのやりとりを行う仕組み
  • m = MarkupはChromeなどのブラウザで表示させるための言語、簡単にいうとHTMLのこと

JamstackではJavaScriptを使いAPIから取得したデータを準備段階でブラウザで表示できるようにHTMLファイルを生成します。実際のブラウザではその生成されたHTMLファイルを表示しています。準備が必要にはなるのですが、準備自体は自動化することができるので特に意識することもありません。

Jamstackの特徴とは

  1. 大量アクセスに強い
  2. 高セキュリティ
  3. 高速で表示

という特徴をもっています。

大量アクセスに強い

生成されたHTMLファイルをそのままブラウザで表示するだけなので、アクセス時に大きな負荷がかかることがないため従来の構成よりも大量アクセスに強い構成になっています。

高セキュリティ

Jamstackではブラウザで表示時にWEBサーバーがありません。なので、悪意をもってページに訪れて攻撃をしようとする輩がいたとしても攻撃をする糸口がない状態です。従来の構成よりも安全性を保つことが比較的簡単にできます。

高速で表示

従来の構成よりも格段にファイルサイズの小さいHTMLファイルをブラウザで表示することになるのでブラウザで表示した際速く表示させることが容易にできます。

Jamstackが向いているWEBサイト・向いていないWEBサイト

大量アクセスに強く、高セキュリティ、高速表示と良いとこばかりのJamstack構成ですが、全てのサイトに向いているわけではありません。

Jamstackが向いているWEBサイト

  • ブログなどのメディアサイト
  • コーポレートサイトや店舗サイト
  • サービス紹介などのLPページ

Jamstackが向いていないWEBサイト

  • ECサイト
  • リアルタイム性が求められるサービス

Jamstackは例えばTwitterはInstagramなどをはじめとするSNSやECサイトなどは向いていません。というのも準備段階としてJavaScriptを使いAPIから取得したデータを元にHTMlファイルを生成する必要があるのでリアルタイムな情報を扱うことができません。なのでコーポレートサイトなどリアルタイムな情報を載せる必要がないWEBサイトの制作に向いています。

Jamstackを支えるサービス・技術について

では具体的に弊社サイトではどのような技術を使ってサイトを制作をしているのかというと大きく3つになります。

  • Next.js > Jamの「J」と「m」の部分をここで行います。
  • microCMS > Jamの「a」の部分です。
  • Netlify > 直接Jamstackではないのですがホスティングサービスと言って生成されたHTMLファイルを置く場所になります。

Next.jsとは

ReactというJavaScriptライブラリのフレームワークです。Next.jsでAPIからデータを取得してHTMLファイルとして吐き出しをするところまで行います。

microCMS

ヘッドレスCMSサービスと言ってCMS(コンテンツマネージメントシステム)というブログ記事を管理・作成ができるシステムの外部サービスになります。
日本製のヘッドレスCMSサービスなので、日本語ですしわかりやすいという特徴があります。弊社のクライアント様も日本語なので大変使いやすいとおっしゃってくれています。
また、料金も無料で使える枠も結構あるので最初のうちは無料で使い後々アップグレードをしてスタンダードプランにすると良いかなと思います。

https://microcms.io/pricing

Netlify

Jamstackではないのですが、Jamstackでは切っても切り離せないものになります。こちらも外部サービスになっていて生成されたHTMLファイルを置く場所になるいわゆるホスティングサービスになります。Netlifyについても最初は無料で初めて徐々にProにすると良いと思います。

https://www.netlify.com/pricing/

終わりに

今記事ではJamstackについての概要をまとめました。運用するのにmicroCMS、Netlifyのアカウントは最初は一つずつ取得し、また最初は規模も小さく始めたいと言った場合はほとんど運用コストもかからずにWEBサイトの制作ができます。また高速で表示ができ企業としては気になるセキュリティ面も良好です。なのでブラキオでは基本的にはお客様からサイト制作のご相談があった場合はJamstackでのご提案をさせていただくことが多いです。ぜひJamstackでのwebサイトにご興味がある、ご相談はお問合せからご連絡いただければと思います。

ご相談・お問合せはこちら

フロントエンドの開発、web制作のご相談はこちらからお願いします。