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
360
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
87
Web IDEの進化とそれを支える技術
pvcresin
0
57
ステップアップOSSコントリビュート
pvcresin
0
450
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
370
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
140
React はじめの一歩
pvcresin
1
240
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
140
Other Decks in Technology
See All in Technology
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1.2k
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.9k
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
5
6.9k
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
180
人生を左右する「即答」のススメ: 一瞬の判断を間違えないためにするべきこと
takasyou
4
530
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
410
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
3
1.8k
どうすると生き残れないのか/how-not-to-survive
hanhan1978
2
1k
User Story Mapping + Inclusive Team
kawaguti
PRO
3
550
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
230
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1369
200k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
We Have a Design System, Now What?
morganepeng
51
7.4k
Building an army of robots
kneath
303
45k
It's Worth the Effort
3n
184
28k
Being A Developer After 40
akosma
89
590k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
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
俺たちの戦いはこれからだ