Vue CLI入門：モダンなVue.js開発環境を構築

// ここにVueアプリケーションがマウントされる

“`

重要なのは <div id="app"></div> です。main.js で .mount('#app') と指定した要素がこれです。Vueアプリケーションの全てのコンテンツはこの要素の中に描画されます。

また、<link rel="icon" href="<%= BASE_URL %>favicon.ico"> や <title><%= htmlWebpackPlugin.options.title %></title> のように、特別な記法 (<%= ... %>) が使われています。これらはHTMLWebpackPluginというWebpackプラグインによって処理され、package.json や vue.config.js で定義された値に置き換えられたり、ビルドされたアセットへのパスが挿入されたりします。

public ディレクトリに置かれたファイルは、特に設定しない限り、ビルド出力ディレクトリのルートにコピーされます。

src/App.vue：ルートコンポーネント

App.vue はアプリケーションのルートコンポーネントです。通常、アプリケーション全体のレイアウトを定義したり、ナビゲーションバーやフッターなど、全てのページに共通する要素を配置したりします。

Routerを使用している場合は、ページごとに内容が変わる部分に <router-view/> タグを配置します。このタグの位置に、現在のURLに対応するコンポーネントが描画されます。

App.vue は単一ファイルコンポーネント (SFC) の形式で記述されています。SFCについては後述します。

.vue ファイル (単一ファイルコンポーネント – SFC)

Vue CLIプロジェクトにおけるほとんどのコンポーネントは .vue ファイルとして記述されます。これはVueの単一ファイルコンポーネント (SFC) 形式です。一つのファイルの中に、コンポーネントのテンプレート、スクリプト（JavaScript/TypeScript）、スタイル（CSS/SCSS/Lessなど）をまとめて記述できます。

“`vue

“`

• <template>: コンポーネントのHTML構造を記述します。Vueのテンプレート構文（ディレクティブ、データバインディングなど）を使用できます。
• <script>: コンポーネントのJavaScriptロジックを記述します。export default {} の中に、コンポーネントのデータ、メソッド、算出プロパティ、ライフサイクルフックなどを定義します。
• <style>: コンポーネントのCSSスタイルを記述します。

<style> タグに scoped 属性を付けると、そのスタイルは現在のコンポーネントにのみ適用されるようになります。これにより、異なるコンポーネント間でスタイルが衝突するのを防ぐことができます。Vue CLIはこれらを適切に処理（CSS Modulesなど）してくれます。

CSSプリプロセッサーを選択した場合、<style lang="scss">, <style lang="less">, <style lang="stylus"> のように lang 属性を指定することで、それぞれの言語でスタイルを記述できます。

SFCは、Webpackの vue-loader というローダーによって、ブラウザが理解できるJavaScript、HTML、CSSに分割されて処理されます。Vue CLIはこれらの設定を自動で行ってくれます。

src/router/index.js：Vue Router設定

Routerを選択した場合に生成されるファイルです。アプリケーションのルーティング設定を定義します。

“`javascript
import { createRouter, createWebHistory } from ‘vue-router’ // Vue 3の場合
// import Vue from ‘vue’ // Vue 2の場合
// import Router from ‘vue-router’ // Vue 2の場合
import HomeView from ‘../views/HomeView.vue’ // src/views/HomeView.vue をインポート

// Vue 2
// Vue.use(Router)

const routes = [
{
path: ‘/’, // パスが ‘/’ の場合
name: ‘home’, // ルート名
component: HomeView // このコンポーネントを表示する
},
{
path: ‘/about’, // パスが ‘/about’ の場合
name: ‘about’,
// route level code-splitting
// this produces a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/ webpackChunkName: “about” / ‘../views/AboutView.vue’)
// 上記はコード分割（遅延ロード）の設定例。/about にアクセスされた時に初めてAboutView.vueをロードする
}
]

// Vue 3
const router = createRouter({
history: createWebHistory(process.env.BASE_URL), // 履歴モード (history mode)
routes // 上記で定義したルーティングルール
})

