# 8/9 WordPressから静的サイトジェネレータへ

# 今週読んだ本
- [Webサイト高速化のための　静的サイトジェネレーター活用入門 | マイナビブックス](https://book.mynavi.jp/ec/products/detail/id=115483)
- [Vue.js&Nuxt.js超入門 - 秀和システム](https://www.shuwasystem.co.jp/book/9784798056593.html)

# 今週わかったこと
- JSフレームワークで頻出する用語について
- 特に、SSG ( Static Site Generator )
- 他には
- SPA ( Single Page Application )
- SSR ( Server Side Rendering )
- PWA ( Progressive Web Apps )
- JAMstack ( JavaScript, API, Markup )
- 何も分からんから何となく分かるレベルに
- GatsbyJS, NextJS, Nuxtの違い
- VueとNuxtの違い（何が拡張されるのか）

# 動機
- 趣味で作っているWebアプリに適したインフラ構成を調べていて、SSGを使えるJSフレームワークが良さそうということが分かったため（特にサーバーコストが安い点）

# 静的サイトと動的サイト
- 
- 
- （https://miiko315.net/1005.html）
- 
- （https://gihyo.jp/book/pickup/2018/0030）

# 阿部寛のサイトと比べてSSGは何が優れているのか
- 画像表示を最適化（高速化）できる
- https://gatsby-essentials-5.netlify.app/
- Single Page Applicationである
- ページ遷移したときにHTML全体を再読込するのではなく一部のみを書き換える。よって切り替えが速い
- PWA対応が容易
- オフライン時でもキャッシュを利用してページを表示
- プッシュ通知

# WordPressと比べてSSGは何が優れているのか
- 表示がとにかく速い
- SPAで構築できる
- アプリケーションサーバ、DBサーバが不要
- コスト削減
- セキュリティ強化
- JSライブラリを導入しやすい

# ブログサイト更新の流れ
## WordPressの場合
- テーマもプラグインもコンテンツも基本的にすべて管理画面上で編集する

## Gatsbyの場合
- 
- コンテンツは contentful というCMSのクラウドサービスを使う
- WPのコンテンツ管理画面にあたる部分を提供する
- コンテンツ更新がフックとなり、 Netlify でビルドが開始されてHTMLが更新される
- Netlifyはホスティングサーバ機能とCI機能の両方を有している
- テーマやプラグインは開発環境で追加し、GitHubへのプッシュがフックとなり、Netlify でビルドが開始されてHTMLが更新される

# SSGに向いているサイト
- ランディングページ
- ブログ

# 向いていないサイト
- データの更新が頻繁なサイト
- ニュースサイトなど
- 更新のたびにビルドする必要があるので、1日数回までが望ましい
- 管理者以外のユーザがデータの更新を頻繁に行うようなアプリ
- SNSや掲示板など

# 向いていないサイトはどう作るか
- Nuxt ( or Next ) + API + DB の構成（動的サイト+SPA）で作ることになる
- GatsbyJSはSSGに特化したフレームワークで、動的化にはあまり向かない

# 所感
もともとは趣味アプリのための技術調査だったが、
- Designruleコーポレートサイト → GatsbyJS
- 防災アプリフロント側 → Nuxt

などを使って作れたら面白いなと思った

# おまけ
## Gatsbyで作られているサイト
- [CalorieMate to Programmer | 大塚製薬](https://www.otsuka.co.jp/cmt/to_programmer/)
- [React 公式ドキュメント](https://ja.reactjs.org/docs/getting-started.html)
- [Email Delivery Service | SendGrid](https://sendgrid.com/)

## Nuxt
- [都内の最新感染動向 | 東京都 新型コロナウイルス感染症対策サイト](https://stopcovid19.metro.tokyo.lg.jp/)
- [note ――つくる、つながる、とどける。](https://note.com/)
- [Fox News - Breaking News Updates](https://www.foxnews.com/)

## Next.js
- [メルカリ スマホでかんたん フリマアプリ](https://www.mercari.com/jp/)
- [Stream TV and Movies Live and Online | Hulu](https://www.hulu.com/welcome)
- [TikTok - Make Your Day](https://www.tiktok.com/en)
- [Twitch](https://m.twitch.tv/)

# 参考サイト
- [Next.js と Gatsby の比較 | gotohayato.com](https://gotohayato.com/content/511/)
- [Nuxt.js + Netlifyで爆速構築するサーバーレス開発入門 - Qiita](https://qiita.com/isihigameKoudai/items/e3b136e9964f1d30d73d#ssg--static-site-generator-)
- [JSフレームワーク事情2020年始め｜erukiti｜note](https://note.com/erukiti/n/na654ad7bd9bb#PArTE)
- [StaticGen | Top Open Source Static Site Generators](https://www.staticgen.com/)
- [静的サイトジェネレーター Gatsby - Qiita](https://qiita.com/umamichi/items/9bd08a21fddc71588efc)