TypeScriptがなぜ必要だったか 三浦 恒樹 (MIURA KOUKI) 診療情報管理士 上級医療情報技師 医用画像情報専門技師 ドゥウェル株式会社 2024.10.27 えびてく #4

長男が飼っている ハリネズミがアイコン INTRODUCE ・ドゥウェル株式会社 （医療系IT開発・導入会社）に所属 ・マネージャー（プレイング・マネージャー） ・仕事では Java，C#，Node.js / JavaScript，TypeScript ・趣味では PHP，Node.js / JavaScript ・３児の父 ・札幌PHP勉強会、JBUG札幌、JavaDO、ゆるWeb勉強会 等に参加

INDEX ・TypeScriptとは ・TypeScript年表 ・ソフトウェア業界の動向 ・JavaScriptで困ること ・開発コストシミュレーション ・SUMMARY

TypeScriptとは ・JavaScriptのスーパーセット JavaScript TypeScript 型注釈・型推論等

TypeScript年表 ・JavaScript/TypeScript

TypeScript年表 JavaScript(ECMAScript) TypeScript 1997/06 初版 1999/12 正規表現、try/catch例外処理、厳格なエラー処理 2009/12 strictモード、getter/setter、JSONライブラリ 2012/10 TypeScript0.8公開（型注釈、型推論、クラス等） 2013 TypeScript0.9 総称型のサポートを追加 2014 TypeScript1.0 新しいTypeScriptコンパイラ 2015/06 クラス、モジュール、イテレータ、for/ofループ 2016/06 べき乗演算子、Array.prototype.includes 2016/09 TypeScript2.0 null非許容型への対応 2017/06 async/await、SharedArrayBuffer、 Atomics 2017/02 TypeScript2.2 2018/06 オブジェクトに対するスプレッド構文、非同期イテ レーション、Promise.prototype.finaly 2018/07 TypeScript3.0 残りのパラメータと展開式のタ プル、タプル型を持つ残りのパラメータ 2019/06 Array.prototype.flat、 Array.prototype.flatMap 2020/06 オプショナルチェイニング演算子?.、Null合体演算 子?? 2020/08 TypeScript4.0 カスタムJSXファクトリ、 Variadic Tuple型 2022/11 TypeScript4.9 satisfies演算子 2023/06 配列操作メソッドの追加、#!(シバン) 2023/03 TypeScript5.0 decorators https://ja.wikipedia.org/wiki/ECMAScript https://ja.wikipedia.org/wiki/TypeScript

ソフトウェア業界の動向 ・事例 ・GitHubソースコード量

ソフトウェア業界の動向 ・事例 - LINE株式会社 120億PVの巨大サービス「LINE NEWS」を TypeScript化した話 https://logmi.jp/tech/articles/322702 ・arrayがわたるべきところでstringを渡していたバグを出してしまったので ・変数のデータ構造が分からない ・機能改修が安全に行えているのか自信がない ・他の言語機能で慣れ親しんできた言語機能がJavaScriptにない

ソフトウェア業界の動向 ・事例 - 株式会社サイバーエージェント 100万行の大規模なJavaScript製システムを TypeScriptに移行するためにやったこと https://developers.cyberagent.co.jp/blog/archives/34364/ ・オブジェクトを扱う時はその生成過程の調査から始まるだけではなく ・誤ったプロパティへのアクセスや代入 ・nullやundefinedチェックの不足 ・数値を入れるはずの変数に文字列やオブジェクトが入っている → 型がわからないことに起因するバグの調査や修正が必要でした

ソフトウェア業界の動向 ・事例 - Sansan株式会社 TypeScript を導入して 1 年が経って感じた良 かったこと・困ったこと https://buildersbox.corp-sansan.com/entry/2021/06/24/110000 ・実行する前にコードのエラーチェックができる（テストに近い役割） ・既存のコードのドキュメント代わりになり、読解を助ける ・より賢いコード補完が得られる

ソフトウェア業界の動向 ・事例 - 株式会社サイバーエージェント 8年運用したJavaScriptでの開発を段階的に TypeScript移行していくためにやっていること https://developers.cyberagent.co.jp/blog/archives/33492/ ・型がないためtypoによる不具合が少なからずあること ・インターフェイスが定義できないため共通で利用する部品の使い方の誤りによる不具合が少 なからずあること ・JavaScriptでの開発ではJSdocの@typedef, @param, @returnsを記載し、コメン トでインターフェイスを補足して運用していましたが、メンテナンスコストが高いため更新漏れ が発生していました ・開発メンバーが増えて開発が活発になるにつれ、上記のようなオーバーヘッドは増える一方 なので排除したい ・リファクタ時の心理的な負担を減らしたい

ソフトウェア業界の動向 https://innovationgraph.github.com/global-metrics/programming-languages

ソフトウェア業界の動向 https://github.blog/news-insights/research/the-state-of-open-source-and-ai/#the-most-popular-programming-languages

JavaScriptで困ること ・型エラー発見の遅れ

JavaScriptで困ること ・型エラー発見の遅れ プログラミング 単体テスト 結合テスト システムテスト 運用 型エラー混入 型エラー顕在化 ・エラーの検出が遅くなるほど、修正コストは増大する 　→単体テストで「型エラー」を検出するためのテストを行うか... 　　→プログラミング中に検出できる「仕組み」を利用した方が良い...Linter,Compiler

開発コストシミュレーション ・null参照 10億ドルの間違い ・undefined障害対応コスト

開発コストシミュレーション ・null参照 10億ドルの間違い https://ja.wikipedia.org/wiki/アントニー・ホーア

開発コストシミュレーション ・undefined障害対応コスト 　・入院担当者（医師・看護師）の氏名に”undefined”と表示される 　　→　修正コスト：　750,000円 　・条件更新ボタンで”undefined”を含むエラーメッセージが表示される 　　→　修正コスト：　500,000円 　・マスタ未登録のエラータイトルに”undefined”が表示される 　　→　修正コスト：　500,000円 調査 修正 テスト リリース ×２０ 調査 修正 テスト リリース ×1０ 調査 修正 テスト リリース ×1０

SUMMARY ・TypeScriptはJavaScriptのスーパーセット ・TypeScriptはES2015(ES6)より2年以上先行してクラス機能等を実装 ・大規模案件を中心にJavaScriptからTypeScriptへの移行が進む ・GitHubソースコード量の伸び率からも、近年の人気の高さが伺える ・型エラーをプログラミング中に検出できるため、 　手戻りコスト削減やプログラマーの心理的安全性に効果が高い ・10億ドルは2024.10.27時点で、1,522.8億円 ご清聴ありがとうございました。