NGK2020S
🌝
だれ？
hpp
名古屋大学情報学部コンピュータ科学科 3 年
- GitHub: hppRC
- Qiita: hppRC
- Twitter: @osaremochi
🌝
だれ？
- 趣味で React とか Go とか Rust とか
- 学生実験でコンパイラを書いたり
- AtCoder 水(1269)
- Gatsby.js Maintainer
今日話したいこと
JAMStack 🍃
Gatsby.js 🔥
JAMStack って?
Netlify の創業者が提唱した
新しいアーキテクチャ
- JavaScript
- APIs
- Markdown
JAMStackとは
よくある「動的」な処理を外部に移した静的な Web サイトの構成
サーバに依存しないフロントエンドの技術構成
なるほど👴
Gatsby.jsって?
- React製の静的サイトジェネレータ
- 高度なパフォーマンス最適化をよしなにやってくれる
- Webpackなどの煩雑な設定を隠蔽、Web制作を楽に
- JAMStackの申し子
実はかなりGithubの⭐️が
多かったりする
Gatsbyの何がいいの？
Gatsbyの何がいいの？
早い・安い・うまい(?)
🐮
早い?
エコシステムが整っている🌲
パフォーマンスが良い🔥
早い!
- starter(Pull Requestで誰でも追加できる)
- theme(Wordpressにあるような機能)
- 静的サイトならではのデプロイの簡単さ
- PWA対応などがプラグインですぐに出来る
安い?
ランニングコストが安い！💰
安い!
Gatsby製のサイトは静的なReactアプリケーション👍
- 動的なデータ取得はビルド時に終わっている
- つまりサーバ不要、静的ファイルを置くだけでサイトになる
- もちろんクライアントサイドでのデータ取得もできる
安い!!
静的サイトホスティングサービスは大量に存在する
- Netlify(おすすめ)🔰
- GitHub Pages
- firebase hosting
- S3 ...
多くは無料、手軽に始められる
うまい?
色々な技術に触れることができる
→ 美味しい🍰
うまい!!!
- データを取得する操作はGraphQLで統一
- 内部の状態管理にReduxを利用(外からは意識しなくていい)
- mdx, Server Side Renderingの考え方
GraphQLとか難しそう...
GraphQLとか難しそう...
大丈夫です⚡️
とっても簡単 🍀
React初心者にも上級者にもオススメです
煩わしい部分を取り除いて開発体験を上げてくれるフレームワーク
どんなものが作れるの?✈️
このスライド
MDXで書いてGatsbyでビルド
Netlifyにデプロイしています
あなたも是非Gatsby.jsで
楽しく開発しませんか？
今回紹介したのはGatsbyの魅力の一部🎃