VueJS 速習チュートリアル

Vue スケールアップ

1. プロジェクトの規模を拡大する

これまでのチュートリアルでは、<script> タグを使用して Vue を Web ページに追加する最もシンプルな方法を学んできました。

しかし、プロジェクトが大きくなり、多くのファイルや複雑なロジックを扱うようになると、より効率的な開発手法が必要になります。これを スケールアップ（Scale-up） と呼びます。本格的なアプリケーション開発では、ビルドツール（Build Tools） を使用した開発環境を構築するのが一般的です。

2. なぜスケールアップが必要なのか？

<script> タグによる CDN 利用は手軽ですが、大規模な開発においては以下の理由から推奨されません。

  • 単一ファイルコンポーネント（SFC） が使用できない：HTML、JavaScript、CSS を一つの .vue ファイルにまとめて管理することが難しくなります。
  • コードの最適化 ができない：本番環境用にコードを圧縮（Minify）したり、古いブラウザとの互換性を確保するプロセスが自動化されません。
  • パフォーマンス：ビルドツールを使用することで、必要なコードのみを読み込む「コード分割」などが可能になり、レンダリング速度が向上します。
  • エコシステム：npm（Node Package Manager） を通じて、世界中の開発者が公開しているライブラリを簡単に統合できます。

3. 単一ファイルコンポーネント (SFC) とは

スケールアップした Vue 開発の核心となるのが、.vue 拡張子を持つ 単一ファイルコンポーネント（Single File Components） です。

一つのファイル内に以下の3つのブロックを記述します：

  1. <template>: HTML 構造（マークアップ）
  2. <script>: ロジック（Vue インスタンスの定義、データ、メソッドなど）
  3. <style>: コンポーネント固有の CSS スタイル

これにより、コンポーネント単位での再利用性と保守性が劇的に向上します。

4. 開発環境の準備：Node.js と npm

Vue プロジェクトをスケールアップするには、ローカル環境に Node.js と npm がインストールされている必要があります。

  • Node.js: ブラウザの外で JavaScript を実行するためのランタイム。
  • npm: パッケージ管理ツール。Vue 本体やビルドツールをインストールするために使用します。

インストールされているか確認するには、ターミナル（またはコマンドプロンプト）で以下のコマンドを実行します：

# Node.jsのバージョン確認
node -v

# npmのバージョン確認
npm -v

5. ビルドツール「Vite」の導入

現在の Vue 開発において標準となっているビルドツールが Vite です。Vite は非常に高速なサーバー起動と HMR（Hot Module Replacement / 修正の即時反映） を提供します。

プロジェクトを新規作成する際は、公式のスキャフォールディングツールである create-vue を使用します。

5.1 プロジェクトの作成手順

ターミナルで以下のコマンドを実行し、プロジェクトをセットアップします：

# プロジェクト作成コマンドの実行
npm init vue@latest

このコマンドを実行すると、プロジェクト名や TypeScript、Vue Router の導入可否などを尋ねられます。初心者の場合は、すべて「No」を選択しても問題ありません。

プロジェクトディレクトリに移動して依存関係をインストールし、開発サーバーを起動します：

# プロジェクトフォルダへ移動
cd my-vue-project

# 必要なパッケージをインストール
npm install

# 開発用サーバーの起動
npm run dev

6. プロジェクト構造の理解

ビルドツールによって作成されたプロジェクトには、以下のようなディレクトリ構造が含まれます。

  • index.html: アプリケーションのエントリーポイントとなる HTML ファイル。
  • src/: 開発を行うメインのディレクトリ。
    • main.js: Vue アプリケーションを初期化し、HTML にマウントする JavaScript ファイル。
    • App.vue: アプリケーションのルートコンポーネント（最上位の SFC）。
    • components/: 再利用可能な Vue コンポーネントを格納するフォルダ。
  • public/: 静的なアセット（画像やアイコンなど）を格納する場所。
  • package.json: プロジェクトの設定や依存ライブラリのリストが記述されたファイル。

7. main.js の役割

本格的な開発環境では、Vue インスタンスの作成は main.js で行われます。

// VueからcreateApp関数をインポート
import { createApp } from 'vue'
// ルートコンポーネントをインポート
import App from './App.vue'

// アプリケーションを作成し、id="app"の要素にマウント（紐付け）
createApp(App).mount('#app')

これまでの CDN 版では Vue.createApp(...) と記述していましたが、ビルドツール環境では ES Modules の import 構文を使用します。

8. プロダクション用ビルド（Deployment）

開発が完了し、Web サイトを公開（デプロイ）する準備ができたら、以下のコマンドを実行します：

# 本番環境用の最適化ビルドを実行
npm run build

このコマンドを実行すると、dist/ フォルダが生成されます。この中には、ブラウザで実行できるように最適化・圧縮された JavaScript、CSS、HTML ファイルが含まれており、これを Web サーバーにアップロードすることでデプロイが完了します。