React+TypeScriptと格闘して得た知見

React+TypeScriptと格
闘して得た知見
執筆者：トビウオ

概要
•TypeScriptで書くのは楽しい！
•Reactは楽しいけど難しい！
•つまづきポイントをまとめよう！

TypeScript 編 ①
• Python と違い、「全部同じ値の配列」や「要素の値が連番にな
った配列」を簡単に作成する方法が無い
• 例えば Array.prototype.fill() と Array.prototype.map() を使えば作
成できる
• ただしパフォーマンスの問題があるので、forループで地道に作
成する方法で書くこともある

TypeScript 編 ②
• Python と違い、要素数が同じ配列A・Bを束ねる zip 関数
が無い
• こちらも例えば Array.prototype.map() を使えば作成でき
る。ただしパフォーマンスの問題が（以下略

TypeScript 編 ③
• tsconfig.json の、compilerOptions.baseUrl の設定がめちゃ重要
• create-react-app で作ると、基本的に src ディレクトリ以下しか
触らないので、「"baseUrl": “src"」と書いておくとインポートの
記述が少し簡単になる
root
┣src
┃┣aaa.ts
┃┗bbb.ts
┗tsconfig.json
ディレクトリ階層の例 bbb.tsでaaa.tsからimportする際の記述

React 編 ①
• Component 自体は簡単に書けるが、 State 管理の方法を
身につけるのが難しい
• ベストプラクティスも時期によって変化するが、今のと
ころは React Hooks を用いて Redux 風に書くのがいいと
思われる
• 次ページ以降、 Custom Hooks と Context API と
useContext を利用した記述法を紹介する

React 編 ②
• State の型を interface で定義する。型内部では外部に公開
する状態、および状態変更のためのディスパッチ関数を定
義しておく

React 編 ③
• 定義した State 型を返す Custom Hooks を定義する
• ルートとなる Component に組み込む

React 編 ④
• 下層の Component では、 useContext() を使って欲しい
状態および dispatch を簡単に利用できる
• 次ページ以降は、State管理以外の小ネタに
ついて書きます

React 編 ⑤
• React Hooks における useState() は、 Promise 型ではな
いが非同期処理である
• つまり、例えば次のように書いた場合、変数aaaのセット
・変数bbbのセット・func()の実行の順番は確定しておら
ず、その順番も保証されない

React 編 ⑥
Q. 実行順を保証するにはどうするんだってばよ！？
A. useEffectを使います。強引に Promise 化してもOK
useEffectによる順番保証 Promise化して順番保証

React 編 ⑦
• useEffect の第一引数は EffectCallback 型。これはasync
functionではない
• つまり useEffect 内で await は
使えない。thenで繋げるか、内
部でasync functionを定義して実
行するしかない

React+TypeScriptと格闘して得た知見

Recommended

More Related Content

What's hot (20)

Similar to React+TypeScriptと格闘して得た知見 (20)

More from iPride Co., Ltd. (20)

React+TypeScriptと格闘して得た知見