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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
ponday
January 25, 2019
Programming
130
0
Share
Gatsbyお試し
React勉強会@福岡 vol.1(2019/01/25)の発表資料2つめです。
ponday
January 25, 2019
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.6k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
470
これまでのReact、これからのReact
honda
0
340
styled-components or emotion?
honda
0
720
Web ComponentsとAngular
honda
0
150
Atomic Design周りについての私見
honda
1
790
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
880
Web Componentsの動向とPolymer
honda
4
2.7k
Other Decks in Programming
See All in Programming
Agent Skills を社内で育てる仕組み作り
jackchuka
1
2.3k
Moments When Things Go Wrong
aurimas
3
100
Modding RubyKaigi for Myself
yui_knk
0
390
要はバランスからの卒業 #yumemi_grow
kajitack
0
190
Zod v4 Codec でスキーマに型変換を埋め込む REST API 設計 #TSKaigi2026
ryutaro_yako
0
110
ソースコード→AST→オペコード、の旅を覗いてみる
o0h
PRO
1
140
Oxlintはいかにしてtsgolintのlint ruleを呼び出しているのか
syumai
1
430
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
kiichisugihara
1
290
1人1案件のプロダクトエンジニア時代に、"プロセス監督"としてチャレンジしたこと
non0113
0
170
Cloudflare で始める Data Platform
ta93abe
0
210
PHPでバイナリをパースして理解するASN.1
muno92
PRO
0
470
Import assertionsが消えた日~ECMAScriptの仕様はどう決まり、なぜ覆るのか~
bicstone
2
190
Featured
See All Featured
Designing Experiences People Love
moore
143
24k
Documentation Writing (for coders)
carmenintech
77
5.3k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
190
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
700
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
810
Building the Perfect Custom Keyboard
takai
2
770
Balancing Empowerment & Direction
lara
6
1.1k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
300
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
9.9k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
240
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.5k
Prompt Engineering for Job Search
mfonobong
0
310
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 !!