<h2 id="h8d027c8ed3"><span style="color:#333333">はじめに</span></h2><p>弊社コーポレートサイトはJamstackという構成で作られています。Jamstackは高セキュリティで高速表示というメリットがあり、弊社ではお客様からのご希望がない限りJamstackでサイト制作をさせていただいております。<br>ですが、そのJamstack。なかなか聞き慣れない言葉ですよね。なのでこの記事ではJamstackについて解説をしてみたいと思います。</p><h2 id="h70ace14742"><span style="color:#333333">Jamstackとは</span></h2><p><span style="color:#333333">Jamstack（ジャムスタック）とはエンジニアがよく使う技術の頭文字を取ってつけられたWEBサイトを構築するための構成（stack）のことをいいます。</span></p><ul><li><span style="color:#333333">J = JavaScriptというプログラミング言語</span></li><li><span style="color:#333333">a = APIと言ってデータのやりとりを行う仕組み</span></li><li><span style="color:#333333">m = MarkupはChromeなどのブラウザで表示させるための言語、簡単にいうとHTMLのこと</span></li></ul><p><span style="color:#333333">JamstackではJavaScriptを使いAPIから取得したデータを準備段階でブラウザで表示できるようにHTMLファイルを生成します。実際のブラウザではその生成されたHTMLファイルを表示しています。準備が必要にはなるのですが、準備自体は自動化することができるので特に意識することもありません。</span></p><h2 id="h052684aca8"><span style="color:#333333">Jamstackの特徴とは</span></h2><ol><li><span style="color:#333333">大量アクセスに強い</span></li><li><span style="color:#333333">高セキュリティ</span></li><li><span style="color:#333333">高速で表示</span></li></ol><p><span style="color:#333333">という特徴をもっています。</span></p><h3 id="h76d47cce57"><span style="color:#333333">大量アクセスに強い</span></h3><p><span style="color:#333333">生成されたHTMLファイルをそのままブラウザで表示するだけなので、アクセス時に大きな負荷がかかることがないため従来の構成よりも大量アクセスに強い構成になっています。</span></p><h3 id="h2c87b68c29"><span style="color:#333333">高セキュリティ</span></h3><p><span style="color:#333333">Jamstackではブラウザで表示時にWEBサーバーがありません。なので、悪意をもってページに訪れて攻撃をしようとする輩がいたとしても攻撃をする糸口がない状態です。従来の構成よりも安全性を保つことが比較的簡単にできます。</span></p><h3 id="h3dcd342d7c"><span style="color:#333333">高速で表示</span></h3><p><span style="color:#333333">従来の構成よりも格段にファイルサイズの小さいHTMLファイルをブラウザで表示することになるのでブラウザで表示した際速く表示させることが容易にできます。</span></p><h2 id="hb0b92f5b65"><span style="color:#333333">Jamstackが向いているWEBサイト・向いていないWEBサイト</span></h2><p><span style="color:#333333">大量アクセスに強く、高セキュリティ、高速表示と良いとこばかりのJamstack構成ですが、全てのサイトに向いているわけではありません。</span></p><h3 id="h643db2fa38"><span style="color:#333333">Jamstackが向いているWEBサイト</span></h3><ul><li><span style="color:#333333">ブログなどのメディアサイト</span></li><li><span style="color:#333333">コーポレートサイトや店舗サイト</span></li><li><span style="color:#333333">サービス紹介などのLPページ</span></li></ul><h3 id="h747f1da083"><span style="color:#333333">Jamstackが向いていないWEBサイト</span></h3><ul><li><span style="color:#333333">ECサイト</span></li><li><span style="color:#333333">リアルタイム性が求められるサービス</span></li></ul><p><span style="color:#333333">Jamstackは例えばTwitterはInstagramなどをはじめとするSNSやECサイトなどは向いていません。というのも準備段階としてJavaScriptを使いAPIから取得したデータを元にHTMlファイルを生成する必要があるのでリアルタイムな情報を扱うことができません。なのでコーポレートサイトなどリアルタイムな情報を載せる必要がないWEBサイトの制作に向いています。</span></p><h2 id="hc9cae3a673"><span style="color:#333333">Jamstackを支えるサービス・技術について</span></h2><p><span style="color:#333333">では具体的に弊社サイトではどのような技術を使ってサイトを制作をしているのかというと大きく3つになります。</span></p><ul><li><span style="color:#333333">Next.js &gt; Jamの「J」と「m」の部分をここで行います。</span></li><li><span style="color:#333333">microCMS &gt; Jamの「a」の部分です。</span></li><li><span style="color:#333333">Netlify &gt; 直接Jamstackではないのですがホスティングサービスと言って生成されたHTMLファイルを置く場所になります。</span></li></ul><h3 id="h4d50e8632f"><span style="color:#333333">Next.jsとは</span></h3><p><span style="color:#333333">ReactというJavaScriptライブラリのフレームワークです。Next.jsでAPIからデータを取得してHTMLファイルとして吐き出しをするところまで行います。</span></p><h3 id="hae6947d5ce"><span style="color:#333333">microCMS</span></h3><p><span style="color:#333333">ヘッドレスCMSサービスと言ってCMS（コンテンツマネージメントシステム）というブログ記事を管理・作成ができるシステムの外部サービスになります。</span><br><span style="color:#333333">日本製のヘッドレスCMSサービスなので、日本語ですしわかりやすいという特徴があります。弊社のクライアント様も日本語なので大変使いやすいとおっしゃってくれています。</span><br><span style="color:#333333">また、料金も無料で使える枠も結構あるので最初のうちは無料で使い後々アップグレードをしてスタンダードプランにすると良いかなと思います。</span><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/c4f8d4a2ae9c497c85eff58a19c7f0dc/microcms.png" alt=""><br><a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">https://microcms.io/pricing</a><br></p><h3 id="h9da03a681c"><span style="color:#333333">Netlify</span></h3><p><span style="color:#333333">Jamstackではないのですが、Jamstackでは切っても切り離せないものになります。こちらも外部サービスになっていて生成されたHTMLファイルを置く場所になるいわゆるホスティングサービスになります。Netlifyについても最初は無料で初めて徐々にProにすると良いと思います。</span><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/c089af1b409d4b0cade98b653cae1be5/netlify.png" alt=""><br><a href="https://www.netlify.com/pricing/" target="_blank" rel="noopener noreferrer">https://www.netlify.com/pricing/</a><br></p><h2 id="hcbec2bf0d9"><span style="color:#333333">終わりに</span></h2><p><span style="color:#333333">今記事ではJamstackについての概要をまとめました。運用するのにmicroCMS、Netlifyのアカウントは最初は一つずつ取得し、また最初は規模も小さく始めたいと言った場合はほとんど運用コストもかからずにWEBサイトの制作ができます。また高速で表示ができ企業としては気になるセキュリティ面も良好です。なのでブラキオでは基本的にはお客様からサイト制作のご相談があった場合はJamstackでのご提案をさせていただくことが多いです。ぜひJamstackでのwebサイトにご興味がある、ご相談はお問合せからご連絡いただければと思います。</span></p>

弊社サイト（ホームページ）で使われているJamstackとは何か？

- WEBサービスのフロントエンド開発
- ホームページ制作

株式会社ブラキオはWEBサービスの開発やホームページ制作および運用・保守を行っています。Next.js, React, TypeScriptなどモダンな技術でつくる高品質なソリューションを低価格でご提供します。フロントエンド開発・Jamstackで作るホームページ制作をご依頼ならブラキオにお任せください。

BLOGブラキオブログ

弊社サイト（ホームページ）で使われているJamstackとは何か？

ホームページ制作なら
ブラキオにお任せください

BLOGブラキオブログ

弊社サイト（ホームページ）で使われているJamstackとは何か？

ホームページ制作ならブラキオにお任せください

ホームページ制作なら
ブラキオにお任せください