React 初心者がやってみた Gatsby #ゆるWeb札幌

ゆるWeb勉強会@札幌 OnLine #20 での発表資料
https://mild-web-sap.connpass.com/event/256909/

Gatsby を触ってみた感想と、用語の説明。

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. 最近の流行語 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札幌
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. 良し悪し 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) ページの完成までに、クライアントのマシンに
    負荷がかかる。
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide