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
180
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
330
クライアントワークと管理画面の話
texdeath
0
220
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
640
中期プロジェクトで 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
920
Other Decks in Programming
See All in Programming
AI Ramen Fight
yusukebe
0
110
CDK引数設計道場100本ノック
badmintoncryer
2
580
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
300
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
670
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
410
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
32
8.7k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
240
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
20250708_JAWS_opscdk
takuyay0ne
2
150
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
RailsConf 2023
tenderlove
30
1.2k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Building an army of robots
kneath
306
45k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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