はじめに
本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。前回記事では導入として、Vue.jsとTypeScriptそれぞれを単独で利用するサンプルを説明しました。
前回のVue.jsを利用したサンプルでは、Vue.jsのJavaScriptをHTMLの<script>タグで直接参照して実行しました。この方法ではWebページの一部にVue.jsを簡単に適用できる反面、画面を複数のコンポーネントで構成したり、画面遷移を実装したりする、より本格的なWebページの構築には不向きです。
より本格的なWebページプロジェクトをVue.jsで作成するには、CLI（コマンドライン）ツールである「Vue CLI」が利用できます。Vue CLIでは、Vue.jsのプロジェクトを生成、ビルド、実行するコマンドが利用できます。TypeScript対応のVue.jsをVue CLIで生成することも可能です。
本記事では、より本格的なVue.js開発への入り口として、Vue CLIをインストールしてVue.jsプロジェクトを生成し、ビルド、実行する手順を、サンプルとともに説明します。また、Vue CLIで生成したプロジェクトをもとに、前回記事と同じ内容のサンプルを実装して、Vue CLIを利用した開発を体験していきます。
対象読者
- これからVue.jsに入門したい方
- Vue.jsやTypeScriptについて一から学びたい方
- コーディング以外の操作はできるだけツールに任せたい方
必要な環境
本記事のサンプルコードは、以下の環境で動作を確認しています。
- Windows 10 64bit版
- Node.js v14.17.4 64bit版
- Vue CLI 4.5.13
- Vue.js 3.1.5
- TypeScript 4.1.6
- Microsoft Edge 92.0.902.67
サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run serve」コマンドを実行して、Webブラウザーで「http://localhost:8080/」を表示します。
Vue CLIのインストール、更新
Vue CLIをインストールするには、Node.jsのパッケージマネージャーnpmを利用します。リスト1のコマンドを実行すると、Vue CLIがシステムにインストールされます。「-g」は、パッケージを（プロジェクト単位ではなく）システム全体にインストールすることを意味します。
npm install -g @vue/cli
なお、インストール済みのVue CLIをアップデートするには、リスト2のコマンドを実行します。
npm update -g @vue/cli
Vue CLIでプロジェクトを生成して実行してみよう
それでは、インストールされたVue CLIでTypeScript対応のVue.jsプロジェクトを生成して、そのまま実行してみます。実行すると、図2のWebページが表示されます。
Vue CLIでプロジェクトを生成するには、リスト3の通り、「vue create」コマンドにプロジェクト名を指定して実行します。
vue create <プロジェクト名>
実行すると、コンソール上に図3の選択肢が表示されます。矢印キーで選択肢の上下を移動して、改行キーで選択できます。選択肢にはVue.jsのバージョン2（Vue 2）またはバージョン3（Vue 3）を利用するデフォルト設定が表示されますが、本記事ではデフォルト設定は利用せず、「Manually select features」を選択します。
次の表示で、プロジェクトに必要となる機能を選択できます。矢印キーで上下に移動して、スペースキーで選択／選択解除できます。ここでは「TypeScript」を選択し、それ以外はデフォルトのままとします。そのほかの選択肢については、必要となった時に本連載で随時説明していきます。
プロジェクトで利用するVue.jsのバージョンを選択します。本記事ではVue 3を利用するので「3.x」を選択します。
JavaScript（TypeScript）のクラス形式でコンポーネント（画面を構成する要素）を記述するか指定します。「y/N」と表示されている場合、大文字のほう（ここでは「N」＝No）がデフォルトです。今回は改行キーをそのまま押して、デフォルトを受け入れます。
JavaScriptの最新記法を、さまざまなブラウザーでサポートされる記法に変換するツールBabelを利用するかを指定します。「Y/n」となっているので、改行キーをそのまま押して、デフォルトのYesを受け入れます。
ソースコードのLint（構文チェック）、フォーマットの設定を指定します。デフォルトをそのまま受け入れます。利用方法の詳細は後述します。
Lint、フォーマットの追加設定を行います。デフォルトで選択されている「Lint on save」（保存時にLintを実行）をそのまま受け入れます。
設定ファイルの場所を指定します。デフォルトではpackage.jsonとは別に設定ファイルを置くようになっているため、そのまま受け入れます。
最後に、ここまで選択してきたプロジェクト設定をデフォルトにするか質問されるので、好みに応じて選択してください。
全ての選択が終わると、Vue CLIがプロジェクトを自動的に生成します。プロジェクト生成後、そのフォルダーに移動して「npm run serve」コマンドを実行すると、プロジェクトを実行できます。Webブラウザーで「http://localhost:8080/」を表示すると、図3の通り表示されることが確認できます。
