JavaScriptからTypeScriptへ徐々に移行していくには？
2021.12.20
JavaScript が不便なら、TypeScript を使えばいいじゃない？
JavaScript で規模の大きい開発をすると、「JavaScript って不便だな…」と思うこと、ありませんか？
- 実行時エラーのデバッグに時間がかかる
- コードが読みづらく、修正が大変
- 静的型付け言語にあるような「型」を使いたい
こんな悩みは、「TypeScript」を使えば改善できますよ！
今回は、TypeScript 未経験でも、JavaScript からスムーズに移行する方法を解説していきます！
JavaScript から TypeScript に移行するメリット
JavaScript から TypeScript へ移行すると、以下のような嬉しいことがあります。
- 型があるので、実行前にコンパイラがエラーを検知
- コードの保守性の向上
- 「変換前の TypeScript」と「変換後の JavaScript」はほぼ同じ
- 変換するだけなので、実行速度・実行結果に影響がない
- 他の altJS と違い、移行がしやすい
- TypeScript の型システムを深く知らなくてもOK
このように、TypeScript は保守性も高く、JavaScript から移行しやすい言語になっています。
次に、TypeScript のコンパイラがどのくらい便利なのか、例をあげて解説していきましょう。
TypeScript のコンパイルエラー例①
例えば、以下のような JavaScript のコードがあったとします。
1 2 3 | var num = 123; num = 'message'; // イレギュラーな代入 num = num * 7; |
変数 num を数値「123」で宣言し、文字列「message」を代入してから、「7」を掛けています。
本来は、数値「123」に7を掛けたかったのに、文字列「message」を代入したので、結果は「NaN」となってしまいました。
この例では、わざと途中で文字列を代入しました。
しかし、実際にはもっとわかりにくいところで、このような代入が行われている場合もあるでしょう。
そんな時、JavaScript では間違いに気付きにくいのです。
でも TypeScript なら、コーディング時にエディタがエラーを出してくれるんです！
TypeScript のコンパイルエラー例②
さらに便利なのが、オブジェクトのプロパティを参照する場合です。
例えば、ある API から JSON を取得した時や、標準 API の関数を使用したい時。
JavaScript では、たとえプロパティ名を打ち間違えたとしても、実行前にはエラーになりません。
（実行後にエラーが出るか、undefined になるだけです）
しかし TypeScript なら、プロパティ名を打ち間違えた際は、しっかりエラーを表示してくれます。
こちらは、window.confirm を使いたい時に、間違えて window.conferm とタイプしてしまった例です。
こんな時、TypeScript ではプログラムを実行する前にエラーが表示されます。
（しかも、ご丁寧に「window.confirm の間違いじゃない？」と教えてくれます）
このように、JavaScript では気付きにくいエラーも、TypeScript なら丁寧に教えてくれるのです！
TypeScript の導入・移行方法を解説
それでは実際に、JavaScript から TypeScript へ移行する方法を見ていきましょう！
今回は、複雑な型システムを知らなくても TypeScript に移行できるように、より簡易的な移行方法をご紹介します。
事前にインストールするもの
TypeScript を導入するには、最低限以下のものが必要です。
- npm(Node Package Manager)をインストール
- TypeScript をインストール
npm をインストール
npm はコマンドを使ってインストールすることもできますが、今回はインストーラを使います。
node.js 公式ページから、Mac 用のインストーラ（LTS）をダウンロードして起動してください。
インストールが完了したら、以下のコマンドを実行して確認してみましょう。
1 | $ npm -v |
1 | $ node -v |
TypeScript インストール
TypeScript をインストールするには、以下のコマンドを実行してください。
1 | $ npm install -g TypeScript |
これで、事前準備は完了です。
TypeScript を使う最小限の構成
JavaScript のプロジェクトをいきなり TypeScript へ移行するのはさすがに難しいです。
そのため、まずは最小限の構成を作ってみましょう。
TypeScript は、JavaScript へ変換するためのものなので、基本的には2つのディレクトリが必要です。
- TypeScript ファイルが置かれているディレクトリ（例：src)
- TypeScript をコンパイルした出力先のディレクトリ（例：dist、build)
以下のような構成を参考にしてください。
1 2 3 4 5 6 | root/ ├── tsconfig.json （設定ファイル） ├── dist/ （出力先ディレクトリ） ├── src/ （変換前ファイルが置かれているディレクトリ） ├── index.ts ├── sample.ts |
TypeScript を使うには、設定ファイルが必要
TypeScript を使う際、コンパイルのオプションを設定するファイル「tsconfig.json」を作成する必要があります。
最低限、以下のように設定するといいでしょう！
1 2 3 4 5 6 7 8 9 10 11 12 | { "compilerOptions": { "outDir": "./dist", "target": "es5", "module": "es2015", "esModuleInterop": true, }, "include": [ "./src/**/*" ] } |
outDir と include の設定
ここでの重要な設定項目は「outDir」と「include」です。
| outDir | 変換後のファイルが出力されるディレクトリ（ここでは dist を指定） |
| include | 変換するファイルが置いてあるディレクトリ（ここでは src 以下の全ファイルを指定） |
詳しい設定方法に関しては、以下のページをご参照ください。
【tsconfig.json｜TypeScript 日本語ハンドブック】
http://js.studio-kingdom.com/typescript/project_configuration/tsconfig_json
tsc コマンドを実行
あとは、プロジェクトルートで tsc コマンドを実行すれば、TypeScript を JavaScript へ変換することができます。
1 | tsc |
これで、変換されたファイルが出力先のディレクトリ（dist）へ出力されるはずです。
tsc: command not foundと表示されてしまう時
「command not found」と表示されてしまう場合、Path が通っていないことがほとんどです。
npm がグローバルにインストールされているディレクトリ内に、tsc が入っているかどうか確認します。
1 2 | $ ls `npm bin -g` npm tsc node |
tsc が入っていることが確認できたら、 npm bin -g で表示されたパスを通すようにします。
以下のコマンドで、「.bash_profile」にパスを通しましょう。
1 2 | $ echo "export PATH=\$PATH:`npm bin -g`" >> ~/.bash_profile $ source .bash_profile |
これで、tsc コマンドが使えるようになっているはずです。
既存の JavaScript プロジェクトを TypeScript に移行するコツ
既存の JavaScript プロジェクトを TypeScript に移行する場合の、基本的なプロセスは以下の通りです。
- 拡張子を「.js」から「.ts」に変更する
- コンパイルエラーを修正する
拡張子を .js から .ts に変更する
js ファイルの拡張子を、全て「.ts」に変更していきます。
rename コマンドを使って一括で変換すると便利です！
1 | rename 's/.js/.ts/' *.js |
コンパイルエラーを修正する
コンパイルエラーの修正は、「プログラムが動くことを優先する」のがポイントです。
any 型を使う
一旦何も考えずに「any型」を使用するようにしましょう。
プロジェクトによっては、JavaScript のコードが実はエラーだらけ…という場合もあるので、「any」型を使えばエラーを抑制することができます。
1 2 3 4 | var num = 123; var str = 'hey'; str = num as any; // any型でキャスト |
1 2 3 4 5 | function calc(): any { return 7; } var str = 'hello'; str = calc(); // calc()がany型になるので、コンパイルは通せる |
リアルタイムにエラーを監視する
また、以下のコマンドを使えば、エラーをリアルタイムに監視することも可能です。
1 | tsc --watch |
コンパイルエラーが修正できたら、あとは自分のお好みの設定をしたり、any 型をなるべく減らしたりしましょう。
JavaScript → TypeScript の移行ツール「ts-migrate」を使ってみる
2020年8月に Airbnb がリリースした移行ツール「ts-migrate」を使うのもひとつの手です。
【ts-migrate】
https://www.npmjs.com/package/ts-migrate
ts-migrate をインストール
以下のコマンドでインストールし、実行してみましょう！
1 2 | $ npm install --save-dev ts-migrate $ npx ts-migrate-full src # 「src」には、変換するJavaScriptが置いてあるディレクトリを指定 |
実行すると、以下のような注意文が出て来るので確認し、特に問題なければ「y」を入力します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Welcome to TS Migrate! :D This script will migrate a frontend folder to a compiling (or almost compiling) TS project. It is recommended that you take the following steps before continuing... 1. Make sure you have a clean git slate. Run `git status` to make sure you have no local changes that may get lost. Check in or stash your changes, then re-run this script. 2. Check out a new branch for the migration. For example, `git checkout -b v97ug--ts-migrate` if you're migrating several folders or `git checkout -b v97ug--ts-migrate-src` if you're just migrating src. 3. Make sure you're on the latest, clean master. `git fetch origin master && git reset --hard origin/master` 4. Make sure you have the latest npm modules installed. `npm install` or `yarn install` If you need help or have feedback, please file an issue on Github! Continue? (y/N) |
次に、このような表示が出ますが、tsc の読み込み先を変更しないなら、そのまま Enter キーを押しましょう。
1 | Set a custom path for the TypeScript compiler. (It's an optional step. Skip if you don't need it. Default path is ./node_modules/.bin/tsc.): |
あとは、自動的に TypeScript ファイルに変換してくれるはずです。
TypeScript をサポートしているエディタを使用する
TypeScript に移行するなら、強力な補完機能があるエディタを使ったほうが、作業効率が上がります。
TypeScript のコーディングにおすすめなエディタを挙げておきます。
【Visual Studio Code】
https://code.visualstudio.com/
JetBrains 系の IDE なら、「IntelliJ」や「WebStorm」などがおすすめです。
【JetBrains】
https://www.jetbrains.com/ja-jp/
もっと気軽に TypeScript を試してみるには？
ここまで見てきて「実際に TypeScript に触ってみたい！」と思った方もいるのではないでしょうか？
以下のサイトでは、Web 上で気軽に TypeScript を試すことができます。
【TypeScript：TS Playground】
https://www.TypeScriptlang.org/play
エラー表示もちゃんと出るので、TypeScript のコードを試したい時は、すぐに確認できて便利ですよ。
さいごに
この記事では、TypeScript のメリットや、JavaScript から TypeScript へ移行する方法をお伝えしました。
TypeScript は、仕組みを深く知らなくても動かすことができる上、導入コストも低めで、プログラム実行前にエラーチェックもできて便利です。
最初は any 型で乗り切れますが、徐々に TypeScript の機能を知るうちに、その便利さ・柔軟さ・保守性の高さに驚くと思います。
この記事が、TypeScript に触れる第一歩となれば幸いです。
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
- ITエンタメ7月 14, 2023【クリス・ワンストラス】GitHubが出来るまでとソフトウェアの未来
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
