【オンライン】エンジニア達の「〇〇完全に理解した」Talk　#10 https://easy2.connpass.com/event/190477/ 上記イベントの登壇資料です じわじわきている静的サイトジェネレータのGatsby.jsを紹介しています

1. atsby.js
2020.10.29 エンジニア達の「〇〇完全に理解した」Talk #10
@ROM専
完全に理解した

2. 自己紹介します @ROM専
@rom1000_yksbpn
@rom1000_onigiri
で働くフロントエンドやる人です
婚活はIBJで！https://www.ibjapan.com/
かくいう私は最近おひとり様になりまして、
フラれた原因は「重たすぎる」
サイトのパフォーマンス改善するよりも、
自分のパフォーマンス改善していこうな ……
毎週金曜日は銭湯の日 ♨
サウナでととのうのにハマって、自分用サウナマット買ってしまった
都内でおすすめの銭湯＆サウナあったら教えてください mm

3. atsby.jsとは？？

4. Reactベースで作られた、
静的サイトジェネレータ

5. Reactベースで作られた、
静的サイトジェネレータ
サイト内のデータを取得するのには、GraphQLを用います
なので、Markdown、データベース、各種CMSから柔軟にデータを
取得することができます
https://www.gatsbyjs.com/

6. 01. 生成されるサイトはSPA
02. 表示が超爆速
03. 自動で画像の最適化が行われる
04. プラグインが豊富
atsby.jsの良さ

7. atsby.jsの良さ
01. 生成されるサイトはSPA
02. 表示が超爆速
03. 自動で画像の最適化が行われる
04. プラグインが豊富
React製のジェネレータなので、
Gatsbyでビルドされたページは、
SPAとして動作します
もちろん、React用で作ったコンポー
ネントも、Gatsbyでも流用することが
できます

8. 01. 生成されるサイトはSPA
02. 表示が超爆速
03. 自動で画像の最適化が行われる
04. プラグインが豊富
静的なページを事前にビルドして、そ
れをwebサーバにホストしているの
で、クライアントの要求から迅速に返
すことができます
また、SPAなので必要な部分だけレン
ダリングされ、画面遷移も爆速
atsby.jsの良さ

9. 01. 生成されるサイトはSPA
02. 表示が超爆速
03. 自動で画像の最適化が行われる
04. プラグインが豊富
様々なデバイスに応じて画像を調整…
面倒ですよね
Gatsbyは標準で、デバイスに合わせ
て画像を最適化（リサイズ、圧縮、遅
延読み込み）してくれる機能があるの
で、煩雑な設定をする作業が省けま
す
atsby.jsの良さ

10. 01. 生成されるサイトはSPA
02. 表示が超爆速
03. 自動で画像の最適化が行われる
04. プラグインが豊富
なんと2,000を超えるプラグインが公
開されているそうです
用途に合わせてプラグインを導入し
て、簡単かつ柔軟にサイト制作するこ
とができます
後ほど個人的に良かった＆気になる
プラグインを紹介します！
atsby.jsの良さ

11. いざ！環境構築！

12. $ npm install --save-dev gatsby-cli
Gatsbyをインストール
$ gatsby new [プロジェクトディレクトリ名] [スターターのURL]
プロジェクトの作成
$ gatsby develop
開発サーバーを建てる
https://www.gatsbyjs.com/starters/

13. $ npm install --save-dev gatsby-cli
Gatsbyをインストール
$ gatsby new [プロジェクトディレクトリ名] [スターターのURL]
プロジェクトの作成
$ gatsby develop
開発サーバーを建てる
https://www.gatsbyjs.com/starters/以上！

14. localhost:8000に接続してみると…👇

15. localhost:8000に接続してみると…👇
Gatsby自体はwebpackでコンパイルされていま
すが、基本的に使う分にはconfigファイルをいじ
いじする必要はありません！
（プラグインを入れたらいじいじしてね）
Production（本番）用にビルド
Production（本番）用の確認
$ gatsby build
$ gatsby serve

16. 設定ファイル
プラグイン入れたときや、
標準機能をカスタマイズしたいときに
編集するファイル
ビルドされたファイル格納先
ビルドされたページや、
コンパイルされた各種ファイルが入るディ
レクトリ
編集ファイル格納元
各種コンポーネントやコンパイルしたいファ
イルを入れとくディレクトリ
画像とかscssとか諸々

17. srcディレクトリの中身
Reactの基本お作法そのままの感じ
コンポーネントとか、
画像ファイルとか、
ページデータとか、
scssファイルとか………

18. 良かった＆気になるPlugin
gatsby-source-esa
gatsby-source-wordpress
wordpressをヘッドレスCMSにできちゃうプラグイン
利用するにはwordpress側にもREST APIプラグインを入れとく必要があります
今まさに仕事で担当している wordpressをヘッドレス化しようと企んでます
弊社でも社内wikiとして採用しているesaを簡易CMSにできちゃう…？と聞いて
気になってるプラグイン
記事はマークダウンでサクサク書けるし、タグもつけられるし、 esa自体の機能的
にもシンプルだし、自分のブログを簡単に作りたい方におすすめかも

19. ● 簡単な環境構築で初心者でもささっとGatsby体験できる！
● 嬉しい機能が標準搭載
● SSR的なビルドで、なにより爆速！
まとめ
atsby.jsって素晴らしい🎉

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