第2章: 開発環境の構築

概要

本章では、Vue.jsアプリケーション開発に必要な環境を構築し、勉強用のプロジェクトを作成します。開発環境としてVisual Studio Code（VS Code）を使用し、Vue.js 3のプロジェクトをViteを用いて作成します。

必要なソフトウェア

Vue.js開発環境の構築には、以下のソフトウェアが必要です：

Node.js：JavaScriptのランタイム環境
npmまたはYarn：パッケージマネージャー（Node.jsと一緒にインストールされます）
Visual Studio Code：コードエディタ
Vue 3：本教材で使用するフレームワーク
Vite：高速な開発サーバーとビルドツール

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

まず、Node.jsとnpmをインストールします。Node.jsの公式サイトから最新のLTS（Long Term Support）バージョンをダウンロードしてインストールすることをお勧めします。

インストール手順：

Node.js公式サイトにアクセスします。
LTSバージョンをダウンロードします。
インストーラーを実行し、指示に従ってインストールを完了します。

インストールが完了したら、コマンドラインから以下のコマンドを実行して、正しくインストールされているか確認します：

node -v
npm -v

これにより、インストールされたNode.jsとnpmのバージョンが表示されます。

2. Visual Studio Codeのインストール

次に、Visual Studio Code（VS Code）をインストールします。VS Codeは、Vue.js開発に適した軽量で高機能なコードエディタです。

インストール手順：

VS Code公式サイトにアクセスします。
お使いのOSに適したインストーラーをダウンロードします。
インストーラーを実行し、指示に従ってインストールを完了します。

3. VS Code拡張機能のインストール

Vue.js開発に役立つVS Code拡張機能をインストールします。以下の拡張機能を推奨します：

Volar：Vue 3のシンタックスハイライト、自動補完、TypeScriptのサポートなど
ESLint：コード品質とスタイルの検証
Prettier：コードフォーマッター
Auto Rename Tag：開始タグと終了タグの自動リネーム
Path Intellisense：ファイルパスの自動補完

拡張機能のインストール手順：

VS Codeを起動します。
左側のサイドバーから拡張機能アイコンをクリックします。
検索ボックスに拡張機能名を入力します。
該当する拡張機能のインストールボタンをクリックします。

特に重要なのは「Volar」拡張機能です。これはVue 3専用の拡張機能で、以前のVue 2用の「Vetur」に代わるものです。

Note: Vue 3を使用する場合、以前のVetur拡張機能をアンインストールし、代わりにVolarをインストールすることをお勧めします。

4. Vueプロジェクトの作成（Vite使用）

Vue 3プロジェクトを作成するために、Viteを使用します。Viteは、高速な開発サーバーとビルドツールを提供します。

コマンドラインを開き、以下のコマンドを実行してVueプロジェクトを作成します：

npm create vite@latest my-vue-app -- --template vue

このコマンドは、「my-vue-app」という名前のVue 3プロジェクトを作成します。プロンプトが表示されたら、以下のように選択します：

フレームワーク選択で「Vue」を選択
バリアント選択で「JavaScript」または「TypeScript」を選択（本教材ではまずJavaScriptを使用し、後にTypeScriptを導入します）

プロジェクトが作成されたら、以下のコマンドを実行して依存関係をインストールし、開発サーバーを起動します：

cd my-vue-app
npm install
npm run dev

これにより、ローカル開発サーバーが起動し、通常はhttp://localhost:5173/でアプリケーションにアクセスできます。

5. プロジェクト構造の確認

作成されたプロジェクトの基本構造を確認しましょう：

my-vue-app/
├── node_modules/     # インストールされたパッケージ
├── public/           # 静的アセット
├── src/              # ソースコード
│   ├── assets/       # 画像やスタイルなどのアセット
│   ├── components/   # Vueコンポーネント
│   ├── App.vue       # ルートコンポーネント
│   └── main.js       # アプリケーションのエントリーポイント
├── index.html        # HTMLエントリーポイント
├── package.json      # プロジェクトの依存関係と設定
├── vite.config.js    # Viteの設定ファイル
└── README.md         # プロジェクトの説明

6. VS Codeでプロジェクトを開く

VS Codeを起動し、以下の手順でプロジェクトを開きます：

手順：

VS Codeを起動します。
「ファイル」→「フォルダーを開く」を選択します。
作成したプロジェクトフォルダ（my-vue-app）を選択します。

これにより、VS CodeでVueプロジェクトが開かれ、ファイル構造が左側のエクスプローラーに表示されます。

7. Hello Worldアプリの確認

Viteで作成されたVueプロジェクトには、すでに簡単なHello Worldアプリが含まれています。App.vueファイルを開いて確認してみましょう。

src/App.vueの内容を以下のように変更して、Composition APIを使用したシンプルなアプリケーションを作成します：

<script setup>
import { ref } from 'vue'

const message = ref('Hello Vue 3!')
const count = ref(0)

function incrementCount() {
  count.value++
}
</script>

<template>
  <div class="app-container">
    <h1>{{ message }}</h1>
    <p>カウント: {{ count }}</p>
    <button @click="incrementCount">増やす</button>
  </div>
</template>

<style scoped>
.app-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

h1 {
  color: #42b983;
}

button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

button:hover {
  background-color: #36a373;
}
</style>

このコードは、Composition APIの<script setup>構文を使用しています。ref関数を使用して、リアクティブな状態変数（message、count）を作成しています。

8. main.jsファイルの確認

src/main.jsファイルは、Vueアプリケーションのエントリーポイントです。このファイルの内容を確認しましょう：

import { createApp } from 'vue'
import App from './App.vue'

// 必要に応じてCSSをインポート
import './assets/main.css'

// Vueアプリケーションを作成し、マウント
createApp(App).mount('#app')

この短いコードで、Vueアプリケーションを初期化し、index.htmlファイル内のid="app"要素にマウントしています。

9. index.htmlファイルの確認

Viteでは、index.htmlファイルがプロジェクトのルートディレクトリにあります。このファイルを確認しましょう：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"<>/div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

このHTMLファイルには、Vueアプリケーションがマウントされるid="app"のdiv要素があります。また、type="module"属性を持つスクリプトタグで、main.jsファイルをモジュールとしてインポートしています。

まとめ

本章では、Vue.js開発に必要な開発環境を構築しました。Node.js、npm、VS Code、および推奨拡張機能をインストールし、Viteを使用してVue 3プロジェクトを作成しました。また、作成されたプロジェクトの基本構造と主要ファイルの内容を確認しました。

次の章では、Vueプロジェクトの構成をより詳しく理解し、Composition APIを使ったVueアプリケーション開発の基礎を学びます。