/
// Vue 2
const router = new Router({
mode: ‘history’, // historyモード または ‘hash’ モード
base: process.env.BASE_URL,
routes
})
/

export default router
“`

• import ... from 'vue-router': Vue Routerライブラリをインポートします。Vue 3では createRouter と createWebHistory (または createWebHashHistory) を使います。Vue 2では Vue.use(Router) とします。
• import ... from '../views/...': 各ルートに対応するコンポーネントをインポートします。
• routes: ルーティングルールを定義した配列です。各オブジェクトは一つのルートを表します。
  • path: ブラウザのURLパスです。
  • name: そのルートに名前を付けることができます。ナビゲーションなどで便利です。
  • component: そのパスにアクセスされたときに表示するコンポーネントを指定します。import(...) を使うと、そのコンポーネントのコードが別のJavaScriptファイルに分割され、必要になったときに遅延ロードされるようになります (Code Splitting)。
• createRouter({...}) (Vue 3) または new Router({...}) (Vue 2): Routerインスタンスを作成します。
  • history: createWebHistory(process.env.BASE_URL) (Vue 3) または mode: 'history' (Vue 2): 履歴モード (history または hash) を設定します。process.env.BASE_URL はVue CLIが設定する環境変数で、アプリケーションがサブディレクトリに配置される場合などに使用されます。
  • routes: 定義したルーティングルールを渡します。
• export default router: 作成したRouterインスタンスを main.js でインポートできるようにエクスポートします。

src/store/index.js：Vuexストア設定

Vuexを選択した場合に生成されるファイルです。アプリケーションの状態管理を行うストアを定義します。

“`javascript
import { createStore } from ‘vuex’ // Vue 3の場合
// import Vue from ‘vue’ // Vue 2の場合
// import Vuex from ‘vuex’ // Vue 2の場合

// Vue 2
// Vue.use(Vuex)

