【個人開発】Vue.jsを触ってみる -フォルダ構成-

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

## **Vue.js プロジェクトのフォルダ構成**
```bash
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`
  ```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`
  ```vue
  <template>
    <div>
      <h1>ホームページ</h1>
      <MyButton label="クリック" />
    </div>
  </template>

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

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



#### **router/（ルーティング設定）**
- **「どのURLでどのページを表示するか」を決める**。

  ```js
  // 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** を使うのが主流。


  ```js
  // 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()` を用いた場合の問題点**
```vue
<template>
  <p>カウント: {{ count }}</p>
  <button @click="count++">増やす</button>
</template>

<script>
export default {
  data() {
    return { count: 0 };
  }
};
</script>
```
**問題点**
- このコンポーネント内でしか `count` を管理できない
- 他のコンポーネントで `count` を使うには、親コンポーネントを経由する必要がある
- 画面を移動するとデータがリセットされる

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

### **状態を管理するファイルを作成**
```js
import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});
```
`state` でデータを定義し、`actions` でデータの変更を行う

### **コンポーネントでの利用**
```vue
<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アプリの **一番親のコンポーネント**。

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


### **main.js（エントリーポイント）**
- Vueアプリを起動するためのファイル。

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

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


### **package.json（パッケージ管理）**
- `npm install` したときに、どのライブラリが必要かを記録する。

  ```json
  {
    "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つ** は大事。

### **最初に理解しておきたいポイント**
1. `components/` はボタンやナビバーなどの小さい部品
2. `views/` はページごとのコンポーネント
3. `router/` で「どのURLでどのページを表示するか」を設定
4. `store/` はアプリ全体のデータを管理する場所