Vue.jsについて
Vue.jsの概要
UIを構築するためのJavaScriptフレームワーク。
Webアプリケーションの開発においてコンポーネントベースのアーキテクチャを採用しており、柔軟性と再利用性の高いコードの作成を可能にする。
特徴
①高速な実行・読み込み
仮想DOMという仕組みがVue.jsには用意されているため、Webページを高速に実行・読み込みしてくれる。
仮想DOMでは 変更（差分）があった部分のみが再描画されるため、全体を再描写する必要がなく 、表示がスムーズで読み込みの速さにもつながっている。
②コンポートベースでの開発
再利用可能なコンポーネントを組み合わせてアプリケーションを構築しているため、コンポーネントベースで開発することによりコードの再利用性が向上し、変更や修正が簡単になり保守性が高まる。
③リアクティブなデータバインディング
データバインディングとは、データの変更を自動的に画面に反映させる仕組みのこと。
Vue.jsにはv-model、v-bindなどのテンプレート内ディレクティブが豊富に用意されており、HTMLテンプレートで簡単にロジックを組み込むことができるため、データの変更が即座に画面へと反映され、双方向データバインディングが簡単に実装することができる。
④柔軟なエコシステム
さまざまなライブラリやプラグインを使用することが可能。
Vue RouterでSPA（シングルページアプリケーション）を構築したり、Vuexで状態管理を行ったりと、プロジェクトに合わせて必要な機能を追加できる。
Vue.jsで使用する
データバインディング
例：Vueコンポートのデータバインディング
<template>
<div>
<input v-model="text" placeholder="テキストを入力してください">
<p>入力されたテキスト: {{ text }}</p>
</div>
</template>
<script>
export default {
data() {
return {
text: ''
};
}
};
</script>
初期値は何も持っておらず、inputに入力することで入力されたテキスト：〇〇と入力したデータが表示される。
このようにデータバインディングを使用することで、リアルタイムにデータを反映することができる。
ディレクティブ
<template>
<div>
<p v-if="isVisible">こんにちは</p>
<button @click="toggleVisibility">表示切り替え</button>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
};
</script>
初期値はisVisibleがtrueなため、「こんにちは」が表示される。
ボタンをクリックすることでtoggleVisibilityが実行され、this.isVisibleの値が反転し、isVisibleがfalse扱いになり、テキストが表示されなくなる。
このようにディレクティブを使用することで、条件付きの表示が可能になる。
ReactとVue.jsの違いについて
JavaScriptのフレームワーク・ライブラリとしてよく名前のあがるReactについて、Vue.jsとの違いを比較してみます。
ReactとVue.jsは、どちらもWebのUI構築に用いられるJavaScriptのライブラリ、フレームワーク。
| 特徴 | React | Vue.js |
|---|---|---|
| 構文とコンポーネント | JSX | HTMLのようなテンプレート |
| データバインディング | 一方向（親から子へのデータフロー） | 双方向（v-modelでの双方向データバインディング） |
| 仮想DOM | 使用 | 使用 |
| 状態管理 | 外部ライブラリ（例: Redux, MobX） | 組み込み（Vuex） |
| ライフサイクルメソッド |
componentDidMount, componentDidUpdate など |
mounted, updated など |
| コンポーネントの定義 | クラスコンポーネントまたは関数コンポーネント | 単一ファイルコンポーネント（.vueファイル） |
| コミュニティとエコシステム | 大規模で豊富なライブラリとツールが揃っている | 成長中で活発なエコシステム |
| プロジェクト規模適正 | 大規模で複雑なプロジェクト | 小規模なプロジェクト |
上記を踏まえた上で、後は開発者の好みやプロジェクトによって何を使用するか判断していくと良い。
Vue.jsを用いて制作されたサイト
-
Nintendo
https://my.nintendo.com/ -
GitLab
https://about.gitlab.com/ -
Trivago（マガジン）
https://magazine.trivago.com/ -
Vue.js
https://ja.vuejs.org/