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.2k
TypeScriptの型表現
honda
10
3k
Web Componentsの今
honda
1
410
これまでのReact、これからのReact
honda
0
300
styled-components or emotion?
honda
0
670
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
680
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
790
Web Componentsの動向とPolymer
honda
4
2.5k
Other Decks in Programming
See All in Programming
Vibe Coding の話をしよう
schroneko
2
640
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
160
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
7
780
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
3
940
Chrome Extension Techniques from Hell
moznion
1
160
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
0
830
エンジニアが挑む、限界までの越境
nealle
1
210
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
480
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
180
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
670
Unlock the Potential of Swift Code Generation
rockname
0
250
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
750
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1369
200k
Statistics for Hackers
jakevdp
798
220k
A Tale of Four Properties
chriscoyier
158
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Optimizing for Happiness
mojombo
377
70k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
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 !!