こんにちは、開発チームでエンジニアをしている和田です。
最近はフロントエンドのプロジェクトを Vue2 から Vue3 に変更するという大掛かりな作業を終えてホッとしております 😌
とはいえ Web の世界は日進月歩、あらゆるライブラリのバージョンアップが常日頃行われています。我々、開発者は安全に開発を行うためにプロダクトの保守改善をしなくてはなりません。
ということで今回は Vue3 への移行を終えて TypeScript を導入することになったため、その作業手順を記事として残しておこうと思います。
背景・目的
この記事では Vue3(Vue CLI)で構築されたフロントエンドのプロジェクトに TypeScript を導入する方法について解説します。
対象読者
Vue のプロジェクトに TypeScript を導入する方法を知りたい開発者。
開発ツール・環境の概要
筆者は下記の環境下で TypeScript の導入を行いました。
- Vue v3.3.8
- Vue CLI v5.0.8
- eslint v8.53.0
- eslint-plugin-vue v9.21.1
Vue3 プロジェクトに後から TypeScript を導入する方法
それでは導入方法について解説を行っていきます。下記の手順に沿って導入を進めていきます。
- Vue CLI コマンドで TypeScript 関連ライブラリをインストール
- 自動生成された不要なファイルの削除
- eslint 系ライブラリのバージョンアップデート
- 設定ファイルの修正
- エントリーポイントのエラー修正
- ビルドできるかの確認
1. Vue CLI コマンドで TypeScript 関連ライブラリをインストール
Vue CLI には後から TypeScript を導入するための便利なコマンドがあります。
コマンドラインで vue add typescript というコマンドを実行すれば TypeScript および TypeScript に関連した必要なライブラリを一括でインストールしてくれます。
コマンド実行時にはいくつか設定のための質問に Yes or No で答える必要があります。
筆者の場合は下記のように設定しました。
| 質問 | Yes/No | 設定理由 |
|---|---|---|
| Use class-style component syntax? | No | Vue3 では Object Style によりコンポーネントを記述するため。 |
| Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? | Yes | プロジェクトにて babel を使用しているため。 |
| Convert all .js files to .ts? | No | 今回は全ての .js ファイルを .ts ファイルに変更しないため。 |
| Allow .js files to be compiled? | Yes | 既存の .js ファイルでコンパイル可能にするため。 |
| Skip type checking of all declaration files (recommended for apps)? | Yes | 全ての型宣言ファイルの確認を行う必要はないため。 |
コマンド実行後にはライブラリのインストールと下記に示す諸々のファイルの追加・変更が行われます。
- エントリーポイントが .js ファイルから .ts ファイルに変更される
- tsconfig.json ファイルが新規作成される
- .eslintrc.js ファイルに TypeScript 用の設定が追記される
- HelloWorld.vue などのサンプルコンポーネントのファイルが新規作成される
コマンド実行直後では npm run build コマンドを実行するとエラーが表示されてビルドはできませんでした。
2. 自動生成された不要なファイルの削除
ビルド実行時に表示されるエラーを解消される前に雑草を抜いていきます。
まず、自動生成された下記の不要なファイルを削除します。
- HelloWorld.vue
- HomeView.vue
3. eslint 系ライブラリのバージョンアップデート
プロジェクトに既存でインストールされていた eslint-plugin-vue と今回、新しくインストールされた @vue/eslint-config-typescript が競合することによって、エラーが発生するようになってしまいました。
それぞれをバージョンアップすれば解消可能であることが分かったので、下記のコマンドを実行しました。
npm uninstall @vue/eslint-config-typescript eslint-plugin-vue
npm i -D @vue/eslint-config-typescript eslint-plugin-vue
4. 設定ファイルの修正
.eslintrc.js ファイルに加えられた変更でエラーが発生したため、解消していきます。
今回のエラーは既存の extends と新たに追加された extends の項目が同時に存在しており、項目名が重複していました。
module.exports = { env: { node: true, }, // FIXME: キーが重複しているため一つにまとめる extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"], parserOptions: { // 省略 }, rules: { // 省略 }, extends: [ "plugin:vue/recommended", "eslint:recommended", "@vue/prettier", "@vue/typescript", ], };
extends を一つにまとめればエラーは解消されます。
5. エントリーポイントのエラー修正
最後にエントリーポイントが .js ファイルから .ts ファイルに変更されたことで、発生した TypeScript のエラー修正を行います。 ここはプロジェクトの構成次第で様々かと思いますが、筆者の環境では下記の旨を示すエラーが表示されました。
- 拡張子のないファイルのインポートをしているためファイルが見つからない
nullを取りうる値に対してメソッドを呼び出している- ライブラリから参照している型宣言ファイルが見つからない
ここではそれぞれのエラーに対する具体的な解決策については割愛させていただきます。
すべてのエラーが解消できたらビルドできるか確認していきます。
6. ビルドできるか確認
満を持してビルドです。
npm run build を実行してビルドが完了すれば無事に TypeScript が導入できたことになります。
TypeScript の導入にあたって思うこと
無事 TypeScript を導入して嬉しく思います。
しかしながらビルドの実行が少し長くなったように感じました。
Vue CLI は Vue から提供されている npm パッケージですが現在はメンテナンスモードに入っており、より高速なビルドツールである Vite への移行の風潮があります。
今回、部分的に TypeScript を導入したことにより、今後の開発でさらにビルド時間が伸びることが予想されるため Vite の導入なども検討していきたいです。
まとめ
最後まで読んでくださってありがとうございました。
今回 TypeScript を導入したことで、今後はより安全な開発が行えることに期待がもてます 🙌
TypeScript に書き換えることで、これまで潜在的だった不具合を発見しやすくなることも嬉しいですね。
この記事が同様の環境をもつ開発者のためになれば幸いです。
