Jamstackとは、JavaScriptでAPIを呼び、Markupしたコンテンツを配信する技術？のことで、webサイトやアプリなどの開発に活用が始まっている、web制作などの技術です。Jamstack自体は、そこそこ前から、話題に上がっていたのですが、2022年、notionなどの関係性から動きが活発になりそうです。
そこで、Jamstackとは 何か？Jamstackのメリットや、利用に向いている制作物などについて解説をしていきたいと思います。
Jamstackが台頭してくると、wordpressの利用率などにも、少しは影響を与えそうだと思っています。Jamstackで、企業サイトや、商品サイトなどの高速表示などが進んでいくといいですね。Googleなどからも評価を受けそうですし。
Jamstack とは
Jamstack 公式サイト
https://jamstack.org/
Jamstackとは、Webアプリ、Webサイト制作の技術で、ワードプレスなどのCMSと異なり、フロントエンド（表示画面）とバックエンド（管理画面）を切り離して、構築ができる作りになっています。
これによって、静的なHTMLを、ユーザーがリクエストしたブラウザに、すばやく配信ができるような作りになっています。
Jamstackは、CDNで配信できる静的なHTMLが基本となっているため、表示スピードが圧倒的に速くなることが特徴の１つです。
それゆえ、動的なプログラムを活用しないwebサイト、webアプリとは相性が良いです。
たとえば、そんなに更新をしないコーポレートサイト、商品サイト。
こういったwebサイト制作と、Jamstackは相性が良く、スピーディに、webコンテンツの表示が可能になります。
ちなみに、JamstackはNetlify社によって定義された言葉で、
- JavaScriptのJ
- APIのA
- MarkupのM
をstackするものという言葉です。
そこから考えるに、Jamstackの日本語の読み方は、おそらく、ジャムスタックになるのでしょうね。
Jamstackは静的なHTMLページがベースになりますが、動的なデータ（DBを参照するようなデータ）なども扱うことは可能で、Jamstackは、動的なデータを扱うときは、ビルド時に取得して、表示をするような流れになります。
そのため、静的なwebサイト、webアプリではないと、作れないわけではないです。
Jamstackは、日本では、１技術として、評価はされていますが、まだあまり知名度をとれていないかんじではあります。
Youtubeでも、Jamstackの紹介動画は、以下のような英語の方が多いです。
Jamstackはそういう意味では、まだまだ先進的な開発方法、技術になりますね。
Jamstack 利用シーン
Jamstack を 用いて、webサイトを作る際、おすすめなのは、以下のようなサイトです。
- 企業サイト
- 商品紹介サイト
- サービス紹介サイト
- 記事サイト オウンドメディア
Jamstackは、誰が見ても、同じ表示になるホームページの制作と相性がいいので、facebookや、ツイッターなどのサイトを作ろうとするのは、難しいです。
しかし、記事サイト（ワードプレスで作られるようなサイト）や、企業のオウンドメディアで、パーソナライズなどをしていないホームページには、Jamstackで制作することができますし、相性がいいです。
Jamstack メリット
Jamstackの導入メリットは、以下の点です。
- webサイト、webページの高速表示
- 高いセキュリティ
この2つが直接的なメリットです。
間接的には、表示速度が速くなるので、
- 利用しやすいwebサイトになる
- インフラコストの軽減
- Googleから評価されやすくなる
といった点があるでしょう。
現状、Jamstack メリット として、セキュリティがあがることもいいですね。
静的なページの配信ですので、セキュリティがアップします！
そして、これがベースとなるため、Jamstackなら、webサーバのスペックが悪くても、それなりに表示速度はあがります。
結果、インフラコストの削減につながるのです。
Jamstackは、メリットも多い、技術なんですよね。
Jamstack サイトの作り方
Jamstackは、webサーバーを経由せずとも、webサイトを運用することができるので、そこは大きいですよね。
コンテンツ配信時にはウェブサーバーはなくても、静的ページを用意できているのであれば、webサイトとして運用可能です。
さて、実際に、Jamstackでサイトを作る方法です。
Jamstackでサイトを作るには、
- ヘッドレスCMS
- Nuxt(Vue.js) / Hugo(Go) などの言語
が利用できれば、作れます。
ヘッドレスCMSについては、Netlify CMSが有名です。
Netlify CMS
https://www.netlifycms.org/
これを活用して、コンテンツの投稿を行い、貯蓄したデータに対して、Vue.js経由のAPIでアクセスしていくかんじですね。
ちなみに、これは、notionなどでも活用されているwebサイトの制作方法と同じ概念なので、参考にしておいてください。
Jamstack アクセス数が多くてもOK
Jamstackは、大量 アクセス を さばけます。
すでに作ってある静的ページを配信するからです。
そのため、リクエスト、アクセスに対する負荷が軽減され、大量のアクセスがあっても、さばきやすい環境を作れるのです。
例として、CDN、クラウドフロントについて、記載します。
CloudFront（AWSのCDNサービス）は1秒あたり25万アクセスに耐えうる設計がされていて、アマゾンのショッピングサイトを支える技術です。
転送量は高くつくかもですが、ヤフーニュースに掲載されても、耐えうる基盤を作れるのが大きいですよね。
まとめ Jamstack インフラコスト削減＆セキュリティアップ！中小企業におすすめ
Jamstackについての基礎知識などもついたと思いますが、
Jamstack いかがでしょうか？
Jamstackなら、アクセス数もさばけますので、インフラコストの削減につながります。中小企業にはうれしい仕組みですね。
Jamstackの特徴は、静的コンテンツを配信することで、表示速度も速くなることですね。外部データの取り込みもできるので、ワードプレスで作る、記事サイト、オウンドメディアなどのCMSも実現可能
サイトの高速化やセキュリティの改善、といった部分も、Jamstackが評価されている点です。
2022年はインフラやネットワークのコストについての見直しも起きてくると思うので、Jamstackについての動きが活性化しそうです。
Jamstackのトレンドが来そうな状況ができてきているのですね。
グーグルトレンド 使い方 活用ナビ！無料 で キーワード 調査 検索数 リサーチ
■ web制作 関連記事
いくつかピックアップ！
【web制作 営業 必見】 効率的な 見積書 作り方 高速化の技術は4つ
https://saras-wati.net/web-make/webmake-quote-knowhow/
【web制作会社向け】売上改善に！CMS ランキング 2020 から 対応できる CMS を 増やす
https://saras-wati.net/web-make/ranking-cms-2020/
エレメンター とは 無料 で 簡単 ホームページ制作 ノーコード web制作 に
https://saras-wati.net/web-make/about-elementor/
【ノウハウ】WordPress マルチサイト 設定方法 解除 方法 ハウツー メモ
https://saras-wati.net/web-make/system/wordpress-multisite-setting/
2022年 web制作会社 売上の上がる18のビジネスモデル解説
https://saras-wati.net/web-make/webmake-business-model2002/
【知ってる？】Webデザイン 仕事 で 必要なソフト まとめ ６選 おすすめ アプリは？
https://saras-wati.net/web-make/first-web-design-soft-knowhow/
Notion 使い方 Web 制作 方法 Wraptas が 便利 ヘッドレスCMS ノーション
https://saras-wati.net/web-make/system/notion-howto-web-wraptas/
【トレンド】Jamstack とは webサイト 高速表示 大量アクセスに強い 最新技術
https://saras-wati.net/web-make/about-jamstack/
【基礎知識】データベース 種類 DBとは どんなソフトがあるの？まとめてみました。
https://saras-wati.net/web-make/system/about-db-soft/
【ホームページ作成 CMS】BiNDup とは バインドアップ 評価 クチコミ 情報！
https://saras-wati.net/web-make/about-bindup/
【無料】Pixelhunter SNS 最適 画像サイズ に 1回で トリミング！ピクセルハンター
https://saras-wati.net/web-make/about-pixelhunter-sns/
【ノーコード】Webflow 事例 国内サイト 3選 html css 書かずに ホームページ制作
https://saras-wati.net/web-make/webflow-jirei/
Notion 使い方 Web 制作 方法 Wraptas が 便利 ヘッドレスCMS ノーション
https://saras-wati.net/web-make/system/notion-howto-web-wraptas/