export default createStore({ // Vue 3
// export default new Vuex.Store({ // Vue 2
state: { // アプリケーションの状態（データ）
count: 0
},
getters: { // stateから算出される値
doubleCount(state) {
return state.count * 2
}
},
mutations: { // stateを変更するための唯一の方法（同期処理）
increment(state, payload = 1) { // payloadは省略可能
state.count += payload
}
},
actions: { // 非同期処理を含む、stateを変更するための方法（mutationsをコミットする）
incrementAsync({ commit }, payload = 1) {
setTimeout(() => {
commit(‘increment’, payload)
}, 1000)
}
},
modules: { // ストアが大規模になった場合に分割するためのオプション
}
})
“`

• import { createStore } from 'vuex' (Vue 3) または import Vuex from 'vuex' (Vue 2): Vuexライブラリをインポートします。
• Vue.use(Vuex) (Vue 2): VueにVuexをプラグインとして登録します。
• createStore({...}) (Vue 3) または new Vuex.Store({...}) (Vue 2): Vuexストアインスタンスを作成します。
  • state: アプリケーション全体で共有されるデータです。リアクティブなオブジェクトである必要があります。
  • getters: stateから派生した値を算出するためのプロパティです。コンポーネントの算出プロパティ (computed) のストア版と考えられます。キャッシュされます。
  • mutations: stateを変更するための関数群です。stateを変更できるのはmutationsだけ です。ミューテーションは同期的に実行される必要があります。コンポーネントからは store.commit('mutationName', payload) のように呼び出します。
  • actions: stateを変更するための関数群ですが、非同期処理を含むことができます。mutationをコミットすることでstateを変更します。コンポーネントからは store.dispatch('actionName', payload) のように呼び出します。
  • modules: ストアが大きくなった場合に、モジュールに分割して管理できます。
• export default ...: 作成したストアインスタンスを main.js でインポートできるようにエクスポートします。

これらのファイルは、RouterやVuexを選択した場合に自動生成され、それぞれの機能の中核を担います。これらのファイルを理解し、適切に修正・拡張していくことが、Vue CLIプロジェクトでの開発の基本となります。

Vue CLIの機能詳解

Vue CLIは、プロジェクトの骨組み作成だけでなく、開発プロセス全体をサポートするための多くの強力な機能を備えています。ここでは、特に重要な機能である「プラグイン」「設定のカスタマイズ」「プロダクションビルド」「GUI」について詳しく見ていきましょう。

Plugins

Vue CLIの中心的な設計思想の一つに「プラグインシステム」があります。これにより、コア機能をシンプルに保ちつつ、様々な機能を必要に応じてプロジェクトに追加したり、カスタマイズしたりできます。

Vue CLIのプラグインは、プロジェクトの依存関係をインストールするだけでなく、Babel, Webpack, ESLintなどのツールチェーンに対して設定を注入したり、新しいコマンド (vue-cli-service test:unit のような) を登録したりする役割を担います。

プロジェクト作成時に選択した機能（Router, Vuex, TypeScript, ESLintなど）は、実は Vue CLIの公式プラグインとして実装されています（例: @vue/cli-plugin-router, @vue/cli-plugin-vuex）。

既存プロジェクトへのプラグイン追加 (vue add)

プロジェクト作成後に、新しい機能を追加したくなることもあります。例えば、最初はRouterなしで始めたが、途中で画面遷移が必要になった場合などです。このような場合、vue add コマンドを使用します。

vue add コマンドは、指定されたVue CLIプラグインをインストールし、そのプラグインが必要とする設定（依存関係の追加、設定ファイルの変更・作成など）をプロジェクトに適用します。

例：既存のプロジェクトにVue Routerを追加する場合

bash
cd my-first-vue-app # プロジェクトディレクトリに移動
vue add router

コマンドを実行すると、Routerプラグインがインストールされ、Routerに関する設定やファイル（src/router/index.js, src/views/AboutView.vue など）がプロジェクトに追加されます。途中、Routerモードの選択などの対話式プロンプトが表示されることもあります。

例：既存のプロジェクトにVuexストアを追加する場合

bash
vue add vuex

例：Vuetify (UIフレームワーク) を追加する場合

bash
vue add vuetify

vue add コマンドは、 @vue/cli-plugin- で始まる公式プラグインだけでなく、サードパーティ製のVue CLIプラグインにも対応しています。例えば、人気のあるUIフレームワークであるVuetifyやElement Plusなども、Vue CLIプラグインとして提供されており、vue add vuetify や vue add element-plus のように簡単に追加できます。

vue add <plugin-name> を実行すると、Vue CLIは自動的に @vue/cli-plugin-<plugin-name> または vue-cli-plugin-<plugin-name> という名前のパッケージを探し、インストールして実行します。したがって、公式プラグインの場合は <plugin-name> だけで済み、サードパーティ製の場合はパッケージ名全体を指定する必要がある場合が多いです。

インストールされているプラグインの確認

プロジェクトにインストールされているプラグインは、package.json の devDependencies を見ると確認できます。 @vue/cli-plugin- で始まるパッケージや、vue-cli-plugin- で始まるパッケージがそれにあたります。

Presets

プロジェクト作成時に手動選択した一連の機能設定は、将来のプロジェクトで再利用するためにプリセットとして保存できます。

プロジェクト作成ウィザードの最後に「Save this as a preset for future projects?」と聞かれた際に y を選択すると、その設定に名前をつけて保存できます。

保存されたプリセットは、ホームディレクトリの .vuerc ファイルに JSON 形式で保存されます。

json
{
"latestVersion": "4.5.15",
"useTaobaoRegistry": false,
"packageManager": "npm",
"presets": {
"my-awesome-preset": { // ここがプリセット名
"useConfigFiles": true,
"cssPreprocessor": "sass",
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-router": {
"historyMode": true
},
"@vue/cli-plugin-vuex": {},
"@vue/cli-plugin-eslint": {
"config": "prettier",
"lintOn": [
"save"
]
}
}
}
}
}

次回 vue create コマンドを実行した際に、プリセット選択のオプションとして保存したプリセットが表示されるようになります。これにより、毎回手動で機能を選択する手間を省き、チームや個人の開発スタイルに合わせた環境を素早く構築できます。

保存したプリセットは .vuerc ファイルを直接編集することで管理することも可能です。

Configuring Vue CLI (vue.config.js)

Vue CLIは、基盤となるWebpackなどの設定をほとんど抽象化してくれますが、デフォルトの設定では対応できない特定の要件がある場合があります。このような場合、プロジェクトのルートディレクトリに vue.config.js というファイルを作成して、Vue CLIの内部設定をカスタマイズできます。

vue.config.js は CommonJS モジュールとしてエクスポートされる JavaScript ファイルで、様々なオプションを指定できます。

“`javascript
// vue.config.js
module.exports = {
// プロジェクトをサブディレクトリにデプロイする場合のパス
// publicPath: process.env.NODE_ENV === ‘production’
// ? ‘/my-app/’
// : ‘/’,

// ビルド出力先ディレクトリ (デフォルト: dist)
// outputDir: ‘dist’,

// assetsDir: ‘assets’, // 生成される静的アセットを配置するディレクトリ

// index.html の出力先 (デフォルト: index.html)
// indexPath: ‘index.html’,

// ファイル名にハッシュを含めるか (キャッシュ対策)
// filenameHashing: true,

// ESLint を保存時に実行するか
// lintOnSave: process.env.NODE_ENV !== ‘production’,

// ランタイム + コンパイラビルドを含めるか
// runtimeCompiler: false,

// Webpack の設定をカスタマイズする
configureWebpack: {
// resolve.alias など、Webpack の設定オブジェクトを直接記述
resolve: {
alias: {
‘@’: require(‘path’).resolve(__dirname, ‘src/’)
}
}
// または関数でカスタマイズ
// configureWebpack: config => {
// if (process.env.NODE_ENV === ‘production’) {
// // 本番環境向けの最適化などをここで行う
// } else {
// // 開発環境向けの設定
// }
// }
},

// Webpack-chain API を使って設定をより細かくカスタマイズ
// chainWebpack: config => {
// config.module
// .rule(‘vue’)
// .use(‘vue-loader’)
// .loader(‘vue-loader’)
// .tap(options => {
// // options を変更する
// return options
// })
// },

// 開発サーバーの設定
devServer: {
// port: 8080,
// open: true, // サーバー起動時にブラウザを自動で開くか
// proxy: { // APIサーバーへのリクエストをプロキシする場合
// ‘/api’: {
// target: ‘http://localhost:3000’,
// ws: true,
// changeOrigin: true
// }
// }
},

// PWA プラグインの設定
// pwa: {
// name: ‘My Vue App’,
// themeColor: ‘#4DBA87’,
// msTileColor: ‘#000000’,
// appleMobileWebAppCapable: ‘yes’,
// appleMobileWebAppStatusBarStyle: ‘black’,
// // workboxOptions など
// },

// その他のプラグインオプション
// pluginOptions: {
// // …
// }
}
“`

いくつか代表的な設定オプションを説明します。

• publicPath: アプリケーションがサブディレクトリ（例: https://my-site.com/my-app/）にデプロイされる場合、ここでそのパスを指定します。静的アセットへの参照パスがこれに基づいて調整されます。デフォルトは / です。
• outputDir: ビルド出力先のディレクトリ名を変更できます。デフォルトは dist です。
• assetsDir: 生成される画像やフォントなどの静的アセットを、outputDir の中のどのディレクトリに配置するかを指定します。デフォルトは空文字列（outputDir の直下）です。
• indexPath: public/index.html を出力する際のファイル名を変更できます。デフォルトは index.html です。
• filenameHashing: ビルドされた静的アセットのファイル名にキャッシュ無効化のためのハッシュ (app.a7f34f.js) を含めるかどうかを設定します。本番ビルドでは true にするのが一般的です。
• lintOnSave: 保存時にESLintを実行するかを設定します。true (Lintエラー/警告をコンソールに表示), false (無効), "default" (設定による), "warning" (警告のみコンソールに表示し、エラーは表示しない), true | warning (開発環境でのみ有効) といった値を指定できます。
• runtimeCompiler: Vueテンプレートをランタイムでコンパイルする機能を含めるかどうかを設定します。デフォルトは false です。実行時に文字列テンプレートをコンパイルする必要がある場合（例えば、CDNからVueをロードして、<template> オプションに文字列でテンプレートを指定する場合）は true に設定しますが、通常はSFCを使用するため false で問題ありません。false の場合、テンプレートはビルド時に事前にコンパイルされるため、ビルドサイズが小さくなります。
• configureWebpack: Webpackの設定オブジェクトをマージしたり、関数として受け取って直接変更したりできます。ここで resolve.alias を設定して、src ディレクトリへのエイリアス @ を定義していることが多いです（これはVue CLIのデフォルト設定にも含まれています）。
• chainWebpack: Webpackの設定を、より細かく、破壊的でない方法で変更するための Webpack-chain API を使用できます。特定のローダーやプラグインの設定を変更するのに便利です。
• devServer: 開発サーバーの挙動をカスタマイズできます。ポート番号、自動ブラウザ起動、APIサーバーへのプロキシ設定など、様々なオプションがあります。特に proxy 設定は、フロントエンドの開発サーバーとバックエンドのAPIサーバーが異なるオリジン（ドメイン、ポート）で動いている場合に、クロスオリジン問題を回避するために非常に役立ちます。

これらのオプションを vue.config.js に記述することで、Vue CLIのデフォルト設定を上書きし、プロジェクト固有の要件に合わせたビルドプロセスや開発サーバーの挙動を実現できます。

Build for Production (npm run build)

アプリケーションの開発が完了し、本番環境にデプロイする準備ができたら、npm run build コマンドを実行します。

bash
npm run build

yarnを使う場合：

bash
yarn build

このコマンドも package.json の scripts に定義されています。Vue CLIのビルドプロセスが実行され、ソースコードが本番環境向けに最適化されて出力されます。

ビルドプロセスで行われる主な最適化は以下の通りです。

• バンドル: アプリケーションの全コードと依存関係を複数のJavaScriptファイルにまとめます。
• トランスパイル: Babelなどを使って、異なるブラウザで互換性のあるJavaScriptコードに変換します。
• ミニファイ (Minification): JavaScript, CSS, HTMLコードから不要な空白やコメントを取り除き、変数名を短縮するなどしてファイルサイズを最小化します。
• ツリーシェイキング (Tree Shaking): 使用されていないコードを最終的なバンドルから除去します。
• コード分割 (Code Splitting): ルーティングされたコンポーネントなどを、アクセスされたときに遅延ロードされる別のチャンクに分割します。
• アセットの最適化: 画像圧縮などを行います。
• キャッシュ無効化: デフォルトで、ビルドされたファイルのファイル名にコンテンツベースのハッシュを含めます (app.a7f34f.js)。これにより、ファイル内容が変更されない限りブラウザキャッシュが利用され、変更されたファイルだけがダウンロードされるようになります。

ビルドが完了すると、デフォルトではプロジェクトルートに dist ディレクトリが生成されます。この dist ディレクトリの中身が、デプロイすべき静的アセット群です。

dist/
├── css/
│ └── app.xxxxx.css
├── js/
│ ├── app.xxxxx.js
│ ├── chunk-vendors.xxxxx.js
│ └── about.xxxxx.js (コード分割されたチャンク)
├── img/ (src/assets/images など)
├── fonts/ (src/assets/fonts など)
└── index.html

dist ディレクトリには、最適化されたHTML (index.html)、CSS、JavaScriptファイル、およびその他の静的アセットが含まれています。このディレクトリ全体を、Nginx, Apache, Surge, Netlify, Vercel, GitHub Pagesなどの静的サイトホスティングサービスにアップロードすれば、アプリケーションを公開できます。

履歴モード (history mode) を使用している場合は、サーバー側で適切なフォールバック設定が必要になることを忘れないでください（存在しないパスへのリクエストを index.html にリダイレクトする設定）。

npm run build --report のように --report フラグを付けてビルドを実行すると、ビルドされたファイルのサイズや構成を可視化するインタラクティブなレポートHTMLファイルを生成できます。これにより、アプリケーションのビルドサイズを分析し、最適化のボトルネックを見つけるのに役立ちます。

Vue UI (Graphical User Interface)

Vue CLIはコマンドラインインターフェイスだけでなく、ブラウザ上で操作できるGUIツールも提供しています。これは特にGUIを好むユーザーや、CLIコマンドに慣れていない場合に便利です。

Vue UIを起動するには、プロジェクトのルートディレクトリで以下のコマンドを実行します。

bash
vue ui

コマンドを実行すると、ブラウザが自動的に開き、Vueプロジェクトマネージャーの画面が表示されます。

GUIでは以下の操作が可能です。

• プロジェクトの作成: vue create と同様に、対話式のウィザードを通じて新しいプロジェクトを作成できます。
• プロジェクトのインポート: 既存のVue CLIプロジェクトをGUIにインポートして管理できます。
• プロジェクトの管理: インポートしたプロジェクトの一覧が表示され、プロジェクトを選択して詳細を確認したり、設定を変更したりできます。
• プラグイン: プロジェクトにインストールされているVue CLIプラグインの一覧が表示され、新しいプラグインを検索・追加したり、既存のプラグインを削除したりできます。
• 依存関係: プロジェクトの依存関係（npmパッケージ）を管理できます。新しいパッケージのインストール、既存パッケージのアップデートや削除などを行えます。
• 設定: vue.config.js で設定できる様々なオプションをGUI上で変更できます。Webpackの設定、CSSプリプロセッサー、ESLintルールなどを視覚的に編集できます。
• タスク: package.json の scripts に定義されているコマンド（serve, build, lint など）をGUI上から実行できます。各タスクの実行状況や出力、統計情報を確認できます。

Vue UIは、特にプロジェクトの初期設定、プラグインの追加、依存関係の管理、設定の調整、タスクの実行といった場面で非常に直感的で便利です。CLI操作に自信がない場合や、プロジェクトの全体像を視覚的に把握したい場合に活用すると良いでしょう。

開発のヒントとベストプラクティス

Vue CLIを使ったプロジェクトでの開発をさらに効率的に進めるためのヒントや、一般的なベストプラクティスをいくつか紹介します。

1. コンポーネントの分割と再利用

Vue.js開発の基本はコンポーネントベースです。UIを小さく再利用可能な部品に分割することで、コードの保守性が高まり、開発効率も向上します。

• 単一責任の原則: 一つのコンポーネントは一つのことだけを行うように設計します。
• 親子関係: コンポーネントは親子関係を持ち、データは親から子へ Props で渡し、子から親へはイベント ($emit) で伝えます。
• 共通コンポーネント: アプリケーション全体で繰り返し使用されるUI要素（ボタン、モーダル、入力フォームなど）は、src/components ディレクトリに共通コンポーネントとして定義し、再利用します。
• ページコンポーネント: Routerを使用する場合、各ルートに対応するコンポーネントは、通常 src/views (または src/pages) ディレクトリに配置します。これらのコンポーネントは、他の共通コンポーネントを組み合わせてページを構成する役割を担うことが多いです。

2. Vue Routerを使ったページ間のナビゲーション

Routerを導入した場合、ページ遷移は <router-link> コンポーネントを使うのが標準的な方法です。

“`vue

