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
190
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
340
クライアントワークと管理画面の話
texdeath
0
230
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
650
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.8k
おさらいVue Composition API
texdeath
0
460
React使いがVueと仲良くなるためにやったこと
texdeath
0
290
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
110
Container Componentは必要なのか
texdeath
4
640
Kotlin/JSでReactアプリを作ってみた
texdeath
1
930
Other Decks in Programming
See All in Programming
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
780
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.1k
CSC509 Lecture 02
javiergs
PRO
0
410
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
950
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.1k
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
380
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
Swift Concurrency - 状態監視の罠
objectiveaudio
2
450
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
600
XP, Testing and ninja testing ZOZ5
m_seki
2
300
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
For a Future-Friendly Web
brad_frost
180
9.9k
Balancing Empowerment & Direction
lara
4
680
Designing for humans not robots
tammielis
254
25k
The Pragmatic Product Professional
lauravandoore
36
6.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Site-Speed That Sticks
csswizardry
11
880
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Faster Mobile Websites
deanohume
310
31k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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