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
110
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.1k
TypeScriptの型表現
honda
10
3k
Web Componentsの今
honda
1
390
これまでのReact、これからのReact
honda
0
290
styled-components or emotion?
honda
0
640
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
630
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
740
Web Componentsの動向とPolymer
honda
4
2.4k
Other Decks in Programming
See All in Programming
Haze - Real time background blurring
chrisbanes
1
510
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
210
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
RWC 2024 DICOM & ISO/IEC 2022
m_seki
0
210
103 Early Hints
sugi_0000
1
230
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
340
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
110
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
470
Spatial Rendering for Apple Vision Pro
warrenm
0
110
Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと
igreenwood
0
340
php-conference-japan-2024
tasuku43
0
320
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Optimising Largest Contentful Paint
csswizardry
33
3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GraphQLとの向き合い方2022年版
quramy
44
13k
KATA
mclloyd
29
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Scaling GitHub
holman
458
140k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
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 !!