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
text-box-trim について 1 分で
pvcresin
0
120
Web IDEの進化とそれを支える技術
pvcresin
0
90
ステップアップOSSコントリビュート
pvcresin
0
460
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
400
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
170
React はじめの一歩
pvcresin
1
250
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
150
Other Decks in Technology
See All in Technology
TypeScript入門
recruitengineers
PRO
35
11k
Language Update: Java
skrb
2
230
進捗
ydah
2
230
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
240
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
330
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
730
まだ間に合う! StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
minorun365
PRO
11
750
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1.1k
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
5
1.4k
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
1
400
生成AI時代のデータ基盤
shibuiwilliam
4
2.6k
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
2k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Ace a Technical Interview
jacobian
279
23k
GitHub's CSS Performance
jonrohan
1032
460k
Agile that works and the tools we love
rasmusluckow
330
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
It's Worth the Effort
3n
187
28k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
A designer walks into a library…
pauljervisheath
207
24k
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
俺たちの戦いはこれからだ