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
0
130
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.6k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
470
これまでのReact、これからのReact
honda
0
330
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
Codex の「自走力」を高める
yorifuji
0
1.3k
条件判定に名前、つけてますか? #phperkaigi #c
77web
2
810
Everything Claude Code OSS詳細 — 5層構造の中身と導入方法
targe
0
150
へんな働き方
yusukebe
6
2.8k
「効かない!」依存性注入(DI)を活用したAPI Platformのエラーハンドリング奮闘記
mkmk884
0
210
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
chobishiba
1
500
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
avosalmon
1
230
CS教育のDX AIによる育成の効率化
niftycorp
PRO
0
160
Vuetify 3 → 4 何が変わった?差分と移行ポイント10分まとめ
koukimiura
0
190
How to stabilize UI tests using XCTest
akkeylab
0
140
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
tasukuwatanabe
3
420
AI Assistants for Your Angular Solutions
manfredsteyer
PRO
0
160
Featured
See All Featured
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
150
Site-Speed That Sticks
csswizardry
13
1.1k
Accessibility Awareness
sabderemane
0
84
Chasing Engaging Ingredients in Design
codingconduct
0
150
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
160
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
130
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
160
Building the Perfect Custom Keyboard
takai
2
720
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
500
4 Signs Your Business is Dying
shpigford
187
22k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
160
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.1k
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 !!