コマンドラインツール「Vue CLI」で本格的なVue.jsプロジェクトを作成しよう

TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法 第2回

Vue CLIを利用したビルドとLint

　Vue CLIを利用して生成したプロジェクトでは、Vue CLIのコマンドを利用してビルドやLint（構文チェック）が行えます。ここでは簡単に利用方法を説明します。

　ビルドを行うには「npm run build」コマンドを実行します。プロジェクトのdistフォルダーにビルド結果が出力されるので、この内容をWebサーバーにアップロードすると、ビルドされたWebページを表示できます。

図15：ビルドコマンドで出力されたdistフォルダー

　Lintを行うには「npm run lint」コマンドを実行します。Lintを実行すると、ソースコードに含まれる好ましくない記述を指摘してくれます。例えば、リスト7のApp.vueに、リスト8（1）の通り参照されない変数を追加してみます。

［リスト8］参照されない変数を含む実装（p003-vue-cli-lint/src/App.vue）

onButtonClicked() {
  const unusedMessage = 'ようこそ' // この変数は参照されない ...（1）
  const myFirstTS = new MyFirstTS(this.name)
  alert(myFirstTS.getGreetText())
}

　リスト8を含むプロジェクトで「npm run lint」コマンドでLintを実行すると、図16の通りunusedMessage変数が参照されない旨が指摘されます。

図16：Lintが未使用変数を指摘する様子（p003-vue-cli-lint）

　また、プロジェクト生成時（図9）に「Lint on save」（保存時にLintを実行）を指定している場合、「npm run serve」コマンド実行後にソースコードを保存するたびにLintが実行されて、結果が表示されます。

図17：ソースコード保存時のLint出力（p003-vue-cli-lint）

まとめ

　本記事では、Vue.jsのCLIツール「Vue CLI」のインストール、プロジェクトの生成や実行、ビルド、Lintの方法を説明しました。Vue CLIでVue.jsプロジェクトを生成して、TypeScriptのクラスを利用した実装ができることを確認しました。

　実は、Vue CLI以外にもVue.jsのプロジェクトを作成できるCLIツールがあります。「Vite」（フランス語で「速い」の意味。発音は「ヴィート」）というこのツールは、名前通りの実行速度や、Vue.js以外にもReactなど複数のプロジェクトテンプレートに対応する機能で注目を集めています。次回は少し寄り道をして、このCLIツールViteについて説明していきます。

参考資料

• Vue.js（Vue 3）
• Vue.js（Vue 2）
• Vue CLI