![広告メディア事業部](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2022%2F08%2Fcropped-icon_tobaru_2_150150-150x150.png&w=64&q=75)
JavaScriptからTypeScriptへ徐々に移行していくには?
![広告メディア事業部](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2022%2F08%2Fcropped-icon_tobaru_2_150150-150x150.png&w=64&q=75)
エンジニアになろう!
![JavaScriptからTypeScriptへ徐々に移行していくには?](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2021%2F02%2Fjavascript-typescript-migration.png&w=3840&q=75)
JavaScript が不便なら、TypeScript を使えばいいじゃない?
JavaScript で規模の大きい開発をすると、「JavaScript って不便だな…」と思うこと、ありませんか?
- 実行時エラーのデバッグに時間がかかる
- コードが読みづらく、修正が大変
- 静的型付け言語にあるような「型」を使いたい
こんな悩みは、「TypeScript」を使えば改善できますよ!
今回は、TypeScript 未経験でも、JavaScript からスムーズに移行する方法を解説していきます!
JavaScript から TypeScript に移行するメリット
JavaScript から TypeScript へ移行すると、以下のような嬉しいことがあります。
- 型があるので、実行前にコンパイラがエラーを検知
- コードの保守性の向上
- 「変換前の TypeScript」と「変換後の JavaScript」はほぼ同じ
- 変換するだけなので、実行速度・実行結果に影響がない
- 他の altJS と違い、移行がしやすい
- TypeScript の型システムを深く知らなくてもOK
このように、TypeScript は保守性も高く、JavaScript から移行しやすい言語になっています。
次に、TypeScript のコンパイラがどのくらい便利なのか、例をあげて解説していきましょう。
TypeScript のコンパイルエラー例①
例えば、以下のような JavaScript のコードがあったとします。
1var num = 123;
2num = 'message'; // イレギュラーな代入
3num = num * 7;
変数 num を数値「123」で宣言し、文字列「message」を代入してから、「7」を掛けています。
本来は、数値「123」に7を掛けたかったのに、文字列「message」を代入したので、結果は「NaN」となってしまいました。
この例では、わざと途中で文字列を代入しました。
しかし、実際にはもっとわかりにくいところで、このような代入が行われている場合もあるでしょう。
そんな時、JavaScript では間違いに気付きにくいのです。
でも TypeScript なら、コーディング時にエディタがエラーを出してくれるんです!
![TypeScript のコンパイルエラー例①](https://api.rightcode.co.jp/wp-content/uploads/2021/02/1-javascript-typescript-migration.png)
TypeScript のコンパイルエラー例②
さらに便利なのが、オブジェクトのプロパティを参照する場合です。
例えば、ある API から JSON を取得した時や、標準 API の関数を使用したい時。
JavaScript では、たとえプロパティ名を打ち間違えたとしても、実行前にはエラーになりません。
(実行後にエラーが出るか、undefined になるだけです)
しかし TypeScript なら、プロパティ名を打ち間違えた際は、しっかりエラーを表示してくれます。
![TypeScript のコンパイルエラー例②](https://api.rightcode.co.jp/wp-content/uploads/2021/02/2-javascript-typescript-migration.jpg)
こちらは、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)
以下のような構成を参考にしてください。
1root/
2├── tsconfig.json (設定ファイル)
3├── dist/ (出力先ディレクトリ)
4├── src/ (変換前ファイルが置かれているディレクトリ)
5 ├── index.ts
6 ├── sample.ts
TypeScript を使うには、設定ファイルが必要
TypeScript を使う際、コンパイルのオプションを設定するファイル「tsconfig.json」を作成する必要があります。
最低限、以下のように設定するといいでしょう!
1{
2 "compilerOptions": {
3 "outDir": "./dist",
4 "target": "es5",
5 "module": "es2015",
6 "esModuleInterop": true,
7
8 },
9 "include": [
10 "./src/*/*"
11 ]
12}
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 へ変換することができます。
1tsc
これで、変換されたファイルが出力先のディレクトリ(dist)へ出力されるはずです。
tsc: command not foundと表示されてしまう時
「command not found」と表示されてしまう場合、Path が通っていないことがほとんどです。
npm がグローバルにインストールされているディレクトリ内に、tsc が入っているかどうか確認します。
1$ ls `npm bin -g`
2npm tsc node
tsc が入っていることが確認できたら、npm bin -g で表示されたパスを通すようにします。
以下のコマンドで、「.bash_profile」にパスを通しましょう。
1$ echo "export PATH=\$PATH:\`npm bin -g\`" >> ~/.bash_profile
2$ source .bash_profile
これで、tsc コマンドが使えるようになっているはずです。
既存の JavaScript プロジェクトを TypeScript に移行するコツ
既存の JavaScript プロジェクトを TypeScript に移行する場合の、基本的なプロセスは以下の通りです。
- 拡張子を「.js」から「.ts」に変更する
- コンパイルエラーを修正する
拡張子を .js から .ts に変更する
js ファイルの拡張子を、全て「.ts」に変更していきます。
rename コマンドを使って一括で変換すると便利です!
1rename 's/.js/.ts/' *.js
コンパイルエラーを修正する
コンパイルエラーの修正は、「プログラムが動くことを優先する」のがポイントです。
any 型を使う
一旦何も考えずに「any型」を使用するようにしましょう。
プロジェクトによっては、JavaScript のコードが実はエラーだらけ…という場合もあるので、「any」型を使えばエラーを抑制することができます。
1var num = 123;
2var str = 'hey';
3
4str = num as any; // any型でキャスト
1function calc(): any {
2 return 7;
3}
4var str = 'hello';
5str = calc(); // calc()がany型になるので、コンパイルは通せる
リアルタイムにエラーを監視する
また、以下のコマンドを使えば、エラーをリアルタイムに監視することも可能です。
1tsc --watch
コンパイルエラーが修正できたら、あとは自分のお好みの設定をしたり、any 型をなるべく減らしたりしましょう。
JavaScript → TypeScript の移行ツール「ts-migrate」を使ってみる
2020年8月に Airbnb がリリースした移行ツール「ts-migrate」を使うのもひとつの手です。
【ts-migrate】
https://www.npmjs.com/package/ts-migrate
ts-migrate をインストール
以下のコマンドでインストールし、実行してみましょう!
1$ npm install --save-dev ts-migrate
2$ npx ts-migrate-full src # 「src」には、変換するJavaScriptが置いてあるディレクトリを指定
実行すると、以下のような注意文が出て来るので確認し、特に問題なければ「y」を入力します。
1Welcome to TS Migrate! :D
2
3This script will migrate a frontend folder to a compiling (or almost compiling) TS project.
4It is recommended that you take the following steps before continuing...
5
61. Make sure you have a clean git slate.
7 Run `git status` to make sure you have no local changes that may get lost.
8 Check in or stash your changes, then re-run this script.
9
102. Check out a new branch for the migration.
11 For example, `git checkout -b v97ug--ts-migrate` if you're migrating several folders or
12 `git checkout -b v97ug--ts-migrate-src` if you're just migrating src.
13
143. Make sure you're on the latest, clean master.
15 `git fetch origin master && git reset --hard origin/master`
16
174. Make sure you have the latest npm modules installed.
18 `npm install` or `yarn install`
19
20If you need help or have feedback, please file an issue on Github!
21Continue? (y/N)
次に、このような表示が出ますが、tsc の読み込み先を変更しないなら、そのまま Enter キーを押しましょう。
1Set 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:TS Playground](https://api.rightcode.co.jp/wp-content/uploads/2021/02/3-javascript-typescript-migration.jpg)
エラー表示もちゃんと出るので、TypeScript のコードを試したい時は、すぐに確認できて便利ですよ。
さいごに
この記事では、TypeScript のメリットや、JavaScript から TypeScript へ移行する方法をお伝えしました。
TypeScript は、仕組みを深く知らなくても動かすことができる上、導入コストも低めで、プログラム実行前にエラーチェックもできて便利です。
最初は any 型で乗り切れますが、徐々に TypeScript の機能を知るうちに、その便利さ・柔軟さ・保守性の高さに驚くと思います。
この記事が、TypeScript に触れる第一歩となれば幸いです。
こちらの記事もオススメ!
2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...
ライトコードでは、エンジニアを積極採用中!
ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
![広告メディア事業部](/_next/image?url=https%3A%2F%2Fapi.rightcode.co.jp%2Fwp-content%2Fuploads%2F2022%2F08%2Fcropped-icon_tobaru_2_150150-150x150.png&w=3840&q=75)
「好きを仕事にするエンジニア集団」の(株)ライトコードです! ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。 現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。 いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。 システム開発依頼・お見積もり大歓迎! また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です! インターンや新卒採用も行っております。 以下よりご応募をお待ちしております! https://rightcode.co.jp/recruit