はじめに
個人開発を進めるにあたりフロントを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/はアプリ全体のデータを管理する場所