React 初心者が やってみた Gatsby ゆるWeb勉強会@札幌 / OnLine #20 2022/08/29 木原卓也 / @tacck 1 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

私 • 名前 • 木原 卓也 / @tacck • 主催コミュニティ • ゆるWeb勉強会@札幌 • スマートスピーカーで遊ぼう会@札幌 (休眠中) • 参加コミュニティ • Amplify Japan User Group 運営 • AWS Community Builders Program (Q2 2021, 2022) • 好きなフィギュアスケートの技 • スプレッド・イーグル 2 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

お品書き • まずは静的サイトジェネレータについて • 静的サイトジェネレータの前に • 静的サイトジェネレータ • Why Gatsby • Gatsby 使ってみた 3 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

静的サイトジェネレータ の前に 4 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

最近の流行語 SSR / SSG / CSR • SSR (Server-Side Rendering) • ブラウザからのアクセスごとに、Webサーバで HTML(などブラウザに返却す るデータ) を逐一生成。 • SSG (Server-Side Generation) • デプロイ時に、サーバで HTML(などブラウザに返却するデータ)を生成して Webサーバに配置。 • CSR (Client-Side Rendering) • ブラウザからのアクセスで、まず生成済みのHTMLを返却。 その後、ブラウザから逐一Webサーバにデータを取りに行き、ブラウザがペー ジを動的に更新。 • SPA (Single Page Application)はこのタイプ。 5 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

SSR / アクセスごとにページ生成 1. ブラウザからWebサーバ へアクセス 2. WebサーバがDBなどか ら情報を取得 3. 取得した情報をもとに返 却するHTMLデータを生 成 4. ブラウザへHTMLデータ を返却 6 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

SSG / 事前にページ生成 1. WebサーバがDBなどか ら情報を取得 2. 取得した情報をもとに返 却するHTMLファイルを事 前に生成 3. ブラウザからWebサーバ へアクセス 4. ブラウザへ事前に生成し ていたHTMLファイルの データを返却 7 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

CSR / ブラウザで都度ページ更新 1. Webサーバへ事前に HTMLファイルを配置 2. ブラウザからWebサーバへ アクセス 3. ブラウザへ事前に配置して いたHTMLファイルのデー タを返却 8 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

CSR / ブラウザで都度ページ更新 4. ブラウザからWebサーバへ APIアクセス 5. WebサーバがDBなどから 情報を取得 6. 取得した情報をもとに生成 したJSONデータを返却 7. ブラウザは受け取ったデー タをもとに画面更新 9 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

良し悪し SSR / SSG / CSR 10 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌 長所 短所 SSR (s) ユーザー別ページなど、区分けしたいページに 使える。 (c) 常に最新のデータを使ってページ生成できる。 (s) アクセスごとにページ生成するため、サーバに 負荷がかかる。 (c) ページ取得に時間がかかる可能性が高い。 SSG (s) ページデータ返却の時のサーバ負荷が低い。 (c) ページ取得に時間がかからない(場合が多 い)。 (s) 事前のページ生成に時間がかかる可能性が ある。 (c) ページ生成時のデータしか使えないので、動 的ページには使用できない。 CSR (s) ベースは事前に作成済みのため、初回の通信 のサーバ負荷は低い。 (s) 別途ページ更新用データを送れるので、ペー ジの区分けや最新データ送付、といったSSR/SSG の良いとこどり。 (c) SPAなど、ページ更新において体験の良い サービスを受けられる可能性がある。 (s) ページの完成までに通信が増える。 (c) ページの完成までに、クライアントのマシンに 負荷がかかる。

使い所 SSR / SSG / CSR • SSR • いわゆるWebシステム向き。 • バックエンドのフレームワークで開発する形。 • フロントから行く場合、SEO対策(クローリング向き)で欲しいことも。 • 少なくとも Google のクローラーは JS 対応しているようなので、この辺りは専門の方に聞き たい。 • SSG • いわゆるWebサイト向き。 • 誰に対しても同じものを見せたい、一度ページを作ったら変化しない、というサイトやブログな どで使いたい。 • CSR • SPA で実現するWebシステム向き。 • うまくつくれば、ユーザーの体感待ち時間を減らせる。 11 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

