JAMStackなサイトをつくる案件をしてみて感じた利点

以下ページの転載になります。ご了承ください。

[JAMStackなサイトをつくる案件をしてみて感じた利点 - Yuto Hongo Portfolio](https://hongo.dev/blog/benefit-jamstack)

---

[<u>こんなひとにおすすめ</u>]


- JAMStackの基本をある程度知りたい方
- JAMStackの一般的な利点を知りたい方
- JAMStackの案件を実際やっている人の実例をみてみたい方

実際に4つのJAMStack案件に携わった私が、実際に感じた利点を読んでいただきたいです。


---


[<u>目次</u>]

- JAMStackとは
- JAMStackのなにが嬉しいのか？（一般論）
- __筆者が実際にJAMStack案件を実施してみて感じた最大の利点は「運用でのリソース監視場所が極端に減る」こと__
- 運用リスクが低減したことで起こった私の変化
- まとめ：JAMStackの利点

---


## JAMStackとは

### 公式はなんと言っている？

公式ページを見てみます。
 
>When we talk about “The Stack”, we no longer talk about operating systems, specific web servers, backend programming languages, or databases.
>
>引用：[https://jamstack.org/](https://jamstack.org/)

「OS、特定のWebサーバー、バックエンドのプログラミング言語、データベースについて話しません。」との記載があります。

「Webアプリって、上記の技術ありきで成立してませんでしたっけ？？」と思うような記述がありました。

### WebアプリケーションとJAMStackの比較
#### Webアプリケーションの場合

![benefit-jamstack-01](//images.ctfassets.net/yyxwl1h0rr37/5PUhceqbZGvKbt1gt7ukHd/d4999f38e0e408fd2ddd688cb30525cd/JAMStack.002.png?w=720&q=20)

毎度、「ブラウザ ⇄ サーバー処理 ⇄ データストア」とやりとりしていました。

#### JAMStackの場合

![benefit-jamstack-02](//images.ctfassets.net/yyxwl1h0rr37/4x0aDB3AYywaCDUUpnsxc1/f9294b3199bb5e727cbaa2b103dc1d7f/JAMStack.003.png?w=720&q=20)

クライアントとのやり取りは「ブラウザ ⇄ ファイル置き場」 のみとなってます。

それに必要なものは事前に全部ビルドし終えて乗っけている形となります。

> 参考：[Jamstackって何なの？何がいいの？
](https://qiita.com/ozaki25/items/4075d03278d1fb51cc37)

### JAMStack実現に必要なもの

上記の図に当てはめてみると、以下のような登場人物が必要になります

![benefit-jamstack-03](//images.ctfassets.net/yyxwl1h0rr37/QM8b2WQix4wzQ59OYFqKg/a4a16f32bfe3c938490c762e3334871f/JAMStack.004.png?w=720&q=20)

#### ヘッドレスCMS
- 入稿フォームが簡単に作成でき、データの蓄積が容易
- __蓄積したデータを利用できるAPIの準備が容易__ 

#### 静的サイトジェネレーター
- 入稿したデータをAPIから取得し、 __ページを作成を容易にしてくれる__ フレームワーク

#### ホスティングサービス
- 準備できた静的サイトを配信する場所


## JAMStackのなにが嬉しいのか？（一般論）

>Why the Jamstack?
>
> - Better Performance
> - Higher Security
> - Cheaper, Easier Scaling
> - Better Developer Experience
> 
> 引用：[https://jamstack.org/](https://jamstack.org/)


公式に書いてありますが、およそ2種類に分けられているのではと考えます。

>- よりよい性能
>- より高いセキュリティ
>- 安価でかんたんなスケーリング

↑　ホスティング前にすべてビルドしたものを容易することから

> - 開発者エクスペリエンスの向上 

↑　データストックとページ生成の役割を分離したことから

ここは、仕組みがわかっていればけっこう合点が行くとおもいますので、ぜひ公式サイトをご覧ください。

## 筆者が実際にJAMStack案件を実施してみて感じた最大の利点は「運用でのリソース監視場所が極端に減る」こと

やっと1番伝えたい点まできました。


>- 安価でかんたんなスケーリング


上記に該当することだとは思うのですが、Webアプリの監視対象とリスクを、いままでのWebアプリケーションとJAMStackで比較してみました。


### Webアプリケーションの場合のリソース監視

![benefit-jamstack-04](//images.ctfassets.net/yyxwl1h0rr37/7jwOaXurzCOWPbuISxbZA/4ea866360c7b98ba05b6651151e15826/JAMStack.005.png?w=720&q=20)

リソース監視の特徴

- Webサーバーでの処理が高負荷になって落ちたら __DEAD__
- Databaseの処理が重たくなって落ちたら __DEAD__

### JAMStackの場合のリソース監視

![benefit-jamstack-05](//images.ctfassets.net/yyxwl1h0rr37/xmPgTRcTHTPZtreCellU1/a110eb4c67146aacdcdc49750ccf9e5d/JAMStack.006.png?w=720&q=20)

リソース監視の特徴

- ホスティングサービスが死んだら同じくDEADだが、 __静的ファイルおいてあるだけのサーバーが落ちる気がしない__ __ALIVE__
- ヘッドレスCMSなどのデータストアが死んだとしても、あたらしいコンテンツが更新されないのはあるが、 __いままでの記事までの状態でサイトは落ちることはない__ __ALIVE__

## 運用リスクが低減したことで起こった私の変化

2018年から個人事業を本業の横で実施してきました。その中での仕事の幅が増えました。

### JAMStackを知る前

ずっと__納品するだけの案件しか実施してきませんでした。__ 

- LP制作
- メディア入稿用のMarkup

理由は、__平日フルタイムで業務を持っている私が有事の際、お客様に早急な障害対応を実施し、サービスレベルを維持する自信がなかったから__です。


### JAMStackを知ってから

しっかりと自信をもって、以下のような__サービスを継続的に運用する必要がある案件__にも携わることができました。

- コーポレートサイト
- ブログ
- メディア（問い合わせがコンバージョンとなるサイト）
- （ついでに自分のサイト）

## まとめ：JAMStackの利点は多い

公式サイトより

|  利点  |  理由  |
| ---- | ---- |
|  よりよい性能 |バックエンドの処理がおわってからのレンダリングじゃない|
|より高いセキュリティ | サーバー側のプロセスがない |
| 安価でかんたんなスケーリング | 静的ファイルを提供することのみに注力すればよい|
|開発者エクスペリエンスの向上  | データストアと疎結合でやりやすい

個人的な経験から


|  利点  |  箇所  | 理由| 
| ---- | ---- | --- |
| 運用でのリソース監視場所が極端に減る | ホスティングサーバー |ファイルおいてあるだけなので__リスク低__
| | データストア | 障害が起きても __既存のサイトは死なない__ | 

---

最後までお読みいただき、誠にありがとうございます。様々なことを学んでいきたいと思っていますので、アドバイス等いただけると幸いです。