見出し画像

【事例紹介】パフォーマンスの高いWebサイトを作る選択肢「Jamstack」を紹介

TAM Design Tech

こんにちは。
TAMのデザインテクノロジーチームのリーダーの角谷（すみや）です。

みなさんは「Jamstack」という言葉を聞いたことはあるでしょうか。

エンジニアだと知っている人が多いですが、ディレクターやデザイナーだと「聞いたことはある」「知らない」という人はまだまだ多いんじゃないかなと思います。Jamstackは、使いどころを間違わなければ、結果につながるサイト構築方法なので、今回ご紹介したくて記事を書いています。

なるべく、詳しくない人でもわかるように書いていこうと思います。

Jamstackとは

少しむずかしい説明になりますが、言葉の由来はこのような形です。

Jam＝JavaScript/APIs/Markupの頭文字
stack＝技術の組み合わせ

このように作られたサイトのことを指しています。

・CDNで配信できる静的なHTMLをベースに
・動的なコンテンツはJavaScriptにより、APIを通じて取得し表示
・フロントエンドとバックエンドは完全分離

これだけではよくわからないので、次から解説していきます。

まずはJamstackで作られたサイトを実際に見てみてください。TAM制作事例ご紹介

画像1

・クラウドワークス様　コーポレートサイト
・SACCSY様　コーポレートサイト

表示速度の速さを実感していただけると思います。実際に、SACCSY様のサイトでは↓このようなパフォーマンス点数を得られています。

画像2

上記の事例では、↓このような構成になっています。

・CMSはフロントエンドと切り離されたCMS「microCMS」
・microCMSで作られたデータを静的HTMLとして生成する「Nuxt.js」
・サーバーはCDN配信できる「Netlify」
※動的なコンテンツはなし

Jamstackは、このように高いサイトパフォーマンスを実現します。
コーポレートサイトや、製品情報サイト、ブログやメディアサイトなどは採用しやすく、事例も多いです。

クラウドワークス様がJamstackを採用した背景
以下のような課題感から、「microCMS+Netlify+Nuxt.js」の構成を採用されました。クラウドワークスのPeter様のnoteより引用します。

元々は「フロントエンド構成をモダンにつくりたい」という飯田のオーダーから「microCMS」の導入が決まりました。以前のコーポレートサイトでも、ニュースページ内にはWordPressが実装されており、更新はできていました。しかし、前述のとおりサイト全体としては「Ruby on Rails」で構築されていたため、ニュース以外の更新が難しい状況が発生していました。

↓こちらの記事で詳細書かれていますので、ぜひ参考にされてみてください。TAMをパートナーに選んだ理由も書いていただいてます！

SACCSY様の場合
SACCSY様の場合も、クラウドワークス様と同様に、社内のエンジニアの方がCMSを検討する中でmicroCMSに行きつき、microCMSを運営されているウォンタ様よりTAMをご紹介いただいて、Jamstackでの構築に至った形でした。WordPressとmicroCMSを並べて比較したときに、よりモダンでパフォーマンスもよく、使う言語/フレームワークも慣れているNuxt.jsを採用された形でした。

※ちなみに、TAMの自社サイトも（https://www.tam-tam.co.jp/、https://oh-tam.com/）Jamstack構成です。

※ちなみに、TAMはmicroCMSパートナーです！

※2022年現在、多数のサイトで導入事例が出てきています。開発中のものも多数あり。

なぜ高速表示が可能なのか？

Jamstackが高速表示を可能にしている理由はこちら。

① サーバーサイドレンダリングをしないから
② CDNを利用するから

① サーバーサイドレンダリングをしないから

サーバーサイドでページを作る「サーバーサイドレンダリング」は、通常の静的なhtmlとちがって、サーバーサイドでhtmlを作る分、表示に時間がかかるんですね。

例えば、WordPressのような動的なCMSの場合、ユーザーがサイトにアクセスするたびにDBにアクセスし、サーバーサイドでhtmlを動的に生成してから表示をするので、静的なhtmlを返すよりも処理に時間がかかってしまいます。

これがJamstack構成のサイトだと、CMSのデータを使ってあらかじめ静的に生成しておいたhtmlをサーバーに置くので、動的にhtmlを生成しません。

静的に生成する、という意味ではMovable TypeなどのhtmlをパブリッシュするCMSに似ているとも言えます。（でも違います。その説明は後ほど・・・）

②CDNを利用するから

CDNは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略です。簡単にいうと、コンテンツを高速配信するためのネットワークのことです。

Jamstackの場合、静的なhtmlをCDNに置くところまでを範囲としているので、ただでさえ表示の速い静的コンテンツを、さらに速く配信できるようになっています。

さきほど事例で登場した「Netlify」というホスティングサービスでは、CDNも使え、Jamstackに必要なGitを使ったワークフローも手軽に使えるという点で、Jamstack構成のサイトではよく利用されています。
※余談ですが、JamstackはNetlifyのCEOが使い始めた略語だそうです。
同様のホスティングサービスとしては「Vercel」などがあります。


なんでもかんでもJamstackがいいわけではない。
Movable TypeやWordPressとの比較

イメージしやすいように、比較表を作ってみました。

画像3

※前提①：Movable Typeは最新のMTクラウドを想定
※前提②：Jamstackのホスティング環境はNetlifyを想定
※前提③：WordPressでもShifterやAMIMOTO等の高パフォーマンス環境を使えば早い速度を求めることは可能です。
※前提④：あくまでイメージしやすくするため、ということで・・・。

表示速度
JamstackとMovable Type（MTクラウド）は、静的にコンテンツを生成する点とCDNを使う点で同じなので◎としました。
WordPressが△なのはサーバーサイドレンダリングが必要だからという意味です。

