# Jamstack構成のサイトブログ

## ＜参考サイト＞
https://qiita.com/ozaki25/items/4075d03278d1fb51cc37
https://blog.microcms.io/jamstack-introduction/
https://blog.microcms.io/jamstack-introduction/
＜テーマ：jamstack＞
自社のコーポレートサイトの表示スピードが遅くイライラする。
表示スピードが遅いとSEO的にもペナルティ。
特にスマホで見ると遅いのでなんとかしたいが、制作会社に相談してもなかなか改善されない。
みたいな悩みを抱えている、中小企業経営者やWeb担当者に向けて、
従来の方法（WordPress）をベースにサイト表示を爆速にしてモダンなサイトにできるよっていう
コンテンツを作りたい。
＜タイトル案（仮）＞
・爆速のコーポレートサイトを開発してみた
・サイトの表示速度で悩む経営者必見！爆速サイトの作り方教えます
・もっさりサイトとはおさらば！JamStackでコーポレートサイトを爆速にしよう
＜コンテンツの流れ＞
## リード文
今回自社のコーポレートサイトをJamStackでリニューアルした。
## サイトの表示が遅いことで起こる機会損失
SEOの低下やユーザビリティの低下。
## JamStackとは何か？
### 既存のサイトとの違い
### JamStackのメリット・デメリット
### どんなサイトがJamStackに向いてるの？
### どのような技術構成？
### クランチタイマーのコーポレートサイトの技術スタック
## サイトの置き換えは可能？
クライアント側のサイトがWordPressだったら置き換えできるよ。
## おわりに
もしサイト速度で悩んでいたら？
クランチタイマーにお問合せを。

- [ ] リード文(担当: )
- [x] サイトの表示が遅いことで起こる機会損失(担当: 寺岡)
- [x] Jamstackとは何か？(担当: 寺岡)
- [x] 既存のサイトの違い(担当: 寺岡)
- [x] Jamstackのメリットデメリット(担当: 小川->寺岡)
- [x] どんなサイトがJamStackに向いてるの？(担当: 寺岡)
- [x] どのような技術構成？(担当: 省略)
- [x] クランチタイマーのコーポレートサイトの技術スタック(担当: 小川)
- [ ] サイトの置き換えは可能？(担当: )
- [ ] 終わりに(担当: )

以下ブログ内容の記述お願いします。

# タイトル: 未定

## リード文
今回自社のコーポレートサイトをJamStackでリニューアルした。

## サイトの表示が遅いことで起こる機会損失
今回のサイトリニューアルの最も大きな目的は表示速度の向上です．
ここでは，Webサイトの表示速度が遅いことで起こる機会損失について簡単に説明します．

### ユーザビリティの低下
表示速度が遅いことで起こる悪影響として，最も大きいのがユーザビリティの低下でしょう．

最近は昔と比べて速いWebサイトに慣れているユーザーが多いため，内容に興味があったとしても表示速度が遅いと簡単に離脱し，他のサイトに流れていってしまいます．

表示速度の低下はユーザーにストレスを与えるだけでなく，離脱率や回遊率，リピート率などあらゆる指標に悪影響を与え，大きな機会損失に繋がります．

### SEOの低下
表示速度はSEOにも大きく影響します．

2021年にGoogleがWebサイトの検索ランキングを決定するための要素として，Core Web Vitalsと呼ばれる3つの指標を組み込みましたが，その中のLCP（Largest Contentful Paint）とFID（First Input Delay）は表示速度や応答速度が特に大きく関係する指標です．

このように，表示速度の遅いサイトは検索ランキングの上位に表示されにくくなっていることがGoogleによって明言されており，ユーザーとの接点を多く作るという意味でも表示速度が重要になってきています．

## Jamstackとは何か？
Jamstackは，より高速かつ安全かつ高い拡張性を持ったWebサイト/Webアプリを構築できるように設計されたアーキテクチャです．

具体的には，ヘッドレスCMSを用いてコンテンツの作成や管理を行い，SG(SSG)を用いて事前にビルドした静的ページをCDNによって高速に配信するという構成が一般的です．

