Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gatsby.js完全に理解した

【オンライン】エンジニア達の「〇〇完全に理解した」Talk #10
https://easy2.connpass.com/event/190477/

上記イベントの登壇資料です
じわじわきている静的サイトジェネレータのGatsby.jsを紹介しています

  • Be the first to comment

  • Be the first to like this

Gatsby.js完全に理解した

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

  2. 2. 自己紹介します @ROM専
 @rom1000_yksbpn @rom1000_onigiri で働くフロントエンドやる人です 婚活はIBJで!https://www.ibjapan.com/ かくいう私は最近おひとり様になりまして、 フラれた原因は「重たすぎる」 サイトのパフォーマンス改善するよりも、 自分のパフォーマンス改善していこうな …… 毎週金曜日は銭湯の日 ♨ サウナでととのうのにハマって、自分用サウナマット買ってしまった 都内でおすすめの銭湯&サウナあったら教えてください mm
  3. 3. atsby.jsとは??
  4. 4. Reactベースで作られた、 静的サイトジェネレータ
  5. 5. Reactベースで作られた、 静的サイトジェネレータ サイト内のデータを取得するのには、GraphQLを用います なので、Markdown、データベース、各種CMSから柔軟にデータを 取得することができます https://www.gatsbyjs.com/
  6. 6. 01. 生成されるサイトはSPA 02. 表示が超爆速 03. 自動で画像の最適化が行われる 04. プラグインが豊富 atsby.jsの良さ
  7. 7. atsby.jsの良さ 01. 生成されるサイトはSPA 02. 表示が超爆速 03. 自動で画像の最適化が行われる 04. プラグインが豊富 React製のジェネレータなので、 Gatsbyでビルドされたページは、 SPAとして動作します もちろん、React用で作ったコンポー ネントも、Gatsbyでも流用することが できます
  8. 8. 01. 生成されるサイトはSPA 02. 表示が超爆速 03. 自動で画像の最適化が行われる 04. プラグインが豊富 静的なページを事前にビルドして、そ れをwebサーバにホストしているの で、クライアントの要求から迅速に返 すことができます また、SPAなので必要な部分だけレン ダリングされ、画面遷移も爆速 atsby.jsの良さ
  9. 9. 01. 生成されるサイトはSPA 02. 表示が超爆速 03. 自動で画像の最適化が行われる 04. プラグインが豊富 様々なデバイスに応じて画像を調整… 面倒ですよね Gatsbyは標準で、デバイスに合わせ て画像を最適化(リサイズ、圧縮、遅 延読み込み)してくれる機能があるの で、煩雑な設定をする作業が省けま す atsby.jsの良さ
  10. 10. 01. 生成されるサイトはSPA 02. 表示が超爆速 03. 自動で画像の最適化が行われる 04. プラグインが豊富 なんと2,000を超えるプラグインが公 開されているそうです 用途に合わせてプラグインを導入し て、簡単かつ柔軟にサイト制作するこ とができます 後ほど個人的に良かった&気になる プラグインを紹介します! atsby.jsの良さ
  11. 11. いざ!環境構築!
  12. 12. $ npm install --save-dev gatsby-cli Gatsbyをインストール $ gatsby new [プロジェクトディレクトリ名] [スターターのURL] プロジェクトの作成 $ gatsby develop 開発サーバーを建てる https://www.gatsbyjs.com/starters/
  13. 13. $ npm install --save-dev gatsby-cli Gatsbyをインストール $ gatsby new [プロジェクトディレクトリ名] [スターターのURL] プロジェクトの作成 $ gatsby develop 開発サーバーを建てる https://www.gatsbyjs.com/starters/以上!

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

  15. 15. localhost:8000に接続してみると…👇
 Gatsby自体はwebpackでコンパイルされていま すが、基本的に使う分にはconfigファイルをいじ いじする必要はありません! 
 (プラグインを入れたらいじいじしてね) 
 
 Production(本番)用にビルド 
 
 
 Production(本番)用の確認 
 $ gatsby build $ gatsby serve
  16. 16. 設定ファイル
 プラグイン入れたときや、
 標準機能をカスタマイズしたいときに
 編集するファイル
 ビルドされたファイル格納先
 ビルドされたページや、
 コンパイルされた各種ファイルが入るディ レクトリ
 編集ファイル格納元
 各種コンポーネントやコンパイルしたいファ イルを入れとくディレクトリ
 画像とかscssとか諸々

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

  18. 18. 良かった&気になるPlugin gatsby-source-esa gatsby-source-wordpress wordpressをヘッドレスCMSにできちゃうプラグイン 利用するにはwordpress側にもREST APIプラグインを入れとく必要があります 今まさに仕事で担当している wordpressをヘッドレス化しようと企んでます 弊社でも社内wikiとして採用しているesaを簡易CMSにできちゃう…?と聞いて 気になってるプラグイン 記事はマークダウンでサクサク書けるし、タグもつけられるし、 esa自体の機能的 にもシンプルだし、自分のブログを簡単に作りたい方におすすめかも
  19. 19. ● 簡単な環境構築で初心者でもささっとGatsby体験できる!
 ● 嬉しい機能が標準搭載
 ● SSR的なビルドで、なにより爆速!
 まとめ
 atsby.jsって素晴らしい🎉
  20. 20. ご静聴
 ありがとうございました!


×