セキュリティ
Jamstack構成の場合は、ページを静的に生成する際にCMSのデータを埋め込むので、CMS本体にユーザーがアクセスすることがないためセキュリティが高いです。MTクラウドも同様で、ユーザーは静的ページにアクセスし、CMS本体にはアクセスしません。
WordPressは、ユーザーも管理者も同じシステムを使ってサイト閲覧・管理するため、攻撃にさらされやすいという点で△にしました。

コンテンツの再利用性
Jamstack構成の場合、CMSが切り離されて管理されているので、例えば「別のアプリでも同じCMSのデータを使おう」ということができるので◎。MTクラウドと、WordpressについてもAPIを作ることができますが、元々の用途とは異なりAPI開発が必要になるので○としました。

改修のしやすさ
改修に必要な言語やフレームワークがそれぞれで違うため、その改修ができる体制が必要となります。

プラグインの充実度
WordPressは利用者も多く、プラグインが充実していて、気軽にサイトを機能拡張できるというのが強みなので◎としました。一方MTの場合は、WordPressほどの使用感ではないという点で○、各種ヘッドレスCMSはサービスによるという点と、登場してまだ数年という点で△～○としました。

構築コスト
先ほどのプラグインの話ともつながりますが、Jamstackの場合、静的サイトジェネレーターという事前に静的なhtmlを生成する仕組みでのサイト構築が必要になります。MTやWordPressといったCMSの場合はプラグインとして用意されている機能も、自前で作る必要があるので、開発コストは比較的高めです。プレビュー機能なども作る必要があります。

このように、それぞれ一長一短がありますので、運用を見すえて構成は検討していくのが大事ですね。


Jamstackの良さを正しく把握するために。
知っておきたい時代背景

Jamstackをより理解するには、システム開発のトレンドを少しだけ知っておく必要があります。

背景１．「マイクロサービス化」の流れ
従来のウェブシステムといえば、いろんな機能を持ったシステムが1つになっていることが多かったです。WordPressなんかはまさにそうですね。1つのサーバーにWordPressがインストールされていて、そのWordPressを管理者はコンテンツ管理に使い、ユーザーはページ閲覧に利用する形です。このように、いろんな機能を1つにまとめたシステムを「モノリス（一枚岩）」と言います。

いまは、システム構築の概念が変わってきています。

システムを１つにまとめると、特定の一機能を拡張するときにシステム全体に影響が及ぶことになります。そのため、一つひとつの機能を小さなシステム（＝マイクロサービス）に分けていくことで、それぞれを管理しやすくするという考え方を取り入れる会社が増えています。

Webアプリケーション開発の現場では、バックエンドの再利用性を高めるために多くのシステムがフロントエンドとバックエンドを切り離し、APIを経由してデータをやり取りするようになってきています。

そうなると、ユーザーが使うアプリケーションは、フロントエンドからJavaScriptでAPIでデータ取得して使う・・・という形に必然的になりますね。

なので、そういった構成を実現するSPA（Single Page Application）やJamstackがトレンドになっているのだと考えられます。

背景２．ウェブパフォーマンスの重要性の高まり。
ウェブサイトの表示速度は、ユーザー体験を大きく左右します。
みなさんも、なかなか表示されないサイトにストレスを感じることはありませんか？

Googleは、よりよいユーザー体験のために2021年6月にCore Web VitalsというWebパフォーマンス指標を検索アルゴリズムに反映しました。

Webサイトのパフォーマンス向上は、サイトを運営する人にとって大事な課題の一つになっているというのも、Jamstackに注目が集まっている背景にあります。


背景３．Nuxt.js / Next.jsといったフレームワークが充実
この数年、Webのアプリケーション開発ではReactやVue.jsなどのJavaScriptフレームワークが使われることが多いですが、その開発をさらに便利にするのがNext.jsやNuxt.jsで開発者に人気のフレームワークです。

これらは、もともとはサーバーサイドレンダリングをするためのフレームワークとして提供されていましたが、事前にデータを埋め込んだ静的なHTMLをビルドできる機能が備わったことで、Jamstackでの構築がしやすくなったという背景もあります。

最近では、フロントエンドエンジニアでNuxt.jsやNext.jsの習得を目指している人がとても多く、ますますJamstackでの構成は今後のトレンドになりそうです。

まとめ：使いどころを見極めてJamstackを取り入れよう。

Jamstackは高いパフォーマンスのWebサイト/アプリケーションを作るのに向いている選択肢です。ただし、万能ではないので、制作体制や今後の拡張を見極めて導入をおすすめいたします！

TAMは、microCMS、Movable Typeの開発パートナーです。WordPressを静的化するShifterのパートナーでもあります。お客様の状況にあわせて、最適なアーキテクチャをご提案しています。お気軽にご相談ください。

・microCMSパートナー
https://microcms.io/partners/tam

・Movable Typeパートナー
https://www.sixapart.jp/pronet/partner/partner000394.html

・Shifterパートナー
https://spn.getshifter.io/partner/tam/


PWA Night CONFERENCE 2022
キャンペーン応募コード：T4w
TAMはPWA Night CONFERENCE 2022をプラチナスポンサーで応援しています。
https://www.tam-tam.co.jp/stories/pwanightconference2022


※余談
話題になりはじめた最初のころは「JAMstack」と表記されていましたが、「Jamstack」表記が正式になったそうです。

角谷仁 / TAM取締役 / TAMTO代表取締役
PWA Night 発起人＆運営。TAMのデザインテクノロジーチームのリーダー。3歳長男と1歳双子育児中。釣り好き、VR好き。
Twitter: @hitoshisum

一緒に働く仲間も募集中です！