1. Vue.jsの基本概念
1.1 Vue.jsとは
Vue.js（ビュー・ジェイエス）はユーザーインターフェース（UI）を構築するためのJavaScriptフレームワークです。シンプルさと柔軟性を兼ね備えており、迅速に開発を開始できる一方で、複雑なシングルページアプリケーション（SPA）の構築にも適しています。
1.2 Vue.jsの特徴
・反応性
Vue.jsはデータの変更を検出し、UIを自動的に更新する反応性システムを提供します。これによりコードの記述量が減り、メンテナンスが容易になります。
・コンポーネントベース
UIを再利用可能なコンポーネントに分割できるため、コードの整理が容易になります。各コンポーネントは独自のロジック、テンプレート、スタイルを持つことができます。
・宣言的レンダリング
Vue.jsではテンプレートを使用して、データがどのように表示されるかを宣言的に記述できます。これによりHTMLとJavaScriptの分離が促進され、コードの可読性が向上します。
・リアクティブなデータバインディング
データとDOMの間の双方向バインディングをサポートしており、ユーザー入力などの変更が即座にデータに反映されます。
・豊富なエコシステム
Vue.jsはルーター（Vue Router）や状態管理（Vuex）などの公式プラグインを提供しており、SPAの開発を容易にします。
2. Vue.jsのインストールと初期設定
2.1 開発環境の準備
Vue.jsの開発を始めるためにはNode.jsとnpm（Node Package Manager）が必要です。公式サイトからインストールできます（https://nodejs.org/）。
2.2 Vue CLIのインストール
Vue CLIはVue.jsプロジェクトを迅速に作成できるツールです。
npm install -g @vue/cli
2.3 プロジェクトの作成
Vue CLIを使用して新しいプロジェクトを作成します。
vue create my-vue-app
プロジェクト作成時にプリセットやカスタム設定を選択できます。
標準設定を選択する場合、簡単に初期設定が完了します。
2.4 プロジェクトの起動
プロジェクトディレクトリに移動し、開発サーバーを起動します。
cd my-vue-app
npm run serve
これでローカル開発サーバーが起動し、ブラウザでhttp://localhost:8080にアクセスすると、デフォルトのVue.jsアプリケーションが表示されます。
3. Vue.jsの基本的な使用方法
3.1 テンプレート構文
Vue.jsのテンプレート構文はHTMLに似た構文を使用して、データとUIのバインディングを容易にします。
<div id="app">
<p>{{ message }}</p>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
}
});
上記の例では{{ message }}はデータオブジェクトのmessageプロパティにバインディングされています。このプロパティが変更されると、対応するDOM要素も自動的に更新されます。
3.2 ディレクティブ
ディレクティブはHTML属性として使用され、DOMに特殊な動作を適用するためのものです。
3.2.1 v-bind
属性バインディングを行うディレクティブです。
htmlコードをコピーする<img v-bind:src="imageSrc">
3.2.2 v-if
条件付きレンダリングを行うディレクティブです。
<p v-if="seen">This is visible</p>
3.2.3 v-for
リストレンダリングを行うディレクティブです。
<ul>
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
3.3 コンポーネント
Vue.jsのコンポーネントは再利用可能なUIパーツを作成するための基本単位です。
3.3.1 コンポーネントの作成
以下のようにVueコンポーネントを定義します。
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
3.3.2 コンポーネントの使用
作成したコンポーネントはテンプレート内でカスタムタグとして使用できます。
<div id="app">
<my-component></my-component>
</div>
3.4 プロパティとイベント
コンポーネント間でデータをやり取りするためにプロパティ（props）とイベント（events）を使用します。
3.4.1 親コンポーネントから子コンポーネントへのデータ渡し
Vue.component('child-component', {
props: ['message'],
template: '<p>{{ message }}</p>'
});
<child-component message="Hello from parent!"></child-component>
3.4.2 子コンポーネントから親コンポーネントへのイベント通知
Vue.component('child-component', {
template: '<button @click="notifyParent">Click me</button>',
methods: {
notifyParent() {
this.$emit('notify');
}
}
});
<child-component @notify="handleNotification"></child-component>
new Vue({
el: '#app',
methods: {
handleNotification() {
alert('Child component event received');
}
}
});
4. Vue Routerによるシングルページアプリケーション（SPA）の構築
Vue RouterはVue.js公式のルーティングライブラリであり、SPAを簡単に構築できます。
4.1 Vue Routerのインストール
npm install vue-router
4.2 ルーターの設定
新しいルーターインスタンスを作成し、ルートを定義します。
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = new VueRouter({
routes
});
new Vue({
router,
render: h => h(App)
}).$mount('#app');
4.3 ルーティングの使用
<router-link>コンポーネントを使用して、ナビゲーションリンクを作成します。
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
これによりリンクをクリックすると対応するコンポーネントが表示されます。
5. Vuexによる状態管理
VuexはVue.jsの公式状態管理パターンであり、大規模なアプリケーションでの状態管理を容易にします。
5.1 Vuexのインストール
npm install vuex
5.2 ストアの作成
新しいVuexストアを作成し、状態、ミューテーション、アクションを定義します。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
increment(context) {
context.commit('increment');
}
}
});
new Vue({
store,
render: h => h(App)
}).$mount('#app');
5.3 ストアの使用
コンポーネント内でストアを使用して状態にアクセスし、ミューテーションやアクションをディスパッチします。
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
increment() {
this.$store.dispatch('increment');
}
}
};
</script>
6. Vue.jsの実践例
6.1 フォームバリデーション
Vue.jsを使用してフォームバリデーションを実装します。
<template>
<div>
<form @submit.prevent="submitForm">
<div>
<label for="name">Name:</label>
<input type="text" v-model="name">
<span v-if="!name">Name is required.</span>
</div>
<div>
<label for="email">Email:</label>
<input type="email" v-model="email">
<span v-if="!validEmail">Valid email is required.</span>
</div>
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
email: ''
};
},
computed: {
validEmail() {
const re = /\S+@\S+\.\S+/;
return re.test(this.email);
}
},
methods: {
submitForm() {
if (this.name && this.validEmail) {
alert('Form submitted!');
} else {
alert('Please fill in all required fields.');
}
}
}
};
</script>
6.2 外部APIとの連携
Vue.jsを使用して外部APIからデータを取得し、表示する方法を示します。
<template>
<div>
<h1>Random User</h1>
<div v-if="user">
<p>Name: {{ user.name.first }} {{ user.name.last }}</p>
<p>Email: {{ user.email }}</p>
<img :src="user.picture.large" alt="User Picture">
</div>
<button @click="fetchUser">Fetch New User</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
user: null
};
},
methods: {
async fetchUser() {
try {
const response = await axios.get('https://randomuser.me/api/');
this.user = response.data.results[0];
} catch (error) {
console.error('Error fetching user:', error);
}
}
},
created() {
this.fetchUser();
}
};
</script>
6.3 カスタムディレクティブ
Vue.jsではカスタムディレクティブを作成して、特定のDOM操作を行うことができます。
<template>
<div>
<h1 v-highlight="'yellow'">Highlight me!</h1>
</div>
</template>
<script>
Vue.directive('highlight', {
bind(el, binding) {
el.style.backgroundColor = binding.value;
}
});
export default {
name: 'App'
};
</script>
7. まとめ
Vue.jsは使いやすく強力なJavaScriptフレームワークであり、シンプルなコンポーネントベースのアーキテクチャと反応性システムを提供します。テンプレート構文、ディレクティブ、コンポーネント、Vue Router、Vuexなどの豊富な機能を活用することで、効率的にモダンなウェブアプリケーションを開発できます。初心者から上級者まで幅広い開発者に適したツールであり、学習曲線も緩やかです。実践的な例を通じてVue.jsの基本を理解し、さらに深い活用方法を探求していきましょう。
