Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Gatsbyお試し
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
ponday
January 25, 2019
Programming
150
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Gatsbyお試し
React勉強会@福岡 vol.1(2019/01/25)の発表資料2つめです。
ponday
January 25, 2019
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.7k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
480
これまでのReact、これからのReact
honda
0
350
styled-components or emotion?
honda
0
730
Web ComponentsとAngular
honda
0
160
Atomic Design周りについての私見
honda
1
820
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
890
Web Componentsの動向とPolymer
honda
4
2.8k
Other Decks in Programming
See All in Programming
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
290
『寄り添うラジオ』をAIで作る 体験価値から逆算した、会話しないUXと品質設計
theoriatec2024
3
180
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ! ~
po3rin
1
2.8k
Vue Fes Japan 2026 タイムテーブル徹底解説
448jp
1
500
フロントエンドUIフレームワークのこれまでとこれから
ssssota
5
2.9k
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
reimaru
1
2.3k
thread_parallel_with_free-threaded_Python_and_NumPy.pdf
riku_sakamoto
0
350
Workers Cache を知る
syumai
0
210
Verilogで学ぶCPU自作入門.pdf
uyuki234
2
1.3k
IBM Bob Dojo #1 仕様駆動開発入門
oniak3ibm
PRO
0
170
AI × TiDD / 2026.09.05 Redmine 大阪
tokudiro
1
180
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
mpyw
0
380
Featured
See All Featured
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
910
Product Roadmaps are Hard
iamctodd
55
13k
Making Projects Easy
brettharned
120
6.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
990
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
670
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
700
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Building an army of robots
kneath
307
46k
Git: the NoSQL Database
bkeepers
PRO
432
67k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.3k
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 !!