注目のアーキテクチャ、JAMstackってなんだろう？ / What-is-JAMstack

はじめてのIT勉強会 in 仙台（2021.03.24）
学生LTの発表資料です。
JAMstackアーキテクチャの概要や仕組みについて解説しました。

Transcript

1. 注目のアーキテクチャ JAMstackってなんだろう？ はじめてのIT勉強会(2021/3/24) by @Co9xsR
2. 自己紹介 LPなどの制作からWebアプリ開発までいろいろやってます。 好きな言語：JavaScript, TypeScript, React, etc... 所属：東北大学 経済学部3年 しま / Ryo Fujishima Web Frontend Engineer
3. 突然ですが、JavaScriptは好きですか？
4. JAMstack is 何？ JAMstackのJAMはJavaScript, API, Markupの略称。 Webサイトにおいて、JavaScriptを使ってAPIにアクセスし、 JSONを元に生成された静的なMarkupファイル (HTML,CSS,JS等)だけを配信するアーキテクチャ。 簡単にいうと、「動的なコンテンツを含むサイトを静的サイトと して配信する仕組み」のことです。
5. なるほど、分からん...？?
6. 動的コンテンツを 静的に配信ってどういうこと？
7. WordPressの場合 ①ユーザーがアクセス ②DBに記事データを要求 ③DBから取得した情報を もとに静的ファイルを構築 ④静的ファイルを返却ブ ラウザで閲覧 閲覧者 データベース WordPressが入ったサーバー ユーザーにWordPressサイトが表示される仕組み つまり、リクエストがあるたびにPHPが動いてDBへのアクセスやHTMLの構 築を行っている
8. JAMstackの場合 ①ユーザーがアクセス ②静的ファイルを返却 ブラウザで閲覧 閲覧者 ホスティングサーバー ユーザーにJAMstackなサイトが表示される仕組み リクエストがあると、静的ファイルを返却するだけ
9. これだけ？ じゃあ記事のデータは どこから持ってくるのだろう？
10. JAMstackのデータの動き ①ユーザーがアクセス ②静的ファイルが返却 ブラウザで閲覧 閲覧者 ホスティングサーバー ①JavaScriptでアクセス ④JSONを返却 ②DBに記事データを要求 ③記事データを返却 APIサーバー データベース ⑥静的ファイルをデプロイ ⑤JSONをもとに静的ファ イルを構築 SSG対応フレームワーク
11. JAMstackのデータの動き ①ユーザーがアクセス ②静的ファイルが返却 ブラウザで閲覧 閲覧者 ホスティングサーバー ①JavaScriptでアクセス ④JSONを返却 ②DBに記事データを要求 ③記事データを返却 APIサーバー データベース ⑥静的ファイルをデプロイ SSG対応フレームワーク ⑤JSONをもとに静的ファ イルを構築 事前のビルド時に行われる
12. で、JAMstackにすると 何が嬉しいのか？
13. JAMstackのメリット - 表示が早い（高パフォーマンス） - 料金が安い - 開発体験が良い
14. メリット1 - 表示が早い WordPressで作ったブログ https://shimablogs.com/ JAMstackな技術で作ったブログ https://fujishima.dev/blog 静的ファイルを返却しているだけなのでとにかく表示が早い！
15. メリット2 - 料金が安い WordPressサイトの場合 - サーバー代　約1,500円/月 - ドメイン代　約1,000円/年 JAMstackなサイトの場合 - サーバー代　無料！※ - ドメイン代　約1,000円/年 ※静的サイトのホスティングは、個人利用の範囲なら無料のサービスも多い 例) Vercel, Netlify
16. メリット3 - 開発体験が良い - 記事などの動的コンテンツはAPIから取ってくるので、フロ ント側は自由にカスタマイズできる。 - 静的なLPの一部分だけブログのような更新可能なコンテ ンツにしたりも可能 - 技術スタックも柔軟なので、モダンな技術の練習にも最適
17. JAMstackなサイト構築に必要なもの ①ヘッドレスCMS 記事の入稿に使うエディターと記事データのAPIを提供してくれる。記事を表示 する機能は提供しないので、ヘッドレスと呼ばれる。 例）Contentful, microCMS ②SSG(Static Site Generation)対応のフレームワーク APIからとってきたデータから静的ファイルを生成してくれるフレームワーク 例）Next, Nuxt, Gatsby ③ホスティングサーバー 生成済みの静的ファイルを公開するためのサービス 例）Netlify, Vercel, FirebaseHosting
18. まとめ - JAMstackは早い、安い、楽しい！ - 既存のサービスを組み合わせることで比較的簡単に構築できる - WordPressとは適材適所な印象
19. 参考 - https://jamstack.org/ - Jamstackって何なの？何がいいの？ - Qiita - microCMS + Next.jsでJamstackブログを作ってみよう
 

20. ご静聴ありがとうございました！