NGK2020Sにて発表したスライドです。 React製の静的サイトジェネレータであるGatsby.jsの良さに関して語ります。
https://ngk2020s.hpprc.com にてデプロイされたスライドを閲覧できます。 Githubはこちらです。https://github.com/hppRC/NGK2020S
Gatsby.js布教計画NGK2020S 昼の部 LT⼤会hpp(@osaremochi)NGK2020S ContactCopyright © 2019hppRC
View Slide
だれ?hpp名古屋⼤学情報学部コンピュータ科学科 3 年GitHub: hppRCQiita: hppRCTwitter: @osaremochiNGK2020S ContactCopyright © 2019hppRC
だれ?趣味で React とか Go とか Rust とか学⽣実験でコンパイラを書いたりAtCoder ⽔(1269)Gatsby.js MaintainerNGK2020S ContactCopyright © 2019hppRC
今⽇話したいことNGK2020S ContactCopyright © 2019hppRC
JAMStack Gatsby.js NGK2020S ContactCopyright © 2019hppRC
JAMStack って?Netlify の創業者が提唱した新しいアーキテクチャJavaScriptAPIsMarkdownNGK2020S ContactCopyright © 2019hppRC
JAMStackとはよくある「動的」な処理を外部に移した静的な Web サイトの構成サーバに依存しないフロントエンドの技術構成NGK2020S ContactCopyright © 2019hppRC
なるほどNGK2020S ContactCopyright © 2019hppRC
Gatsby.jsって?React製の静的サイトジェネレータ⾼度なパフォーマンス最適化をよしなにやってくれるWebpackなどの煩雑な設定を隠蔽、Web制作を楽にJAMStackの申し⼦NGK2020S ContactCopyright © 2019hppRC
実はかなりGithubの⭐ が多かったりするNGK2020S ContactCopyright © 2019hppRC
NGK2020S ContactCopyright © 2019hppRC
Gatsbyの何がいいの?NGK2020S ContactCopyright © 2019hppRC
Gatsbyの何がいいの?早い・安い・うまい(?)NGK2020S ContactCopyright © 2019hppRC
早い?エコシステムが整っているパフォーマンスが良いNGK2020S ContactCopyright © 2019hppRC
早い!starter(Pull Requestで誰でも追加できる)theme(Wordpressにあるような機能)静的サイトならではのデプロイの簡単さPWA対応などがプラグインですぐに出来るNGK2020S ContactCopyright © 2019hppRC
安い?ランニングコストが安い!NGK2020S ContactCopyright © 2019hppRC
安い!Gatsby製のサイトは静的なReactアプリケーション動的なデータ取得はビルド時に終わっているつまりサーバ不要、静的ファイルを置くだけでサイトになるもちろんクライアントサイドでのデータ取得もできるNGK2020S ContactCopyright © 2019hppRC
安い!!静的サイトホスティングサービスは⼤量に存在するNetlify(おすすめ)GitHub Pagesfirebase hostingS3 ...多くは無料、⼿軽に始められるNGK2020S ContactCopyright © 2019hppRC
うまい?⾊々な技術に触れることができる→ 美味しいNGK2020S ContactCopyright © 2019hppRC
うまい!!!データを取得する操作はGraphQLで統⼀内部の状態管理にReduxを利⽤(外からは意識しなくていい)mdx, Server Side Renderingの考え⽅NGK2020S ContactCopyright © 2019hppRC
GraphQLとか難しそう...NGK2020S ContactCopyright © 2019hppRC
GraphQLとか難しそう...⼤丈夫です⚡NGK2020S ContactCopyright © 2019hppRC
とっても簡単 React初⼼者にも上級者にもオススメです煩わしい部分を取り除いて開発体験を上げてくれるフレームワークNGK2020S ContactCopyright © 2019hppRC
どんなものが作れるの?✈NGK2020S ContactCopyright © 2019hppRC
このスライドMDXで書いてGatsbyでビルドNetlifyにデプロイしていますNGK2020S ContactCopyright © 2019hppRC
ngk2020s.hpprc.comNGK2020S ContactCopyright © 2019hppRC
あなたも是⾮Gatsby.jsで楽しく開発しませんか?今回紹介したのはGatsbyの魅⼒の⼀部NGK2020S ContactCopyright © 2019hppRC
ご清聴頂きありがとうございました!NGK2020S ContactCopyright © 2019hppRC
参考資料JAMstackってなに?実践に学ぶ⾼速表⽰を実現するアーキテクチャの構成React.jsGatsby.jsMDX-DeckとCode Surferでスライドを作ろう!https://jamstack.org/NGK2020S ContactCopyright © 2019hppRC