“`

<router-link> はクリックすると指定した to パスへ遷移し、HTMLではデフォルトで <a> タグとしてレンダリングされます。また、現在のルートと一致する場合にアクティブクラスが自動的に付与されるため、ナビゲーションメニューなどで現在位置を視覚的に示すのに便利です。

プログラムによるナビゲーションを行いたい場合は、this.$router.push('/path/to/page') や this.$router.replace('/path/to/page') メソッドを使用します。

3. Vuexを使った状態管理

アプリケーションの状態が複数のコンポーネントで共有されたり、コンポーネント階層の深いところでデータの受け渡しが必要になったりする場合、Vuexのストアが非常に役立ちます。

コンポーネントからストアの状態にアクセスするには this.$store.state.someValue のようにします。算出プロパティやVuexのヘルパー関数 (mapState, mapGetters) を使うと、より効率的にストアの状態をコンポーネントにマッピングできます。

ストアの状態を変更するには、必ずミューテーションをコミットするか、アクションをディスパッチします。

“`vue

“`

4. ESLintとPrettierを使ったコード品質の維持

ESLintとPrettierを連携させることで、コードの文法エラーを検知し、チーム全体のコードスタイルを統一できます。プロジェクト作成時に「Lint on save」を選択した場合、コードを保存するたびにLintが実行されます。

開発効率をさらに高めるために、使用しているコードエディタ（VS Codeなど）にESLintとPrettierの拡張機能をインストールし、保存時に自動的にコードをフォーマットする設定を有効にすることをお勧めします。これにより、手動でフォーマットする手間が省け、常にきれいなコードを保てます。

5. 開発者ツール (Vue Devtools) の活用

Vue.js公式の開発者ツール「Vue Devtools」は、Vue.jsアプリケーションの開発・デバッグに不可欠です。ブラウザの拡張機能として提供されており、インストールするとブラウザの開発者ツール内にVueタブが追加されます。

Vue Devtoolsを使うと、以下のことができます。

• コンポーネントツリー: アプリケーションのコンポーネント階層を確認できます。各コンポーネントを選択すると、そのコンポーネントのデータ、Props、算出プロパティ、Vuexの状態などをインスペクトしたり、リアルタイムに変更したりできます。
• Vuex: ストアの状態、ゲッター、ミューテーション、アクションの履歴を確認できます。ミューテーションのタイムトラベルデバッグ（状態の巻き戻し、再生）も可能です。
• Router: 現在のルート情報や、利用可能なルート一覧を確認できます。
• イベント: コンポーネントが発火したカスタムイベントをログで確認できます。
• パフォーマンス: コンポーネントの描画パフォーマンスなどを測定できます。

Vue Devtoolsは、開発中のアプリケーションの状態を深く理解し、問題の原因を特定するのに役立ちます。

6. Webpackエイリアスの設定

Vue CLIのデフォルト設定では、@ というエイリアスが src ディレクトリを指すように設定されています。これにより、例えば src/components/MyComponent.vue をインポートする際に、相対パスの ../components/MyComponent.vue ではなく、絶対パスのように @/components/MyComponent.vue と記述できます。

javascript
import MyComponent from '@/components/MyComponent.vue'

このエイリアスは、特に深いディレクトリ階層にあるファイルをインポートする際に、パスが短くなり、可読性が向上するため非常に便利です。

独自のエイリアスを追加したい場合は、前述の vue.config.js の configureWebpack オプションで Webpack の resolve.alias を設定します。

7. 環境変数 (.env ファイル) の利用

APIエンドポイントのURLやAPIキーなど、環境（開発、ステージング、本番）によって異なる設定値は、環境変数として管理するのがベストプラクティスです。Vue CLIは、dotenv ライブラリを使用して .env ファイルによる環境変数の管理をサポートしています。

• .env: 全ての環境で読み込まれるデフォルトの環境変数。
• .env.development: 開発環境 (npm run serve) で読み込まれる環境変数。
• .env.production: 本番環境 (npm run build) で読み込まれる環境変数。
• .env.test: テスト環境 (npm run test:unit, npm run test:e2e) で読み込まれる環境変数。

これらのファイルに VUE_APP_ というプレフィックスを付けた変数を定義すると、アプリケーションコード内で process.env.VUE_APP_VARIABLE_NAME としてアクセスできるようになります。

例: .env.development ファイルに以下を記述

VUE_APP_API_URL=http://localhost:3000/api
VUE_APP_DEBUG=true

アプリケーションコード内でのアクセス：

“`javascript
console.log(process.env.VUE_APP_API_URL); // 開発環境では http://localhost:3000/api
console.log(process.env.VUE_APP_DEBUG); // 開発環境では ‘true’ (環境変数は文字列として扱われる)

