【フロントエンド入門24】Vue CLIによるプロジェクト構築とビルド｜効率的な開発環境を整えよう

Vue.jsはシンプルで使いやすいフレームワークとして人気ですが、効率的に開発を進めるには適切な開発環境のセットアップが重要です。そのために使われるのが「Vue CLI」です。Vue CLIを使うことで、基本的な設定からビルドまで自動化され、開発がスムーズになります。本記事では、Vue CLIによるプロジェクトの構築とビルドの方法を初心者向けにわかりやすく解説します。

Vue CLIとは？

Vue CLIの概要

Vue CLI（Vue Command Line Interface）は、Vue.jsのプロジェクトを簡単に作成し、開発環境を素早く整えるための公式ツールです。

Vue CLIを使うメリット

プロジェクトの自動セットアップ：必要なファイル構成や初期設定が自動で行われます。
ホットリロード：開発中にファイルを保存すると自動で変更が反映されます。
ビルドの自動化：本番環境用の最適化されたコードに変換するビルド機能が用意されています。
プラグインによる拡張：必要な機能を後から簡単に追加できます。

Vue CLIのインストール

前提条件

Vue CLIを使うためには、Node.jsとnpm（またはyarn）がインストールされている必要があります。

1. Node.jsのインストール

公式サイトからインストールします：Node.js公式サイト

2. Vue CLIのインストール

次に、ターミナルで次のコマンドを実行します：

npm install -g @vue/cli

インストールが完了したら、次のコマンドでバージョンを確認できます：

vue --version

バージョンが表示されればインストール成功です。

新しいVueプロジェクトの作成

1. プロジェクトの生成

次のコマンドで新しいプロジェクトを作成します：

vue create my-vue-app

my-vue-appはプロジェクトの名前です。実行すると、いくつかの設定オプションが表示されます。

2. 設定オプションの選択

デフォルト設定を選ぶ場合：そのままdefaultを選択すれば基本的な設定でプロジェクトが作成されます。
手動設定を行う場合：Manually select featuresを選択すると、必要な機能を個別に選べます（例：TypeScript、Vue Router、Vuexなど）。

選択が完了すると、自動的に必要なパッケージがインストールされます。

3. プロジェクトディレクトリに移動

cd my-vue-app

4. 開発サーバーの起動

次のコマンドで開発サーバーを起動し、ブラウザでアプリを確認できます：

npm run serve

実行すると、ローカルサーバーが起動し、http://localhost:8080でアプリを確認できます。

プロジェクト構成の理解

生成されたプロジェクトのディレクトリ構成は次のようになっています：

my-vue-app
├── node_modules    # 依存パッケージ
├── public          # 静的ファイル
├── src             # ソースコード
│   ├── assets      # 画像やスタイルシート
│   ├── components  # Vueコンポーネント
│   ├── App.vue     # ルートコンポーネント
│   └── main.js     # アプリのエントリーポイント
├── .gitignore      # Gitで無視するファイルの設定
├── package.json    # プロジェクト情報と依存関係
├── README.md       # プロジェクトの説明
└── babel.config.js # Babelの設定

主要なファイルの説明

main.js：アプリケーションのエントリーポイント。ここでVueインスタンスが生成されます。
App.vue：アプリのメインコンポーネント。
components/：複数のコンポーネントが格納されるディレクトリ。

ビルドと本番環境用の準備

1. ビルドコマンドの実行

開発が完了したら、次のコマンドで本番環境用にビルドします：

npm run build

実行すると、最適化されたファイルがdistディレクトリに生成されます。

2. ビルドされたファイルの内容

distディレクトリには、圧縮されたHTML、CSS、JavaScriptファイルが含まれています。

index.html：エントリーポイントのHTMLファイル。
app.[hash].js：バンドルされたJavaScriptファイル。
app.[hash].css：スタイルが含まれたCSSファイル。

これらのファイルは、Webサーバーに配置することで本番環境で動作します。

プラグインの追加とカスタマイズ

Vue CLIでは、必要に応じてプラグインを追加することが可能です。

1. プラグインの追加

Vue RouterやVuexなどの機能を後から追加したい場合、次のコマンドを使用します：

vue add router

または

vue add vuex

2. カスタム設定の変更

プロジェクト内のvue.config.jsファイルを作成して、プロジェクト全体の設定をカスタマイズすることも可能です。

module.exports = {
  devServer: {
    port: 3000  // 開発サーバーのポートを変更
  }
};

実践：簡単なコンポーネントを作ってみよう

1. 新しいコンポーネントの作成

src/components/にHelloWorld.vueというファイルを作成します。

<template>
  <div>
    <h1>こんにちは、Vue CLI！</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
};
</script>

2. コンポーネントの使用

App.vueに次のように記述して、新しいコンポーネントを使用します：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld
  }
};
</script>