トラブルゼロで乗り切ったTypeScript移行/trouble-free TypeScript migration

by A1

Slide 1

Slide 1 text

Slide 2

Slide 2 text

#RAKUSTechCon ©2022 RAKUS Co., Ltd. 自己紹介 Eiichi Mita @eichisanden ■経歴ソフトハウス、独立系Sierを経て2014 年ラクスに入社。以来、楽楽明細の開発・運用を担当テックリードとしてフロントエンドからバックエンドまで継続的な改善や、スクラムマスターとしてチームビルディングに取り組んでいる趣味はスプラトゥーン2（Sからウデマエが上がらないのが悩み）

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

#RAKUSTechCon ©2022 RAKUS Co., Ltd. 移行前の状況と前提事項 • リリースは数か月サイクル • 開発メンバーの中に実務でのTypeScript経験者はいない • 古くからの機能はjQuery、新しい機能はReactで実装されている • JavaScript ファイル数は100程度の規模 • 作業に関わるのは自分と若手2名（週数時間ずつ） • 開発を止めずに移行する必要がある • npmでのパッケージ管理やgulpでのビルドは以前から行っていた • IEなど古いブラウザもサポートする必要がある

Slide 9

Slide 9 text

Slide 10

Slide 10 text

#RAKUSTechCon ©2022 RAKUS Co., Ltd. なぜTypeScriptに移行するのか？/ 良いところ • Reactを導入したことでフロントエンドで型が重要に • jQueryはDOM操作が中心で、複雑なデータ構造を扱うケースが少なく、型はそこまで重要ではなかった • Reactではstateやpropsなどでデータ構造を扱うため、型がないと安全にプログラミングすることが難しいと感じた

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

#RAKUSTechCon ©2022 RAKUS Co., Ltd. 事前準備フェーズ「プログラミングTypeScript」読書会を実施 • 少し難しいがこの1 冊で大体分かる良書 • 有志で全10回開催 • 全社的に声を掛けたので20名が参加 • TypeScriptの人気がうかがえる • 会社に20冊買ってもらいました • ほぼ素人だったが無理やり講師に • 講師駆動学習 • 参加できないメンバーにはポイントに絞った勉強会を別途開催

Slide 17

Slide 17 text

#RAKUSTechCon ©2022 RAKUS Co., Ltd. 移行フェーズ Definitely Typed(ライブラリの型情報)をインストールする $ npm install -D @types/jquery @types/jqueryui @types/react @types/react-dom @types/react-router-dom • 移行時は手動でインストールしましたがtypesyncで一括にインストールすることも可能 $ typesync ├─ + @types/react-datepicker ├─ + @types/react-redux ├─ + @types/react-router ├─ + @types/react-select ├─ + @types/react ├─ + @types/react-dom └─ + @types/styled-components • Js で公開されているライブラリの型情報がないとTypeScriptがエラーになるため必要 • GitHubのDefinitely Typedに型情報が公開されているものは有り難く使わせていただく

Slide 18

Slide 18 text

#RAKUSTechCon ©2022 RAKUS Co., Ltd. 移行フェーズ Definitely Typedで公開されていないものは自作する interface JQuery { // jquery.datePicker.js datePicker(options: any); // jquery.ajaxfileupload.js ajaxfileupload(options: any); } • jQueryプラグインなど古いライブラリは公開されていないものがある • それほど多くなかったので使用しているメソッドに絞って自作しました • 今後呼び出し箇所を増やすことはないので頑張らずanyを使用しました

Slide 19

Slide 19 text

#RAKUSTechCon ©2022 RAKUS Co., Ltd. 移行フェーズ ts-migrateを使って機械的にTypeScript化 • Airbnbが提供している移行ツール • 実行すると下記の流れで移行される • tsconfig.json生成 • 拡張子js/jsxファイルをts/tsx にリネーム • ts/tsx ファイルを一括変換 https://medium.com/airbnb-engineering/ts-migrate-a-tool-for-migrating-to-typescript-at-scale-cd23bfeb5cc

Slide 20

Slide 20 text

#RAKUSTechCon ©2022 RAKUS Co., Ltd. 移行フェーズ ts-migrateを使って機械的にTypeScript化 • 1 ステップずつ結果を確認しながら実行するのがお勧め d2e91aeb77e04ec5cb449b5687b4d435f74f4975 (HEAD -> master) [ts-migrate][src] Run TS Migrate 5dbe3669ec05232824dcb42c321d18983e451a54 [ts-migrate][src] Rename files from JS/JSX to TS/TSX bae0dfb6790808310865ceb7f00ab0c0f161013a [ts-migrate][src] Init tsconfig.json file • コミットも段階的にしてくれるので結果を確認しやすい npm run ts-migrate -- init Initialize tsconfig.json file in npm run ts-migrate -- rename *Rename files in folder from JS/JSX to TS/TSX npm run ts-migrate -- migrate *Fix TypeScript errors, using codemods npm run ts-migrate -- reignore Re-run ts-ignore on a project

Slide 21

Slide 21 text

#RAKUSTechCon ©2022 RAKUS Co., Ltd. 移行フェーズ webpackを導入 • TypeScriptのトランスパイルを行うためwebpackを導入 • 今までと同じ単位でjsファイルを出力するためentryを複数定義する entry: { ‘huge/huga.js’: ‘src/hoge/huga.ts’, ‘foo/bar.js’: ‘src/foo/bar.ts’ … }, … output: { libraryTarget: ‘umd’, filename: ‘[name]’ } module: { rules: [ { test: /¥.(ts|tsx)$/, exclude: /node_modules/, use: { loader: 'ts-loader', options: { transpileOnly: true, } } }, ] }

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text