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
TypeScript+React入門
Search
rchaser53
December 19, 2016
Programming
1
750
TypeScript+React入門
rchaser53
December 19, 2016
Tweet
Share
More Decks by rchaser53
See All by rchaser53
LLVM IR入門
rchaser53
4
2.3k
pitch loaderについて
rchaser53
1
480
Rustからwasmを生成してみた話
rchaser53
1
690
Base64 VLQ概要
rchaser53
2
1.3k
sourcemap規格概要
rchaser53
1
1k
Other Decks in Programming
See All in Programming
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
580
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.2k
Outline View in SwiftUI
1024jp
1
160
役立つログに取り組もう
irof
26
8.7k
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
Piniaの現状と今後
waka292
5
1.5k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
1k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
Macとオーディオ再生 2024/11/02
yusukeito
0
200
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
EventSourcingの理想と現実
wenas
6
2.1k
Featured
See All Featured
Facilitating Awesome Meetings
lara
49
6k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Statistics for Hackers
jakevdp
796
220k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Automating Front-end Workflow
addyosmani
1365
200k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Rails Girls Zürich Keynote
gr2m
93
13k
Thoughts on Productivity
jonyablonski
67
4.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Transcript
TypeScript + React 入門 @rchaser53
伝えたいこと 静的解析があると本当に楽 (TypeScript でもFlow でもOK) ゆるく導入してもメリットはある 少しずつ学んでいく
本日のリポジトリ 取引先のフィールドが淡々と出力されるだけのものです TypeScript で書いた際の雰囲気をお楽しみください https://github.com/rchaser53/TsxDemo
静的解析があると本当に楽 N 番煎じなので静的解析については略 補完や構文エラーが出るのは非常に便利 visual studio code 優秀 ( 好きなeditor
を使いたいならtsserver で頑張ろう)
補完機能は思ったより大事 オブジェクトの構造の把握が容易になる => 新規メンバーや臨時メンバーが入りやすい => リファクタリングもしやすい interface を充実させれば下手なドキュメントより優秀? ( エラーが出るから少なくともメンテはされる)
ゆるく導入してもメリットはある ハードルは日に日に下がっている TypeScript 2 系で設定は大分楽になった TypeScript 2.1.4 でmodule の宣言も不要に
例1. props のinterface だけでも効果あり export interface Props { name: string
label: string index: number } export class Row extends React.Component< Props, {} > { // 略 }
例2. 導入が楽なところから攻める(tsconfig 編) noUnusedLocals 使用していないローカル変数をチェックする noUnusedParameters 使用していない引数をチェックする
例2. 導入が楽なところから攻める( 型編) readonly property を読取り専用にする export interface Circle {
readonly radius: number x: number y: number } let circleA: CirCle = { radius: 10, x: 5, y: 5 } circleA.radiux = 20 // Error! circleA.x = 10 // ok
ハードルが低く効果がわかりやすい所から 体感してもらえないと導入しても使ってくれない 簡単にできて、効果が実感しやすい所から攻める やってくれる人を少しずつ増やしていく
少しずつ学んでいく 一から全部やろうとするから辛い 空いた時間で少しずつ綺麗にしていく ( ファイル、関数、オブジェクト単位で少しずつ) 最初のうちは分かる物だけ使えばよい
わかる機能から始める 非常に多機能。最初から全部は辛い 簡単なものから使っていく 特に既存プロジェクトに一気に導入するのは辛い
皆で一斉にやらなくたっていい 誰かまず始める 空き時間で型を付けたり、interface を宣言したりする (2-3 日に1 回、2-30 分くらいでも十分に効果あり) ある程度ノウハウがたまったら展開していく (
コードレビューあたりを利用)
終わりに 何事もすぐに理想の状態にはならない ちょっとずつ頑張っていく