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.1k
TypeScriptの型表現
honda
10
2.9k
Web Componentsの今
honda
1
380
これまでのReact、これからのReact
honda
0
280
styled-components or emotion?
honda
0
630
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
620
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
730
Web Componentsの動向とPolymer
honda
4
2.3k
Other Decks in Programming
See All in Programming
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
250
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
980
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
100
Outline View in SwiftUI
1024jp
1
150
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
920
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
430
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
8
4.1k
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
Featured
See All Featured
A better future with KSS
kneath
238
17k
Being A Developer After 40
akosma
86
590k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing for Performance
lara
604
68k
BBQ
matthewcrist
85
9.3k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Facilitating Awesome Meetings
lara
49
6k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Designing Experiences People Love
moore
138
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
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 !!