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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
ponday
January 25, 2019
Programming
130
0
Share
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
470
これまでのReact、これからのReact
honda
0
340
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
運転動画を検索可能にする〜Cosmos-Embed1とDatabricks Vector Searchで〜/cosmos-embed1-databricks-vector-search
studio_graph
1
660
SREに優しいTerraform構成 modulesとstateの組み方
hiyanger
2
170
PHPでバイナリをパースして理解するASN.1
muno92
PRO
0
420
検索設計から 推論設計への重心移動と Recall-First Retrieval
po3rin
5
1.5k
アクセシビリティ試験の"その後"を仕組み化する
yuuumiravy
1
190
GitHubCopilotCLIをはじめよう.pdf
htkym
0
320
Surviving Black Friday: 329 billion requests with Falcon!
ioquatix
0
2.8k
継続的な負荷検証を目指して
pyama86
0
330
KMP × Kotlin 2.3 - How Android Got Slower While iOS Builds Improved by 47%
rio432
0
130
【26新卒研修資料】TDD実装演習
dip_tech
PRO
0
170
10 Tips of AWS ~Gen AI on AWS~
licux
5
540
〜バイブコーディングを超えて〜 チームで実験し続けたAI駆動開発
tigertora7571
0
190
Featured
See All Featured
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
110
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
690
Building an army of robots
kneath
306
46k
The Language of Interfaces
destraynor
162
26k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
65
54k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.5k
Abbi's Birthday
coloredviolet
2
7.4k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
250
A Modern Web Designer's Workflow
chriscoyier
698
190k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
130
What's in a price? How to price your products and services
michaelherold
247
13k
Making the Leap to Tech Lead
cromwellryan
135
9.8k
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 !!