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
Optional Chainingについて
Search
texdeath
October 08, 2019
Programming
3
150
Optional Chainingについて
TypeScript3.7にて導入される機能のひとつ、Optional Chainingについてのお話です。
texdeath
October 08, 2019
Tweet
Share
More Decks by texdeath
See All by texdeath
コードメトリクス計測による課題可視化と品質確保 / Visualize issues and ensure quality by measuring code metrics
texdeath
0
150
クライアントワークと管理画面の話
texdeath
0
120
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
590
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.5k
おさらいVue Composition API
texdeath
0
380
React使いがVueと仲良くなるためにやったこと
texdeath
0
250
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
100
Container Componentは必要なのか
texdeath
4
590
Kotlin/JSでReactアプリを作ってみた
texdeath
1
850
Other Decks in Programming
See All in Programming
プログラマのための音楽入門
cheebow
4
540
現代のVueとTypeScript - 型安全の活用術
minako__ph
4
3.1k
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
110
Swift Concurrencyとレースコンディション
objectiveaudio
1
380
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
610
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.2k
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
220
Uncharted packages (Laravel Live Denmark)
freekmurze
0
140
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
380
オートマトン学習しろ / Do automata learning
makenowjust
3
100
Rubyのobject_id
qnighy
6
1.3k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
179
21k
How GitHub (no longer) Works
holman
309
140k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
Documentation Writing (for coders)
carmenintech
65
4.3k
The Cult of Friendly URLs
andyhume
76
5.9k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
The Invisible Customer
myddelton
119
13k
What's in a price? How to price your products and services
michaelherold
241
11k
What the flash - Photography Introduction
edds
67
11k
Typedesign – Prime Four
hannesfritz
38
2.3k
Docker and Python
trallard
39
3k
Fireside Chat
paigeccino
31
2.9k
Transcript
Optional Chaining について
自己紹介 Masatoshi Morita フロントエンドエンジニア 普段はReact / Vue / Node.js あたりを書いています
twitter: @texdeath
Agenda Optional Chaining とは~基本的な使い方 コード上の利点、コンパイル後 まとめ
Optional Chaining Object のプロパティ値参照で、プロパティの存在チェックを明示的に書かなくても処理し てくれる仕組み TC39 Proposals では現在Stage 3(Candidate) TypeScript
ではversion3.7 で先行的に導入(11 月リリース) 10/1 にbeta がリリースされており、playground でも試せる
基本的な使い方 存在しない可能性があるようなチェーンされたプロパティにアクセスする API の返却結果など、どのプロパティがRequired であるかについて保証がないようなオブ ジェクトの内容を操作する
定義ケース comment.author.name を定義したい type Comment = { type Comment =
{ message: string message: string author?: { author?: { name: string name: string detail?: string detail?: string } } }; }; declare const comment: Comment; declare const comment: Comment;
定義ケース name はプロパティとして存在していないかもしれないので、当然コンパイルエラーにな る // Object is possibly 'undefined'. //
Object is possibly 'undefined'. const name = comment.author.name; const name = comment.author.name;
アクセス方法・返り値 ? 演算子を使用して中間のプロパティにアクセスできる 返り値がなければ、undefined を返す 当然手前のプロパティが存在しない場合(chain が足りない)場合はコンパイルエラーに なる const name
= comment?.author?.name; const name = comment?.author?.name; // string | undefined // string | undefined console.log(name); console.log(name); const comment = { const comment = { message: "hoge" message: "hoge" }; };
関数呼び出しに対して使用する 関数呼び出しにも使用できる async function makeRequest(url: string, log?: (msg: string) =>
void) { async function makeRequest(url: string, log?: (msg: string) => void) { // log 関数が引数に渡されていれば実行する // log 関数が引数に渡されていれば実行する log?.(`Request started at ${new Date().toISOString()}`); log?.(`Request started at ${new Date().toISOString()}`); const result = (await fetch(url)).json(); const result = (await fetch(url)).json(); log?.(`Request finished at at ${new Date().toISOString()}`); log?.(`Request finished at at ${new Date().toISOString()}`); return result; return result; } }
コード上の利点 存在していないかもしれないプロパティにアクセスする際のガード節を除去できる null やundefined のチェックを書く必要がなく、より簡潔なコードを記述できる const name = (comment.author ===
null || comment.author === undefined) ? const name = (comment.author === null || comment.author === undefined) ? undefined : comment.author.name; undefined : comment.author.name; // ↓ // ↓ const name = comment?.author?.name; const name = comment?.author?.name;
Optional Chaining の論理演算子 comment.author.name の返り値が空文字だったとき、これらは同じ出力結果になる let name: string = "hoge";
let name: string = "hoge"; // ----- Logical operator ----- // ----- Logical operator ----- if (comment && comment.author && comment.author.name) { if (comment && comment.author && comment.author.name) { name = comment.author.name; name = comment.author.name; } } console.log(`name: ${name}`) console.log(`name: ${name}`) // ----- Optional chaining ----- // ----- Optional chaining ----- if (comment?.author?.name) { if (comment?.author?.name) { name = comment.author.name; name = comment.author.name; } } console.log(`name: ${name}`) console.log(`name: ${name}`)
Optional Chaining の論理演算子 厳密には論理AND はNaN や0 、false などのfalsy な値に特別に作用するので、Optional Chaining
でコンパイル後は出力結果が異なる Optional Chaining はコンパイル後、OR 演算子とvoid 演算子を使って評価している // ----- Logical operator( コンパイル後) ----- // ----- Logical operator( コンパイル後) ----- if (comment && comment.author && comment.author.name) { if (comment && comment.author && comment.author.name) { name = comment.author.name; name = comment.author.name; } } // ----- Optional chaining( コンパイル後) ----- // ----- Optional chaining( コンパイル後) ----- if ((_b = (_a = comment) === null || _a === void 0 ? void 0 : _a.author) === null || _b === if ((_b = (_a = comment) === null || _a === void 0 ? void 0 : _a.author) === null || _b === name = comment.author.name; name = comment.author.name; } }
所感 コード量が減って物理的に見通しが良くなるので、より直感的に書けそう ただ、既存の明示的なガード節がなくなるのはちょっと怖い・・・ 使うのであれば 同じくTypeScript3.7 で導入されるNullish Coalescing と組み合わせて、null のときはデ フォルト値にフォールバックするようにしたほうがよさそう
strictNullChecks は常時ON にしたほうがよさそう TypeScript 初心者なので、知見の強い人に意見を聞いてみたい
まとめ Optional Chaining を使えば楽にオプショナルなプロパティにアクセスできる コードも読みやすくなる でもコンパイルの時にすり抜けたりしたら怖いので、null チェック自体は厳密にしたほう が良い(と思う)
EOF