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
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
Search
pvcresin
November 20, 2019
Technology
0
390
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
https://oweb.connpass.com/event/149918/
#OWEB で発表した内容になります。
pvcresin
November 20, 2019
Tweet
Share
More Decks by pvcresin
See All by pvcresin
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
690
text-box-trim について 1 分で
pvcresin
0
120
Web IDEの進化とそれを支える技術
pvcresin
0
97
ステップアップOSSコントリビュート
pvcresin
0
470
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
410
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
180
React はじめの一歩
pvcresin
1
250
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
160
Other Decks in Technology
See All in Technology
自動テストのコストと向き合ってみた
qa
0
120
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
130
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
140
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
590
o11yで育てる、強い内製開発組織
_awache
3
120
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
420
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
100
多野優介
tanoyusuke
1
430
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
1
740
BirdCLEF+2025 Noir 5位解法紹介
myso
0
190
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
BBQ
matthewcrist
89
9.8k
A Tale of Four Properties
chriscoyier
160
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Code Reviewing Like a Champion
maltzj
525
40k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Transcript
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話 @pvcresin OWEB #9
鳥山 らいか / Raika Toriyama Sansan 株式会社 Eight 事業部 フロントエンドエンジニア @pvcresin
JavaScript に静的型付けがついた言語 TypeScript とは
• API の定義ファイルをパースし、フロントエンドで使うデータ形式の JS ファイルを自動生成 • 安全で硬い作りにしたい 社内向けライブラリ フロントエンド バックエンド
API の定義ファイル
やったこと
Step1: 学ぶ
• 公式ドキュメント https://www.typescriptlang.org/docs/home.html • Qiita:TypeScript の型入門 https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a • 記事:がんばらない TypeScript
https://employment.en-japan.com/engineerhub/entry/2019/04/16/103000 • 書籍:実践 TypeScript 吉井 健文 (著) 参考になったもの
Step2: 準備
• 1ファイルずつ置き換えていく • 型チェックと変換には tsc コマンドを採用 導入方法を決める tsc いままで これから
/src /src /compiled /dist /dist
Step3: 置き換え
拡張子でルールを分けるよう変更 ESLint の設定
場所 • よく薦められるのはテストコードから • 今回はライブラリ本体のコードから始めた • テストコードがない部分があった • 本体のコードが何をしているか不明な場所が多かった ファイル
• 外部のライブラリのみ import しているもの • import がないもの • 他のファイルを import しているもの 置き換える順番
• DefinitelyTyped:http://definitelytyped.org/ ◦ @types/<package name> で探す • npm:https://www.npmjs.com/ ◦ 型定義している
package がないか探す • 自分で定義 ◦ デフォルトだと src/@types/*.d.ts 型定義ファイル
導入してよかったこと
• 型安全でない実装がエラーにより可視化された • JS の 暗黙的な型変換 に助けられていた部分が浮き彫りに • 関数がやるべきことに向き合えた •
場合によっては分割 • 命名の再考 • ある種のテスト代わりになった 導入してよかったこと
現状
None
俺たちの戦いはこれからだ