Vueプロジェクトの主要ディレクトリとファイル
Vue 3プロジェクトは、Viteなどのビルドツールによって生成された標準的なディレクトリ構造を持っています。各ファイルやディレクトリには特定の役割があり、これらを理解することはプロジェクト管理と開発の効率化に不可欠です。
node_modules/: プロジェクトが依存する外部ライブラリやパッケージが格納されるディレクトリです。npmやYarnでインストールされたすべての依存関係がここに保存されます。public/: ビルド時に処理されず、そのままWebサーバーによって提供される静的ファイルを配置する場所です。faviconやrobots.txtなど、特定のパスで直接アクセスさせたいファイルに適しています。src/: アプリケーションの主要なソースコードを格納するディレクトリです。ほとんどの開発作業はこのディレクトリ内で行われます。assets/: コンポーネントやページで利用される静的リソース（画像、CSS、フォントなど）を格納します。Viteによって適切に処理・バンドルされます。css/: グローバルスタイルシートや共通CSSファイルを配置します。images/: アプリケーションで使用する画像を格納します。
components/: アプリケーション内で再利用可能なUIコンポーネント（ボタン、カードなど）を定義する場所です。router/: Vue Routerのルーティング定義ファイルを格納します。アプリケーションのURLとコンポーネントのマッピングを管理します。views/: アプリケーションの各ページに対応するVueコンポーネントを格納します。通常、これらはルーティングによって直接表示されるコンポーネントです。App.vue: 全てのVueコンポーネントの親となるルートコンポーネントです。アプリケーション全体のレイアウトや共通要素を定義します。main.js: Vueアプリケーションのエントリーポイントです。Vueインスタンスの作成、ルートコンポーネントのマウント、ルーティング、ストア、グローバルなプラグインやスタイルのインポートなど、アプリケーションの初期化処理を行います。
index.html: VueアプリケーションがマウントされるシングルページのHTMLファイルです。Viteによってアプリケーションのスクリプトが自動的に注入されます。jsconfig.json(またはtsconfig.json): JavaScript（またはTypeScript）の言語設定ファイルです。エディタの補完や型チェックの動作を構成します。package.json: プロジェクトのメタデータ、スクリプト、依存関係（dependenciesおよびdevDependencies）を定義するファイルです。package-lock.json:package.jsonにリストされている依存関係の正確なバージョンと依存ツリーを記録し、ビルドの一貫性を保証します。vite.config.js: Viteビルドツールの設定ファイルです。開発サーバー、バンドル設定、プラグインなどを構成します。
ウェブページのタイトル設定
ブラウザのタブに表示されるページのタイトルは、public/index.htmlファイル内で設定します。このファイルはVueアプリケーションの基盤となるHTMLテンプレートであり、<head>セクションにある<title>タグの内容を編集することで、アプリケーション全体のデフォルトタイトルを変更できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のVueアプリケーション</title> <!-- ここを編集 -->
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
上記の<title>タグを例えば「私のVueアプリケーション」に変更することで、ブラウザのタブにその文字列が表示されるようになります。
グローバルなCSSスタイルの適用
アプリケーション全体にわたって共通のスタイルを適用するために、グローバルCSSファイルを作成し、それをエントリーポイントでインポートする方法が一般的です。src/assets/css/global.cssのようなファイルを作成し、基本的なリセットスタイルや共通のフォント、色などを定義します。
例として、src/assets/css/global.cssに以下のスタイルを記述します。
/* src/assets/css/global.css */
:root {
--primary-text-color: #2c3e50;
--link-default-color: #42b983;
--bg-light-gray: #f9f9f9;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: 'Hiragino Sans', 'メイリオ', Meiryo, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--primary-text-color);
background-color: var(--bg-light-gray);
}
a {
text-decoration: none;
color: var(--link-default-color);
}
a:hover {
text-decoration: underline;
}
次に、アプリケーションのエントリーポイントであるsrc/main.jsでこのグローバルCSSファイルをインポートします。
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
// グローバルCSSファイルのインポート
import './assets/css/global.css';
const app = createApp(App);
app.use(router);
app.mount('#app');
npm run devコマンドで開発サーバーを起動すると、これらのスタイルがアプリケーション全体に適用され、例えば文字色やマージンが変更されていることが確認できます。
Vue Routerによるルーティング設定
Vue Routerは、Vue.jsアプリケーションにシングルページアプリケーション（SPA）のルーティング機能を提供します。URLの変更に応じて異なるコンポーネントを表示するために使用されます。ここでは、存在しないURLにアクセスした場合に表示する404エラーページのルーティングを設定する方法を説明します。
404エラーページのコンポーネント作成
まず、src/views/ディレクトリ内にError404View.vueという名前でエラーページ用のコンポーネントを作成します。
<!-- src/views/Error404View.vue -->
<template>
<div class="error-page-wrapper">
<div class="error-content-area">
<img src="@/assets/images/page_not_found.png" alt="ページが見つかりません" class="error-image">
<p class="error-message">お探しのページは見つかりませんでした。</p>
<div class="action-buttons">
<a href="/" class="home-button">ホームへ戻る</a>
</div>
</div>
</div>
</template>
<script setup>
// スクリプト部分が必要な場合はここに記述
// 例: コンポーネントがマウントされた時に何か処理を行う場合など
</script>
<style scoped>
.error-page-wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f2f5;
padding: 2rem;
}
.error-content-area {
max-width: 580px; /* 画像の幅に合わせて調整 */
width: 100%;
text-align: center;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
padding: 3.5rem 2rem;
}
.error-image {
max-width: 95%; /* 親要素に対する幅 */
height: auto;
margin-bottom: 2rem;
display: block; /* 中央寄せのために */
margin-left: auto;
margin-right: auto;
}
.error-message {
font-size: 1.3rem;
color: #666;
margin-bottom: 1.8rem;
font-weight: 500;
}
.action-buttons {
padding-top: 1rem;
}
.home-button {
display: inline-block;
background-color: #007bff;
color: #ffffff;
padding: 0.8rem 1.8rem;
border-radius: 5px;
font-size: 1.1rem;
text-decoration: none;
transition: background-color 0.3s ease;
}
.home-button:hover {
background-color: #0056b3;
text-decoration: none;
}
</style>
このコンポーネントでは、<style scoped>ブロックを使用して、このコンポーネントのみに適用されるスタイルを定義しています。画像パスの@/assets/images/page_not_found.pngのように、@はsrcディレクトリのエイリアスとして機能し、プロジェクトルートからの相対パス指定を簡潔にします。
Vue Routerのルーティング定義
次に、src/router/index.jsファイルでルーティングルールを定義し、Error404View.vueコンポーネントを特定のパスと関連付けます。また、定義されていないパスへのアクセスをすべてこの404ページにリダイレクトする設定も追加します。
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue'; // 例えば、ホームコンポーネント
import Error404View from '@/views/Error404View.vue'; // 作成した404コンポーネントをインポート
const routes = [
{
path: '/',
name: 'Home',
component: HomeView,
},
{
path: '/not-found', // 404ページへの直接的なパス
name: 'NotFound',
component: Error404View,
meta: { title: 'ページが見つかりません' } // ブラウザのタブタイトルを設定
},
// 上記のどのパスにも一致しない場合にこのルートがマッチします
// Vue Router 4では ':pathMatch(.*)*' を使用します
{
path: '/:pathMatch(.*)*',
name: 'AllOtherRoutes',
redirect: '/not-found', // '/not-found'パスへリダイレクト
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
// オプショナル: ルート変更前にページタイトルを更新
router.beforeEach((to, from, next) => {
document.title = to.meta.title ? `${to.meta.title} | アプリケーション名` : 'アプリケーション名';
next();
});
export default router;
この設定により、例えばブラウザで/non-existent-pathのような存在しないURLにアクセスした場合、Vue Routerはそれを捕捉し、/not-foundパスへリダイレクトします。その結果、ユーザーには作成したError404View.vueコンポーネントが表示されるようになります。