JamstackのJamはJavaScript・APIs・Markupそれぞれの頭文字からきているそうですが，[公式サイト](https://jamstack.org/what-is-jamstack/)では，コアとなる要素はPre-renderingとdecouplingの2つであると述べられています．

## 既存のWebサイトとの比較
ここでは，Webサイト制作において現在最も一般的であるCMS（WordPressなど）単体の構成と比較していきます．

CMS単体の場合とJamstackの場合それぞれの流れは下図のようになります．

#### CMS単体

#### Jamstack

### ユーザー視点
図中の黄色の矢印はユーザーがサイトを訪問してからページが表示されるまでの流れを表しています．

CMS単体と比較して，Jamstackの場合はデータ取得の行程がないことが分かります．

これは，ユーザーがサイトを訪問する前に，ビルドと呼ばれるデータを取得してHTMLを生成しておく処理（青色の矢印）が行われているためです．

### 管理者視点
図中のグレーの矢印が管理者によるコンテンツ更新作業の流れです．

CMS単体とJamstackで全く違いがないことが分かります．
（ただし，Jamstackの場合，コンテンツの反映には再度ビルド作業が必要です）

管理者は技術に明るくない場合も多いため，CMS単体からJamstackに移行したとしてもコンテンツ更新作業が複雑化しないのは嬉しいですね．

## JAMstackのメリットデメリット
CMS（WordPressなど）単体の構成と比較したときのJamstackの主なメリットとデメリットを紹介します．

### メリット
1. 高速なページ表示が可能
2. セキュリティリスクが低い
3. 大量アクセスに強い

#### 1. 高速なページ表示が可能
Jamstack構成のサイトでは、サイトビルド時に全てのwebサイトのページを静的なページとして作成するため通常のサイトに比べ、サイト表示するためのローディングがなく高速でサイト表示が行えるのが大きなメリットです。

#### 2. セキュリティリスクが低い
Jamstackサイトでは閲覧時に静的ファイルを返すのみであるため，Webサーバーとの通信が発生しません．そのため閲覧者からは記事やユーザーの情報を扱うwebサーバーの特定が困難であり，攻撃を受けるリスクが比較的低いです．

#### 3. 大量アクセスに強い
WordPressサイトのような動的サイトではアクセス毎にWebサーバーにリクエストを送り通信を行う必要がありますが，JamStackサイトではそのような処理は発生せず，事前に用意された静的ファイルを返却するのみであるため，大量アクセスによる負荷がほとんどありません．

### デメリット
1. 動的要素を扱えない
2. ビルドに時間がかかる
3. 開発・変更に専門的なスキルが必要

#### 1. 動的要素を扱えない
動的要素とは，ページにアクセスしたタイミングやユーザーに応じて変動するような要素のことです．例えば，Twitterのように高頻度で更新されるコンテンツをリアルタイムで反映するのは難しいです．
しかし，静的要素がメインであるような一部のページのみJamstack化することも可能ですし，最近では周辺技術の発展によって，動的要素も扱えるように進化してきています．

#### 2. ビルド（静的ページ生成）に時間がかかる
サイトの更新を反映させるためには全ページのビルドを行う必要があり，ページ数が多いほどこの時間は長くなります．
しかし，この問題についても，定期的に自動更新を行ったり，一部の更新があったページのみ再度ビルドを行うような技術が発展しており，時間短縮が進んでいます．

#### 3. 開発・変更に専門的なスキルが必要
Jamstackサイトの開発やサイトデザインの変更には，HTMLやCSSだけでなく，JavaScriptやAPI等に関する専門的な知識が求められます．
（記事の投稿や更新等はWordPress等のCMSを扱うことができれば問題ありません)

## どんなサイトがJamStackに向いてるの？
先に述べたように，Jamstackでは事前にデータを取得し静的ページを生成するという流れになっているため，全てのWebサイト/WebアプリがJamstackに向いている訳ではありません．

Jamstackに向いているWebサイト/Webアプリの特徴としては以下のような項目が挙げられます．

- 静的な要素がメインである
- コンテンツの更新頻度が比較的少ない
- データの更新がリアルタイムに反映される必要がない

具体的には，ブログやコーポレートサイトなどが向いていると言えます．

逆に，TwitterやInstagramのように，動的な要素がメインで，コンテンツの更新頻度が高く，データの更新がリアルタイムに反映される必要があるようなWebサイト/Webアプリは基本的にはあまり向いていないでしょう．
※ISR(Incrimental Static Regeneration)などの機能を使えば実現可能な場合もあります

## クランチタイマーのコーポレートサイトの技術スタック
クランチタイマーでは、フロントエンドをNext.js、バックエンドをWordpress、データ取得方法をGraphQLを使用しています。

### フロントエンドの技術
フロントエンド側では、なるべくリアルタイムのデータをユーザーに表示するために、SSG(静的サイトジェネレーション) + Pre fetch + ISR (Increment Static Regeneration) + client side fetching(useSWR)の構成をとっています。
SSG + Pre fetchでは、初めのサイトデプロイ(ビルド時)にWordpress側からデータを取得してき、全ての静的ページを作成します。静的ページなのでサイト表示は非常に早くなります。しかし、管理者が新しいブログなどを投稿した際データはWordpress側では存在するが、サイト側では反映されずユーザーには見えない、という状態になってしまいます。その問題を解決するのが、ISR(Increment Static Regeneration)とclient side fetching(useSWR)です。
ISRでは、Next.js側で設定した間隔でサイトを自動で再ビルドすることができ(厳密には少し異なりますが)、管理者が新しいブログを追加したとしても、いづれはサイトに反映されユーザーに見てもらうことができます。
それでも、ISRだけでは自動ビルドが行われる前に訪れたユーザーに対しては最新のデータを届けることができません。そこで、client side fetching(useSWR)の出番です。client side fetchingでは、ユーザーがサイトを表示したタイミングで、wordpressnにデータを取得してき、最新のデータをサイトに表示することができます。
これらの技術を集約しクランチタイマーのコーポレイトサイトは、なるべく最新のデータを、サイトのちらつきを抑えユーザーに提供するようにしております。

### バックエンドの技術
バックエンドではwordpressを使用しており、これまでのwordpressのプラグインを使用し「お問い合わせページ」、「SEO」対策なども行なっております。また、ブログ投稿もこれまでとは変化はないので、エンジニアでない方でも簡単にデータの投稿、編集が可能です。

## サイトの置き換えは可能？
WordPressだったら置き換えできるよ。

## 終わりに
もしサイト速度で悩んでいたら？
クランチタイマーにお問合せを。