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
100
TypeScriptがなぜ必要だったか
TypeScriptを使用する理由についてまとめました。
kouki.miura
October 27, 2024
Tweet
Share
More Decks by kouki.miura
See All by kouki.miura
ゲームとかの最初に使い方を教えてくれるアレ
koukimiura
0
38
Claude Codeでゲーム開発デビュー
koukimiura
0
75
Vite+TypeScript+Vue.jsではじめるフロントエンドプロジェクト
koukimiura
1
54
リソース制限環境下でのローカルLLM構築術
koukimiura
0
99
フロントエンドのパフォーマンスチューニング
koukimiura
7
2.5k
医療系ソフトウェアのAI駆動開発
koukimiura
1
240
レポートから見る生成AIを活用したシステム開発.
koukimiura
0
160
AWSサービスの整理と使いたい機能の概要
koukimiura
1
89
生成AIによる PHP = Node.js 変換の検証
koukimiura
0
170
Other Decks in Programming
See All in Programming
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
アセットのコンパイルについて
ojun9
0
120
AI時代のUIはどこへ行く?
yusukebe
16
8.7k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
630
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
510
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
260
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
機能追加とリーダー業務の類似性
rinchoku
2
1.2k
Featured
See All Featured
Designing for Performance
lara
610
69k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Side Projects
sachag
455
43k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Designing Experiences People Love
moore
142
24k
How STYLIGHT went responsive
nonsquared
100
5.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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億円 ご清聴ありがとうございました。