静的サイトジェネレータ 12 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

静的サイトジェネレータ • 何らかのデータに対して • 何らかの力を使って • HTML/CSS/JS などの 静的ファイルで構成されたサイトに変換するもの 13 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌 何らかの データ HTML CSS JS 何らかの 力 HTML CSS JS HTML CSS JS

静的サイトジェネレータ • 静的サイトジェネレータ • Static Site Generator • SSG • 先に説明した SSG (Server-Side Generation) と役割も同じ 14 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

静的サイト の対義語? • 静的サイトの対義語は “動的サイト” • 先の “SSR” は、元々動的サイトの仕組み。 • JavaScriptが発展し、ブラウザ(クライアント)での 画面描画が行われるようになったことで、 “CSR” という概念が必要になり、 それと対比する形で “SSR” や “SSG” という言葉が 再定義されたのだと思います。 (個人の感想) 15 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

静的サイトジェネレータ • HTMLを生成する「何らかの力」は、各種言語で色々ある。 • 自分の知っているもの中心で以下など。 • そんな色々ある中で、今回は Gatsby を選択。 16 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌 ⾔語 ツール名 Go Hugo Ruby Jekyll Python Hyde PHP Jigsaw

Why Gatsby ? 17 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

Gatsby を選んだ理由 • React ベースの静的サイトジェネレータを使いたかった。 • 以前 Vue 中心にやっていたときは、 VuePress を使っていた。 • React を使い始めたので、 React ベースの 静的サイトジェネレータを使ってみようと思って選択。 18 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

Vue ベース と React ベース • 私の知っている範囲で、代表的そうなもの。 • CMS (SSG) • シンプルにテキスト中心のサイトを構築できるもの。 • サイトの見せ方は、比較的拡張性が低い。 • CMS Framework (SSG) • サイトごとにカスタマイズを行いやすい。 • 自分でサイトデザインが必要なので、定型で良い場合には手間。 • Application Framework (SSR / SSG / CSR) • 動的要素の多いWebアプリケーション構築向き。 19 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌 Vue ベース React ベース CMS VuePress ? CMS Framework Gridsome Gatsby Application Framework Nuxt.js Next.js

Gatsby を選んだ 真の 理由 • React ベースの静的サイトジェネレータを使いたかった。 • 以前 Vue 中心にやっていたときは、 VuePress を使っていた。 • React を使い始めたので、 React ベースの静的サイトジェネレータを使って みようと思って選択。 • VuePress に相当するものがわからなかったので、 必然的に Gatsby を選択せざるを得なかった。 20 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

Gatsby 使ってみた 21 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

Gatsby を使う前に • React ベースの CMS Framework なので、 React の知識は必須。 • 少なくとも、 React でデザインを書き下せるくらいは必要。 • Next.js も多少かじっておくと、 Framework としての動きや ファイルの配置などを理解しやすくなる。 22 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌 React チュートリアル React ページ 作成 Next.js チュート リアル Next.js システム 作成 Gatsby チュート リアル Gatsby サイト 作成 お勧めのステップ (Next.js は無くても良い)

Gatsby で作ってみたサイト 23 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌 https://www.tacck-work.net/

Gatsby の特徴 • React ベース • デザインは自分で (Reactで書く) • 入力元になるデータソースをプラグインで選択 • ローカルファイル(Markdown) • WordPress / MicroCMS /Contentful ... • デザインやプラグインなどをセットにした スターターライブラリー もある • ファイル配置やプラグインの使い方の参考に。 24 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

Gatsby やってみての感想 結論: 次はブログを Gatsby で作り替えてみよう その他感想 • そもそものデザイン力が必要だった。 (“CMS” ではなく “CMS Framework” なので。) • スターターライブラリーは、あくまで参考。 自分の作りたいものと、必ずしもフィットしない。 • プラグイン豊富だが、 Gatsby 自体のバージョンアップに 追随できてないものもある。 • Google Analytics 系がハマらなかった。 25 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌

終 26 ゆるWeb勉強会@札幌 OnLine #20 / #ゆるWeb札幌