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
120
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
3.1k
Web Componentsの今
honda
1
430
これまでのReact、これからのReact
honda
0
310
styled-components or emotion?
honda
0
680
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
690
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
820
Web Componentsの動向とPolymer
honda
4
2.5k
Other Decks in Programming
See All in Programming
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
140
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
670
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
イベントストーミングから始めるドメイン駆動設計
jgeem
4
870
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
2
530
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
複数アプリケーションを育てていくための共通化戦略
irof
10
4k
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
2
280
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
960
KotlinConf 2025 現地参加の土産話
n_takehata
0
100
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
730
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Building an army of robots
kneath
306
45k
The Language of Interfaces
destraynor
158
25k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Designing Experiences People Love
moore
142
24k
Rails Girls Zürich Keynote
gr2m
94
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Music & Morning Musume
bryan
46
6.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
KATA
mclloyd
29
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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 !!