Vue3 ブログプロジェクト

この章では、ゼロから Vite を使って Vue3 ブログプロジェクトを作成し、プロジェクト内の各ファイルの役割を理解します。

環境準備

始める前に、コンピューターに Node.js がインストールされていることを確認する必要があります。

Node.js は JavaScript のランタイム環境であり、ブラウザの外で JS コードを実行できるようにします。

Vue3 の開発ツールチェーン（Vite、npm）はすべて Node.js に依存しています。

Node.js がインストールされているか確認する

ターミナル（Windows は CMD または PowerShell、Mac はターミナル）を開き、次のコマンドを入力します：

$ node -v
v20.10.0

バージョン番号（v16 以上を推奨）が表示されれば、インストールされています。

ない場合は、次のサイトへnodejs.orgLTS バージョンをダウンロードしてインストールしてください。

Node.js をインストールすると、npm（Node パッケージマネージャー）も自動的に付属します。

確認コマンド：

npm -v

Vue3 プロジェクトを作成する

Vue 公式が推奨するcreate-vueスキャフォールディングツールを使ってプロジェクトを初期化します。

ターミナルでプロジェクトを保存したいディレクトリに移動し、以下を実行します：

npm create vue@latest blog-app

実行すると一連のオプションが表示されるので、次のように選択します：

オプション選択説明
Add TypeScript?No初心者はまず純粋な JS を使う
Add JSX Support?Noテンプレート構文の方が直感的
Add Vue Router?Yes後でルーティングを使う
Add Pinia?Yes状態管理、後で使う
Add Vitest?Noテストは今は不要
Add ESLint?No初心者は今は使わない

選択が完了したら、プロンプトに従って順に実行します：

$ cd blog-app
$ npm install
$ npm run dev

このときブラウザが自動的に http://localhost:5173 を開き、Vue のデフォルトのウェルカムページが表示されれば、プロジェクトの起動成功です。

npm installpackage.json に基づいてすべての依存パッケージが node_modules ディレクトリにダウンロードされます。この手順はネット接続が必要で、初回は数分かかる場合があります。

プロジェクトディレクトリ構造の詳細

blog-app フォルダーを開くと、次の構造が表示されます：

blog-app/
├── index.html              # 入口 HTML 文件
├── package.json            # 项目配置与依赖列表
├── vite.config.js          # Vite 构建工具配置
├── public/                 # 不经过编译的静态资源
├── src/
│   ├── main.js             # JS 入口，创建并挂载 Vue 应用
│   ├── App.vue             # 根组件，所有页面的外壳
│   ├── assets/             # 需要编译的静态资源（CSS、图片）
│   ├── components/         # 可复用的 Vue 组件
│   ├── views/              # 页面级组件（路由对应的页面）
│   ├── router/             # 路由配置
│   └── stores/             # Pinia 状态管理

コアファイルの役割

index.html— ブラウザからアクセスされるエントリーファイル。

Vite が自動的に src/main.js をこのファイルに注入するため、手動で JS を読み込む必要はありません。

src/main.js— Vue アプリケーションの起動ファイル。

Vue アプリケーションのインスタンスを作成し、プラグイン（ルーター、状態管理）を登録し、アプリケーションを HTML ページにマウントする役割を担います。

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

すべてのページの最外層のコンテナーであり、通常はナビゲーションバー、フッター、ルーターアウトレットを含みます。

単一ファイルコンポーネント（SFC）

Vue では各.vueファイルは「単一ファイルコンポーネント」（Single File Component）と呼ばれます。

同じコンポーネントのテンプレート、ロジック、スタイルを1つにカプセル化し、1つのファイルが独立した機能単位になります。

SFC三段構成

例

<script setup>
// 第三部分：ロジック — ここに JS を書きます
const message = 'Hello Vue3!'
</script>

<template>
  <!-- 第一部分：テンプレート — ここに HTML を書きます -->
  <h1>{{ message }}</h1>
</template>

<style scoped>
/* 第二部分：スタイル — ここに CSS を書きます */
h1 {
  color: #427DB8;
}
</style>

これらの3つのタグの順序は自由に並べられますが、業界の慣例は次のとおりです：script → template → style。

ブロック役割一言で理解
<script setup>JS ロジックを書き、データとメソッドを定義するコンポーネントが何をするかを制御する
<template>HTML 構造を書き、データをバインドするコンポーネントの見た目を制御する
<style scoped>CSS スタイルを書くコンポーネントの見た目の良し悪しを制御する

scopedこの属性により、現在のコンポーネントのスタイルは自身にのみ適用され、他のコンポーネントを汚染しません。これは Vue 単一ファイルコンポーネントの核となる特性の1つです。

テンプレート構文 vs JSX

Vue はデフォルトでテンプレート構文を使ってインターフェースを記述します。

テンプレート構文とは、<template>の中に書かれる、Vue の特別なディレクティブを持つ HTML です。

特徴テンプレート構文JSX
構文形式HTML + Vue ディレクティブJavaScript で HTML 風のものを書く
学習コスト低い、ネイティブ HTML に近いJSX のコンパイルメカニズムを理解する必要がある
柔軟性中程度、宣言的高い、JS で自由に操作できる
Vue のおすすめ度デフォルトで推奨オプションでサポート
適用シーンほとんどのページ開発複雑なロジックで UI を動的生成する必要がある

本チュートリアルではすべてテンプレート構文を使用します。Vue にとって最も自然で、初心者に最適な書き方だからです。

実践：テンプレートを空にしてブログの骨組みを書く

デフォルトで生成された App.vue の内容を空にして、ブログの基本骨組みに置き換えます。

例

<script setup>
// 後でここにロジックを追加します
</script>

<template>
  <div id="app">
    <!-- 上部ナビゲーションバー -->
    <header class="navbar">
      <h1>My Blog</h1>
      <nav>
        <a href="/">ホーム</a>
        <a href="#">概要</a>
      </nav>
    </header>

    <!-- メインコンテンツエリア -->
    <main class="container">
      <p>ブログの内容はここに表示されます</p>
    </main>

    <!-- フッター -->
    <footer class="footer">
      <p>© 2024 My Blog. Powered by Vue3.</p>
    </footer>
  </div>
</template>

<style>
/* グローバルリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f5f5f5;
  color: #333;
}

/* ナビゲーションバー */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.navbar h1 {
  font-size: 24px;
  color: #427DB8;
}

.navbar a {
  margin-left: 20px;
  text-decoration: none;
  color: #333;
}

/* メインコンテンツエリア */
.container {
  max-width: 960px;
  margin: 40px auto;
  padding: 0 20px;
}

/* フッター */
.footer {
  text-align: center;
  padding: 20px;
  color: #999;
  border-top: 1px solid #eee;
}
</style>

保存すると、ブラウザが自動的に更新され、クリーンなブログの骨組みが表示されます：上部ナビゲーションバー + 中央のコンテンツエリア + 下部フッター。

これが今後のすべての章の出発点です。

本章のまとめ

この章では3つのことを達成しました：Vite を使って Vue3 プロジェクトを作成し、ディレクトリ構造と SFC の三段構成を理解し、ブログの基本 HTML 骨組みを書きました。

核心的な収穫：1つの.vueファイルが template / script / style の3つの部分で構成されていること、そして Vue プロジェクトを起動する方法を理解しました。

その他の拡張