Optional chainingの話 Roppongi.js @yayoc 

Hello! I am 弥吉修英 I am software engineer at Fast Retailing. Twitter: @yayoc_ Github: @yayoc 

なにをやっているか？ ○ SPAの実装 ○ BFFの実装 ( 今日はここについての話など ) CDN router SPA BFF Micro-service A Micro-service B Micro-service C Micro-service D 

Micro serviceとの付き合い ○ 10個以上のmicro serviceとREST APIでのやり取り ○ APIがnullやundefinedを返すことはよくある □ データの不整合だったり・・ □ API仕様がPF間で若干違っていたり・・ □ バグだったり・・ 

結果、TypeError Cannot read propertyが頻出度の高いエラーであるという話 https://rollbar.com/blog/top-10-javascript-errors/ 肌感としてもよく分かる 

解決策？ 1. && operator 2. Ternary operator 3. Try catch どれも冗長さが否めない・・ 

optional-chainingの proposal ○ .? の左側を計算して、undefined もしくは nullの場合は、 undefinedを返す。そうでない場合は、素直にプロパティアク セスや関数実行を行う ○ 冗長な繰り返し記述やテンポラリな変数格納を避ける ○ ステータスはStage1 ○ Swift, C#などにはある ○ https://tc39.github.io/proposal-optional-chaining/ ○ TSにもまだない。( 議論は３年以上前からあるが・・ https://github.com/Microsoft/TypeScript/issues/16 

optional-chain ○ optional-chainというライブラリを作ってみた https://github.com/yayoc/optional-chain ○ TSで書いたOption Typeを使った実装 

optional-chain ○ 間違ったプロパティアクセスに対しては、エラーを返す ○ この辺の実装は@utatti氏のlens実装をかなり参考に 

optional-chain ○ パターンマッチ, getOrElseなどのAPIも一応ある 

結論 ○ JSにおける、プロパティアクセスは悩みのタネ ○ optional chainingはスマートに解決してくれるので期待 ○ optional-chainも解決してくれるかもしれない 

THANKS! ありがとうございました。 Twitter: @yayoc_ Github: @yayoc 

Appendix ○ https://github.com/paypal/api-standards/blob/master /api-style-guide.md#null ○ https://github.com/tc39/proposal-optional-chaining ○ https://github.com/yayoc/optional-chain ○ https://medium.com/@n_yayoshi/optional-chain-pro xy-brings-optional-chaining-75fff102acbd ○ https://developer.apple.com/library/content/docume ntation/Swift/Conceptual/Swift_Programming_Langu age/OptionalChaining.html 

CREDITS Special thanks to all the people who made and released these awesome resources for free: ○ Presentation template by SlidesCarnival ○ Photographs by Unsplash ○ Backgrounds by SubtlePatterns