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
850
TypeScript+React入門
rchaser53
December 19, 2016
Tweet
Share
More Decks by rchaser53
See All by rchaser53
LLVM IR入門
rchaser53
4
2.6k
pitch loaderについて
rchaser53
1
520
Rustからwasmを生成してみた話
rchaser53
1
740
Base64 VLQ概要
rchaser53
2
1.5k
sourcemap規格概要
rchaser53
1
1.1k
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
790
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
150
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
160
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
640
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
880
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
210
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
16k
Porting a visionOS App to Android XR
akkeylab
0
420
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Designing Experiences People Love
moore
142
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Being A Developer After 40
akosma
90
590k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
270
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 分くらいでも十分に効果あり) ある程度ノウハウがたまったら展開していく (
コードレビューあたりを利用)
終わりに 何事もすぐに理想の状態にはならない ちょっとずつ頑張っていく