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
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
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
ikezoemakoto
0
340
ドメインイベントでビジネスロジックを解きほぐす #phpcon_odawara
kajitack
2
120
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
avosalmon
1
320
Coding as Prompting Since 2025
ragingwind
0
770
PDI: Como Alavancar Sua Carreira e Seu Negócio
marcelgsantos
0
110
飯MCP
yusukebe
0
490
Strategy for Finding a Problem for OSS: With Real Examples
kibitan
0
140
Offline should be the norm: building local-first apps with CRDTs & Kotlin Multiplatform
renaudmathieu
0
160
Swift Concurrency Type System
inamiy
0
390
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
orgachem
PRO
9
5.1k
Codex CLI でつくる、Issue から merge までの開発フロー
amata1219
0
330
Vibe NLP for Applied NLP
inesmontani
PRO
0
100
Featured
See All Featured
Unsuck your backbone
ammeep
672
58k
A Tale of Four Properties
chriscoyier
163
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.8k
What does AI have to do with Human Rights?
axbom
PRO
1
2.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
480
Agile that works and the tools we love
rasmusluckow
331
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
290
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
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 !!