Tweet
Tweet

Slide 1

Slide 1 text

Gatsby.js布教計画 NGK2020S 昼の部 LT⼤会 hpp(@osaremochi) NGK2020S Contact Copyright © 2019hppRC

Slide 2

Slide 2 text

だれ？ hpp 名古屋⼤学情報学部コンピュータ科学科 3 年 GitHub: hppRC Qiita: hppRC Twitter: @osaremochi NGK2020S Contact Copyright © 2019hppRC

Slide 3

Slide 3 text

だれ？ 趣味で React とか Go とか Rust とか 学⽣実験でコンパイラを書いたり AtCoder ⽔(1269) Gatsby.js Maintainer NGK2020S Contact Copyright © 2019hppRC

Slide 4

Slide 4 text

今⽇話したいこと NGK2020S Contact Copyright © 2019hppRC

Slide 5

Slide 5 text

JAMStack Gatsby.js NGK2020S Contact Copyright © 2019hppRC

Slide 6

Slide 6 text

JAMStack って? Netlify の創業者が提唱した 新しいアーキテクチャ JavaScript APIs Markdown NGK2020S Contact Copyright © 2019hppRC

Slide 7

Slide 7 text

JAMStackとは よくある「動的」な処理を外部に移した静的な Web サイトの構成 サーバに依存しないフロントエンドの技術構成 NGK2020S Contact Copyright © 2019hppRC

Slide 8

Slide 8 text

なるほど NGK2020S Contact Copyright © 2019hppRC

Slide 9

Slide 9 text

Gatsby.jsって? React製の静的サイトジェネレータ ⾼度なパフォーマンス最適化をよしなにやってくれる Webpackなどの煩雑な設定を隠蔽、Web制作を楽に JAMStackの申し⼦ NGK2020S Contact Copyright © 2019hppRC

Slide 10

Slide 10 text

実はかなりGithubの⭐ が 多かったりする NGK2020S Contact Copyright © 2019hppRC

Slide 11

Slide 11 text

NGK2020S Contact Copyright © 2019hppRC

Slide 12

Slide 12 text

Gatsbyの何がいいの？ NGK2020S Contact Copyright © 2019hppRC

Slide 13

Slide 13 text

Gatsbyの何がいいの？ 早い・安い・うまい(?) NGK2020S Contact Copyright © 2019hppRC

Slide 14

Slide 14 text

早い? エコシステムが整っている パフォーマンスが良い NGK2020S Contact Copyright © 2019hppRC

Slide 15

Slide 15 text

早い! starter(Pull Requestで誰でも追加できる) theme(Wordpressにあるような機能) 静的サイトならではのデプロイの簡単さ PWA対応などがプラグインですぐに出来る NGK2020S Contact Copyright © 2019hppRC

Slide 16

Slide 16 text

安い? ランニングコストが安い！ NGK2020S Contact Copyright © 2019hppRC

Slide 17

Slide 17 text

安い! Gatsby製のサイトは静的なReactアプリケーション 動的なデータ取得はビルド時に終わっている つまりサーバ不要、静的ファイルを置くだけでサイトになる もちろんクライアントサイドでのデータ取得もできる NGK2020S Contact Copyright © 2019hppRC

Slide 18

Slide 18 text

安い!! 静的サイトホスティングサービスは⼤量に存在する Netlify(おすすめ) GitHub Pages firebase hosting S3 ... 多くは無料、⼿軽に始められる NGK2020S Contact Copyright © 2019hppRC

Slide 19

Slide 19 text

うまい? ⾊々な技術に触れることができる → 美味しい NGK2020S Contact Copyright © 2019hppRC

Slide 20

Slide 20 text

うまい!!! データを取得する操作はGraphQLで統⼀ 内部の状態管理にReduxを利⽤(外からは意識しなくていい) mdx, Server Side Renderingの考え⽅ NGK2020S Contact Copyright © 2019hppRC

Slide 21

Slide 21 text

GraphQLとか難しそう... NGK2020S Contact Copyright © 2019hppRC

Slide 22

Slide 22 text

GraphQLとか難しそう... ⼤丈夫です⚡ NGK2020S Contact Copyright © 2019hppRC

Slide 23

Slide 23 text

NGK2020S Contact Copyright © 2019hppRC

Slide 24

Slide 24 text

とっても簡単 React初⼼者にも上級者にもオススメです 煩わしい部分を取り除いて開発体験を上げてくれるフレームワーク NGK2020S Contact Copyright © 2019hppRC

Slide 25

Slide 25 text

どんなものが作れるの?✈ NGK2020S Contact Copyright © 2019hppRC

Slide 26

Slide 26 text

NGK2020S Contact Copyright © 2019hppRC

Slide 27

Slide 27 text

NGK2020S Contact Copyright © 2019hppRC

Slide 28

Slide 28 text

このスライド MDXで書いてGatsbyでビルド Netlifyにデプロイしています NGK2020S Contact Copyright © 2019hppRC

Slide 29

Slide 29 text

ngk2020s.hpprc.com NGK2020S Contact Copyright © 2019hppRC

Slide 30

Slide 30 text

あなたも是⾮Gatsby.jsで 楽しく開発しませんか？ 今回紹介したのはGatsbyの魅⼒の⼀部 NGK2020S Contact Copyright © 2019hppRC

Slide 31

Slide 31 text

ご清聴頂き ありがとうございました！ NGK2020S Contact Copyright © 2019hppRC

Slide 32

Slide 32 text

参考資料 JAMstackってなに？実践に学ぶ⾼速表⽰を実現するアーキテクチャの構成 React.js Gatsby.js MDX-DeckとCode Surferでスライドを作ろう！ https://jamstack.org/ NGK2020S Contact Copyright © 2019hppRC