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

#RAKUSTechCon
©2022 RAKUS Co., Ltd.
トラブルゼロで乗り切った
TypeScript移行
株式会社ラクス開発本部第3開発部楽楽明細開発課
Eiichi Mita
2022/2/8 RAKUS Tech Conference2022

View Slide

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

View Slide

#RAKUSTechCon
今日お話しすること
9年ほど運用しているjQueryで実装された「楽楽明細」というサービ
スをTypeScriptに移行した事例を紹介します。

View Slide

#RAKUSTechCon
今回お話するプロダクト「楽楽明細」
• 請求書などの帳票を発行するSaaS
• ローンチから9年ほど経過しているが成長しているサービス

View Slide

#RAKUSTechCon
今年姉妹サービスの「楽楽電子保存」をリリースしました
• こちらもTypeScriptで実装しています

View Slide

#RAKUSTechCon
目次
• はじめに
• どう移行を進めたか
• うまくいった施策
• 移行して良かったこと/苦労したこと
• さいごに

View Slide

#RAKUSTechCon
• はじめに
• さいごに

View Slide

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

View Slide

#RAKUSTechCon
TypeScriptとは
• Microsoftが開発しているプログラミング言語
• 静的型付け言語
• Java
Scriptにトランスパイルして実行するAltJS
の一種
• TypeScriptを直接実行するのではない
• AltJS
は色々あったが現在はTypeScriptを選んでおけば良い状況

View Slide

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

View Slide

#RAKUSTechCon
• 導入ハードルの低さ
• 既存のJavaScript
のコード=TypeScript
でも有効なコードである
• 従って部分的に移行することも可能
• 最悪の場合は戻すことも可能

View Slide

#RAKUSTechCon
• 実装・トランスパイル時にエラーを早期検知できる
• 基本的にはJavaScript
は実行してみないとエラーが分からない
• 現状、フロント側のエラーを検知する仕組みは作れていないた
め開発時に発見したい

View Slide

#RAKUSTechCon
• モダンな構文が使える
• IEなどレガシーなブラウザに対応する場合でも、トランスパイル
するのでモダンな構文を使って開発できる
※TypeScriptでないと出来ない訳ではありません

View Slide

#RAKUSTechCon
• はじめに
• さいごに

View Slide

#RAKUSTechCon
どう移行を進めたか
1. 事前準備フェーズ
2. 移行フェーズ

View Slide

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

View Slide

#RAKUSTechCon
移行フェーズ
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に型情報が公開されているものは有り難く使わせていただく

View Slide

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

View Slide

#RAKUSTechCon
移行フェーズ
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

View Slide

#RAKUSTechCon
移行フェーズ
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

View Slide

#RAKUSTechCon
移行フェーズ
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,
}
}
},
]
}

View Slide

#RAKUSTechCon
移行フェーズ
@ts
-expect-errorをひたすら修正していく
• 修正すべきことをts-migrateが@ts
-expect-errorで教えてくれているので、そ
こをひたすら修正する
type="text"
ref={refY}
defaultValue=""
// @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to
see the full error message
maxLength="4"
className="text_alphanumeric input_year"
onBlur={handleInputY}
/>

View Slide

#RAKUSTechCon
• はじめに
• さいごに

View Slide

#RAKUSTechCon
うまくいった施策
TypeScript移行以外を同時にやらない
• ついでに直したくなることが沢山でてくるが我慢する
• トラブルが出たときに切り分けが難しくなるのを避ける

View Slide

#RAKUSTechCon
うまくいった施策
Diffで比較する
• 両者を比較して一致すれば動作確認せずとも問題ないと判断
できる
• 移行前のJavaScript
• 移行後のTypeScriptをトランスパイルしたJavaScript

View Slide

#RAKUSTechCon
• はじめに
• さいごに

View Slide

#RAKUSTechCon
移行して良かったこと
次のサービス開発に活かせた
• 経験があるのでスムーズにTypeScript導入できた
• 開発期間も短かかったのでいきなり導入は厳しかった

View Slide

#RAKUSTechCon
苦労したこと
圧倒的なTypeScript力不足
• 事前に勉強会して知識を得ていたが難しかった
• ts- expected- errorをどう消せば良いのか分からない
• 一つずつ調べながら地道に潰すしかない
• どうしても難しいものは後回しにしても問題ない

View Slide

#RAKUSTechCon
苦労したこと
話しきれないことは以前に記事を書いているので参照ください
• 既存のMPAなシステムをTypeScriptに移行した時のメモ
https://qiita.com/EichiSanden/items/7ebe085904d1c32ae90e

View Slide

#RAKUSTechCon
• はじめに
• さいごに

View Slide

#RAKUSTechCon
さいごに
• トラブルを発生させず移行を乗り切ることができた
• 無理しないことが重要
• 新しいサービスも繋げることが出来るので、レガシーシステムの技
術刷新は重要

View Slide

#RAKUSTechCon
ご清聴ありがとうございました

View Slide

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

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

A1

More Decks by A1

Other Decks in Programming

Featured

Transcript