🐢

Jamstackについて調べてみた

2024/02/11に公開

JavaScript

初めに

私は、現在大学生で4月からWebエンジニアとしてキャリアがスタートします。
学んだことや初めてワードに対してメモ感覚でアウトプットしたいと思います。

恥ずかしながら、Jamstackの意味を知ったのは、ここ1年くらいで、Webサイトの作り方かな？くらいの認識であったため、理解を深めるためにここに残します。

Jamstackとは

JamstackのJamについてですが、こちらは、下記の頭文字をとった意味合いになります。

JavaScript（プログラミング言語）
APIs（データをやり取りする仕組み）
Markup（Webページの表示に必要なHTML）

JavaScriptでAPIを叩きデータをやり取りし、ウェブページを表示するためのHTMLなどで配信するということであり、
いわゆる、Webサイトを作る上でのシステム構成ということになります。

Jamstackの特徴

大量のアクセスに強い

Jamstackは、生成済みのページに処理を挟むことなく返し、アクセスの負荷がかなり軽量化されるため大量のアクセスに対して強いメリットがあります。

例えば、大規模なWebサイトの場合は、キャンペーンの掲示や新情報をWebサイトに掲載する時にとんでもない数のユーザーがアクセスすると考えると、サーバーに負荷がかかってしまい、増設するなどの対応が必要になってしまいます。
しかし、Jamstackですと、CDNから静的ファイルを持ってくるだけなので、ページ生成をする処理をする必要がなくなり運用コストを抑えることが可能になります。

ページの表示スピードが速い

表示スピードは、UXやSEOの点でとても重要な要素であり、表示スピードの速さは、Jamstack最大の特徴とも言えます。
Webサイトの表示スピードがどれくらい重要なのかというと、表示するのに3秒以上かかると、約50%以上のユーザーが離脱をしてしまうという結果があります。

そのため、表示スピードのパフォーマンスはとても重要なことがわかります。

Jamstackの構成について

Jamstackには、必須となるツールがあります。

ヘッドレスCMS
静的サイトジェネレーター(SSG)
ホスティングサービス(SDN)

上記のツールがJamstackにとって重要な役割を果たしています。

ヘッドレスCMSについて

ヘッドレスCMSとは、ヘッド(表示画面)レスなので、表示画面がなく、コンテンツを管理する機能などだけが備わっているツールです。
従来のCMSでは、コンテンツ作成・管理する機能とWebサイトにコンテンツを表示する機能がありましたが、ヘッドレスCMSは、コンテンツを管理する機能に重きを置く為に柔軟なコンテンツ管理やフロントエンドの部分を自由度高く実装することが可能になりました。
代表的なヘッドレスCMSでは、microCMSというツールがございます。

静的サイトジェネレーターについて

静的サイトジェネレーター(SSG)とは、静的なサイトを生成するツールです。
サイトに更新通知を受けた際に、まずWebサイト全てのページを静的生成して不要であるJavaScriptの処理も排除や読み込みの最適化もしてくれます。
代表的なSSGは、4つほどあり、それらについても軽く触れておきます。

Next.js

Next.jsは、ReactベースのSSGであり、機能としてSSGの他にSSRやISRも機能として実装できる為、かなりおすすめとなっており大規模サイトで選定されていることが多いです。

Nuxt.js

Nuxt.jsは、Vue.jsがベースのSSGであり、SSGの他にSSRの機能もあり、大規模というより小、中規模で選定されることが多いです。

Astro

Astroとは、ReactやVueも含めその他のフレームワークやライブラリと組み合わせ扱うことができます。プラグインもあり、比較的簡単に作成することが可能です。

Gatsby

Gatsbyは、ReactベースのSSGであり、CSSや画像の読み込みの速さに優れているが、SSRの機能には対応していません。
プラグインを組み合わせれることが出来たりするので、簡易的にJamstackを実現することが可能です。

ホスティングサービスについて

ホスティングサービス(CDN)とは、Jamstackにおけるサーバーみたいなもので、CI/CDの機能、CDNからコンテンツを配信する機能やバックエンドの処理などの役割をしており、高速で低運用でセキュアな部分もあるためJamstackにとってとても重要な役割でもあるのです。

Jamstackに適しているプロダクト

Jamstackは、Webサイト作る際になんでも向いているということではなく、
コンテンツが頻繁に更新されることなく、セキュリティの部分や画面表示のスピードが重要になり成果が発揮される為、以下のようなプロダクトに向いている考えられます。

Webメディア
LP・コーポレートサイト
キャンペーンサイト
ヘルプページ
etc...

上記のサイトやページですと、Jamstackの本領を発揮することができると考えられます。

まとめ

Jamstackについて触れていきました。
Jamstackは、SEOの部分にも効果的な為、サイトのセッション数やコンバージョン率を向上させる効果もあるということを知りました。
これから、Webエンジニアになる為その他の気になったことなども、投稿して行きたいと思います。