if (process.env.NODE_ENV === ‘development’) {
// 開発環境でのみ実行されるコード
}
“`

process.env.NODE_ENV や process.env.BASE_URL といった Vue CLI によってデフォルトで提供される環境変数もあります。環境変数を適切に利用することで、設定値をコードから分離し、環境ごとの設定管理が容易になります。

移行とVue 3

Vue CLI v4.5 以降は、Vue 3 を完全にサポートしています。プロジェクト作成時にデフォルトの選択肢として Vue 3 が表示されるようになりました。

もし既存のVue CLI v4プロジェクトをVue 3にアップグレードしたい場合は、Vue CLI v4.5+ がインストールされている状態で @vue/cli-plugin-vue-next プラグインを使用するか、Vue 3 への移行ガイドを参考に手動で依存関係を更新する必要があります。最も簡単な方法は、Vue CLI v5 以降で提供される @vue/cli-service migrate コマンドや、@vue/compat を利用することですが、これはこの記事の範囲を超えるため、公式ドキュメントを参照してください。

Vue 3で新しく導入された Composition API は、特に大規模なコンポーネントにおけるロジックの整理に非常に強力です。Vue CLIでVue 3プロジェクトを作成すると、Composition APIを使った記述スタイルをすぐに始めることができます。

まとめ

この記事では、Vue CLIを使ってモダンなVue.js開発環境を構築するプロセスを詳細に解説しました。

• まず、なぜVue CLIが必要なのか、それが解決するモダンフロントエンド開発における複雑性について説明しました。
• Node.jsとnpm/yarnが前提条件であることを確認し、Vue CLI自体のインストール方法を学びました。
• vue create コマンドを使って新しいプロジェクトを作成し、特に手動選択 (Manually select features) オプションで選択できる様々な機能（Babel, TypeScript, Router, Vuex, Linterなど）がプロジェクトに何をもたらすのかを詳しく見ていきました。
• 生成されたプロジェクトのディレクトリ構造とその中核となるファイル（main.js, public/index.html, App.vue, .vue SFC, router/index.js, store/index.js）の役割を理解しました。
• npm run serve コマンドで開発サーバーを起動し、ホットモジュールリプレースメントの利点を体験しました。
• Vue CLIの強力な機能であるプラグインシステム (vue add)、プリセット、設定のカスタマイズ (vue.config.js)、プロダクションビルド (npm run build)、そしてGUI (vue ui) について掘り下げて解説しました。
• 開発を効率化するためのヒントやベストプラクティス（コンポーネント設計、Router/Vuexの利用、ESLint/Prettier、Vue Devtools、環境変数）についても触れました。

Vue CLIは、モダンなVue.js開発に必要な複雑なビルドツールや設定をカプセル化し、開発者がアプリケーションロジックに集中できる環境を提供してくれます。この記事で学んだ知識を活用することで、あなたはVue CLIを使いこなし、効率的でスケーラブルなVue.jsアプリケーション開発を自信を持って始めることができるでしょう。

次のステップとして、実際にコンポーネントを作成・組み合わせてアプリケーションを構築したり、Vue RouterやVuexを本格的に活用したり、単体テストやE2Eテストを導入したり、CI/CDパイプラインを構築したりすることに挑戦してみてください。Vue.jsのエコシステムは非常に豊かであり、学ぶべきことはたくさんあります。

Vue CLIはあなたのVue.js開発の強力な味方となるはずです。モダンな開発環境の恩恵を最大限に活用し、素晴らしいアプリケーションを構築してください！