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
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
ponday
January 25, 2019
Programming
140
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
480
これまでのReact、これからのReact
honda
0
340
styled-components or emotion?
honda
0
730
Web ComponentsとAngular
honda
0
160
Atomic Design周りについての私見
honda
1
800
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
880
Web Componentsの動向とPolymer
honda
4
2.8k
Other Decks in Programming
See All in Programming
依存関係から依存物へ―Dependencyという言葉の歴史をひも解く
j_lee
0
120
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
o0h
PRO
2
250
C# and C++ Interoperability - cho-dotnetnew
harukasao
0
260
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
manfredsteyer
PRO
0
160
AI 時代のソフトウェア設計の学び方
masuda220
PRO
29
13k
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
yukukotani
3
4.3k
作って学ぶ、 JSX (TSX) ランタイムの基本
syumai
7
1.6k
Skillsは効率化、Agentsは"自分の拡張"——Builder時代のエージェント編成(CC Night 2026)
wemra
1
140
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
manfredsteyer
PRO
0
110
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
guaca
0
190
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
snhryt
0
170
net-httpのHTTP/2対応について
naruse
0
500
Featured
See All Featured
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
210
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.2k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
200
Optimising Largest Contentful Paint
csswizardry
37
3.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.5k
A better future with KSS
kneath
240
18k
Visualization
eitanlees
152
17k
Prompt Engineering for Job Search
mfonobong
0
350
Build your cross-platform service in a week with App Engine
jlugia
234
18k
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 !!