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
140
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
340
styled-components or emotion?
honda
0
730
Web ComponentsとAngular
honda
0
160
Atomic Design周りについての私見
honda
1
810
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
890
Web Componentsの動向とPolymer
honda
4
2.8k
Other Decks in Programming
See All in Programming
AIエージェント時代のコードレビューを設計する
nogu66
5
2.4k
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
tatsuki12
4
1.6k
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会!〜〇〇への誘い〜 #n_study
mazrean
0
150
異なる設計思想のフレームワークを経験して得た学び
amekuhideki
2
1.5k
型解析で実現する Go の言語内 DSL / Conference に Go! タイムテーブルの歩き方 for Gophers
mazrean
0
110
PHPプロジェクトの結合バランスを可視化する #php_night
kajitack
0
200
初めての模倣学習とVLA
natsutan
0
440
リアルな遅延を測る仕様
kota_yata
1
140
Swift愛好会100回記念 第1回を振り返る
jollyjoester
0
100
FastAPI の並行処理モデルを完全に理解する
hoto17296
9
3.7k
iOS開発×AI駆動開発 〜最近使って便利だったスキルの話〜
nogu66
0
140
이 함수, 실패하면 어떻게 되나요? null부터 Rich Errors까지, Kotlin 에러 처리 15년
haeti2
0
120
Featured
See All Featured
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
840
The browser strikes back
jonoalderson
0
1.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
510
A designer walks into a library…
pauljervisheath
211
24k
Design in an AI World
tapps
1
300
GraphQLとの向き合い方2022年版
quramy
50
15k
Docker and Python
trallard
47
4.2k
HDC tutorial
michielstock
2
840
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
450
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 !!