はじめに

個人開発を進めるにあたりフロントをVue.jsで作ることに決めました。技術的な理由というよりは会社で使う機会ができ、知識をつける必要があるというのが主な理由です。環境の準備と1通りコードを書き出す準備ができたので、まずはディレクトリの構造から調べてまとめようと思います。

Vue.js プロジェクトのフォルダ構成

my-vue-app/
│── node_modules/      # インストールしたパッケージが入る（触らない）
│── public/            # 静的なファイル（index.html など）
│── src/               # Vueのメインコードを書く場所
│   ├── assets/        # 画像やCSSを入れる
│   ├── components/    # 小さな部品（ボタン、カードなど）
│   ├── views/         # 画面（ページ）ごとのコンポーネント
│   ├── router/        # 画面遷移（ルーティング）の設定
│   ├── store/         # データの管理（VuexやPinia）
│   ├── App.vue        # 画面全体の親コンポーネント
│   ├── main.js        # プロジェクトのエントリーポイント
│── .gitignore         # Gitで管理しないファイルを指定
│── package.json       # どんなパッケージを使っているか
│── README.md          # プロジェクトの説明
│── vue.config.js      # Vueの設定ファイル

重要なファイル＆フォルダの解説

public/

index.html があり、ここに Vue アプリが組み込まれる。
favicon.ico などの静的ファイルを置く。

src/（メインのコードを書く場所）

components/（コンポーネント）

ボタンやナビゲーションバーなどの部品を作る場所。

例：MyButton.vue

<template>
  <button class="btn">{{ label }}</button>
</template>

<script>
export default {
  props: ["label"]
};
</script>

<style scoped>
.btn { background: blue; color: white; }
</style>

views/（ページ単位のコンポーネント）

画面ごとに Vue コンポーネントを作る場所。

例：Home.vue

<template>
  <div>
    <h1>ホームページ</h1>
    <MyButton label="クリック" />
  </div>
</template>

<script>
import MyButton from "@/components/MyButton.vue";

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

router/（ルーティング設定）

「どのURLでどのページを表示するか」を決める。

// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

store/（データ管理）

アプリ全体で共有するデータを保存する。

Vue 3では Vuex より Pinia を使うのが主流。

// store/index.js
import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

Pinia：Vueの状態管理とは

Vueでは、複数のコンポーネント間でデータを共有する際に「状態管理（State Management）」が必要になる。通常の data() では、コンポーネントごとにデータが独立しており、画面をまたいで同じデータを扱うことが困難となる。この問題を解決するのが Pinia である。

通常の `data()` を用いた場合の問題点

<template>
  <p>カウント: {{ count }}</p>
  <button @click="count++">増やす</button>
</template>

<script>
export default {
  data() {
    return { count: 0 };
  }
};
</script>

問題点

このコンポーネント内でしか count を管理できない
他のコンポーネントで count を使うには、親コンポーネントを経由する必要がある
画面を移動するとデータがリセットされる

Piniaによる状態管理

Piniaを利用すると、アプリ全体でデータを共有し、どのコンポーネントからでも同じデータを取得・更新できる

状態を管理するファイルを作成

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

state でデータを定義し、actions でデータの変更を行う

コンポーネントでの利用

<template>
  <p>カウント: {{ counter.count }}</p>
  <button @click="counter.increment()">増やす</button>
</template>

<script>
import { useCounterStore } from "@/store/counter";

export default {
  setup() {
    const counter = useCounterStore();
    return { counter };
  }
};
</script>

useCounterStore() を使うことで、どのコンポーネントからでも count を取得・更新できる

Vuexとの比較

項目	Vuex	Pinia
設定の手間	多い	少ない
Vue 3対応	部分的	最適化されている
学習コスト	高い	低い
パフォーマンス	重い	軽量

Vue 3 では Piniaが推奨されており、新しく開発する際は Pinia を使用するのが望ましい

適切な状態管理を導入することで、より効率的な開発が可能となる

App.vue（親コンポーネント）

Vueアプリの 一番親のコンポーネント。

<template>
  <div>
    <router-view /> <!-- ここにページコンポーネントが表示される -->
  </div>
</template>

main.js（エントリーポイント）

Vueアプリを起動するためのファイル。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

package.json（パッケージ管理）

npm install したときに、どのライブラリが必要かを記録する。

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-service": "^4.5.0"
  }
}

npm run serve で開発サーバーが起動する。

Vite 版との違い

Vue CLIではなく Vite を使う場合、少しだけ違いがある。

vue.config.js → vite.config.js に変わる
babel.config.js が不要
main.js の書き方が import.meta.env を使うようになる

でも、基本のディレクトリ構成はほぼ同じ。

まとめ

初心者のうちは src/ の中を中心に触るとOK
特に components/ views/ router/ store/ の4つ は大事。

最初に理解しておきたいポイント

components/ はボタンやナビバーなどの小さい部品
views/ はページごとのコンポーネント
router/ で「どのURLでどのページを表示するか」を設定
store/ はアプリ全体のデータを管理する場所