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
91
ステップアップOSSコントリビュート
pvcresin
0
460
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
400
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
180
React はじめの一歩
pvcresin
1
250
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
160
Other Decks in Technology
See All in Technology
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
260
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
580
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
Modern Linux
oracle4engineer
PRO
0
150
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
260
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1k
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
580
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Writing Fast Ruby
sferik
628
62k
Site-Speed That Sticks
csswizardry
10
820
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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
俺たちの戦いはこれからだ