CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようにJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsとTypeScriptの概要を紹介しました。今回はVue.jsのプロジェクト作成やビルドなどができるツール「Vue CLI」の利用法を説明します。

目次

はじめに

 本連載では、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で生成することも可能です。

図1:Vue CLIの公式サイト
図1: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」は、パッケージを(プロジェクト単位ではなく)システム全体にインストールすることを意味します。

[リスト1]Vue CLIをインストールするコマンド
npm install -g @vue/cli

 なお、インストール済みのVue CLIをアップデートするには、リスト2のコマンドを実行します。

[リスト2]Vue CLIをアップデートするコマンド
npm update -g @vue/cli

Vue CLIでプロジェクトを生成して実行してみよう

 それでは、インストールされたVue CLIでTypeScript対応のVue.jsプロジェクトを生成して、そのまま実行してみます。実行すると、図2のWebページが表示されます。

図2:Vue CLIで生成したTypeScript対応Vue.jsプロジェクト(p001-vue-cli-init)
図2:Vue CLIで生成したTypeScript対応Vue.jsプロジェクト(p001-vue-cli-init)

 Vue CLIでプロジェクトを生成するには、リスト3の通り、「vue create」コマンドにプロジェクト名を指定して実行します。

[リスト3]Vue CLIでプロジェクトを生成するコマンド
vue create <プロジェクト名>

 実行すると、コンソール上に図3の選択肢が表示されます。矢印キーで選択肢の上下を移動して、改行キーで選択できます。選択肢にはVue.jsのバージョン2(Vue 2)またはバージョン3(Vue 3)を利用するデフォルト設定が表示されますが、本記事ではデフォルト設定は利用せず、「Manually select features」を選択します。

図3 Vue CLIが提示するプロジェクト種類
図3 Vue CLIが提示するプロジェクト種類

 次の表示で、プロジェクトに必要となる機能を選択できます。矢印キーで上下に移動して、スペースキーで選択/選択解除できます。ここでは「TypeScript」を選択し、それ以外はデフォルトのままとします。そのほかの選択肢については、必要となった時に本連載で随時説明していきます。

図4:プロジェクトの機能で「TypeScript」を選択
図4:プロジェクトの機能で「TypeScript」を選択

 プロジェクトで利用するVue.jsのバージョンを選択します。本記事ではVue 3を利用するので「3.x」を選択します。

図5:Vue.jsのバージョンは「3.x」を選択
図5:Vue.jsのバージョンは「3.x」を選択

 JavaScript(TypeScript)のクラス形式でコンポーネント(画面を構成する要素)を記述するか指定します。「y/N」と表示されている場合、大文字のほう(ここでは「N」=No)がデフォルトです。今回は改行キーをそのまま押して、デフォルトを受け入れます。

図6:クラス形式のコンポーネント記述は「N」
図6:クラス形式のコンポーネント記述は「N」

 JavaScriptの最新記法を、さまざまなブラウザーでサポートされる記法に変換するツールBabelを利用するかを指定します。「Y/n」となっているので、改行キーをそのまま押して、デフォルトのYesを受け入れます。

図7:Babelの利用は「Y」
図7:Babelの利用は「Y」

 ソースコードのLint(構文チェック)、フォーマットの設定を指定します。デフォルトをそのまま受け入れます。利用方法の詳細は後述します。

図8:Lint、フォーマットの設定
図8:Lint、フォーマットの設定

 Lint、フォーマットの追加設定を行います。デフォルトで選択されている「Lint on save」(保存時にLintを実行)をそのまま受け入れます。

図9:Lint、フォーマットの追加設定
図9:Lint、フォーマットの追加設定

 設定ファイルの場所を指定します。デフォルトではpackage.jsonとは別に設定ファイルを置くようになっているため、そのまま受け入れます。

図10:設定ファイルの場所を指定
図10:設定ファイルの場所を指定

 最後に、ここまで選択してきたプロジェクト設定をデフォルトにするか質問されるので、好みに応じて選択してください。

図11:プロジェクト設定を保存するかを選択
図11:プロジェクト設定を保存するかを選択

 全ての選択が終わると、Vue CLIがプロジェクトを自動的に生成します。プロジェクト生成後、そのフォルダーに移動して「npm run serve」コマンドを実行すると、プロジェクトを実行できます。Webブラウザーで「http://localhost:8080/」を表示すると、図3の通り表示されることが確認できます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5