Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gatsbyお試し
Search
ponday
January 25, 2019
Programming
0
120
Gatsbyお試し
React勉強会@福岡 vol.1(2019/01/25)の発表資料2つめです。
ponday
January 25, 2019
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.5k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
450
これまでのReact、これからのReact
honda
0
320
styled-components or emotion?
honda
0
700
Web ComponentsとAngular
honda
0
140
Atomic Design周りについての私見
honda
1
770
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
870
Web Componentsの動向とPolymer
honda
4
2.7k
Other Decks in Programming
See All in Programming
The Art of Re-Architecture - Droidcon India 2025
siddroid
0
170
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
nrslib
2
1.6k
從冷知識到漏洞,你不懂的 Web,駭客懂 - Huli @ WebConf Taiwan 2025
aszx87410
2
3.4k
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
3.6k
そのAIレビュー、レビューしてますか? / Are you reviewing those AI reviews?
rkaga
3
3k
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
elyza
2
1.1k
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 2
philipschwarz
PRO
0
140
CSC307 Lecture 01
javiergs
PRO
0
670
CSC307 Lecture 02
javiergs
PRO
1
760
クラウドに依存しないS3を使った開発術
simesaba80
0
230
gunshi
kazupon
1
140
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
3
1.8k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
43
The Mindset for Success: Future Career Progression
greggifford
PRO
0
220
BBQ
matthewcrist
89
10k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
A designer walks into a library…
pauljervisheath
210
24k
Site-Speed That Sticks
csswizardry
13
1k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.4k
Technical Leadership for Architectural Decision Making
baasie
0
220
Facilitating Awesome Meetings
lara
57
6.7k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.1k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Transcript
Gatsbyお試し React勉強会@福岡 vol.1 / Jan 25th, 2019 ponday (@ponday_dev)
Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like
: TypeScript / Elixir / Python etc… - 日曜フロントエンドエンジニア - 副業もやってます
突然ですが
福岡市、 インフルエンザ 流行ってますね
Gatsbyの発表がキャンセルになってしまったので Gatsbyの話します
Gatsby
Gatsby - React製の静的サイトジェネレータ - 豊富なプラグインによる高い拡張性 - 組み込みでGraphQL - ReactのHPもGatsbyを使ってるらしい -
ググラビリティ△
チュートリアルやりなおした
触ってみた感想 - (標準から外れないかぎり)簡単 - ルーティングの面倒を見なくて良いのはすごく楽 - JSファイル名 = URL -
コンポーネント部分は普通のReact - 普通のReactなので結構好き勝手やれる - Reactのバージョンを上げてしまえばHooksも動いた
気になった点 - Markdown配信までが意外と面倒 - そもそもチュートリアルがMarkdown配信するまでの道のり - まだ日本語情報少ない(古いバージョンとか) - プラグインの選択が重要になりそう -
すごい数ある - 手作業でもやれるけど、手数がまったく違う
おまけ
無意識でTypeScript用テンプレート作ってた
TypeScript化の手順 - gatsby-plugin-typescriptを入れる - gatsby-config.jsでプラグインを読み込む - TypeScript関連のモジュールを入れる - @types/{node,react,react-dom} -
typescript - tsconfig.jsonを書く
これだけ
動くの確認用にまたチュートリアルやった
これでGatsbyもTypeScriptで作れる!!
だけど......
None
Thank you !!