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
TypeScriptがなぜ必要だったか
Search
kouki.miura
October 27, 2024
Programming
0
91
TypeScriptがなぜ必要だったか
TypeScriptを使用する理由についてまとめました。
kouki.miura
October 27, 2024
Tweet
Share
More Decks by kouki.miura
See All by kouki.miura
Vite+TypeScript+Vue.jsではじめるフロントエンドプロジェクト
koukimiura
0
7
リソース制限環境下でのローカルLLM構築術
koukimiura
0
86
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
医療系ソフトウェアのAI駆動開発
koukimiura
1
220
レポートから見る生成AIを活用したシステム開発.
koukimiura
0
150
AWSサービスの整理と使いたい機能の概要
koukimiura
1
82
生成AIによる PHP = Node.js 変換の検証
koukimiura
0
140
Javaの学習・実行環境-JBangの概要
koukimiura
0
120
オンプレミス環境にKubernetesを構築する
koukimiura
0
300
Other Decks in Programming
See All in Programming
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
470
Vibe coding コードレビュー
kinopeee
0
350
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
850
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
670
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
210
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
AI Ramen Fight
yusukebe
0
120
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
190
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
260
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
770
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
860
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fireside Chat
paigeccino
37
3.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Raft: Consensus for Rubyists
vanstee
140
7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Scaling GitHub
holman
461
140k
Transcript
TypeScriptがなぜ必要だったか 三浦 恒樹 (MIURA KOUKI) 診療情報管理士 上級医療情報技師 医用画像情報専門技師 ドゥウェル株式会社 2024.10.27
えびてく #4
長男が飼っている ハリネズミがアイコン INTRODUCE ・ドゥウェル株式会社 (医療系IT開発・導入会社)に所属 ・マネージャー(プレイング・マネージャー) ・仕事では Java,C#,Node.js / JavaScript,TypeScript
・趣味では PHP,Node.js / JavaScript ・3児の父 ・札幌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円 調査 修正
テスト リリース ×20 調査 修正 テスト リリース ×10 調査 修正 テスト リリース ×10
SUMMARY ・TypeScriptはJavaScriptのスーパーセット ・TypeScriptはES2015(ES6)より2年以上先行してクラス機能等を実装 ・大規模案件を中心にJavaScriptからTypeScriptへの移行が進む ・GitHubソースコード量の伸び率からも、近年の人気の高さが伺える ・型エラーをプログラミング中に検出できるため、 手戻りコスト削減やプログラマーの心理的安全性に効果が高い ・10億ドルは2024.10.27時点で、1,522.8億円 ご清聴ありがとうございました。