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ファイル） |
| コミュニティとエコシステム | 大規模で豊富なライブラリとツールが揃っている | 成長中で活発なエコシステム |
| プロジェクト規模適正 | 大規模で複雑なプロジェクト | 小規模なプロジェクト |
構文とコンポーネント
- React
JSXという、JavaScript内にHTMLを直接記述できるものを採用。
関数コンポーネントやクラスコンポーネントで定義できるが、関数コンポーネントが主流。
ロジックとビューを一体化してるため、コンポーネントごとに管理できる。
import React from "react";
const Sample = () => {
return <h1>Hello, world</h1>;
};
export default Sample;
- Vue.js
template、script、styleとしてコンポーネントに記述できるものを採用。
役割ごとにコードを管理できる。
<template>
<h1>Hello, Vue!</h1>
</template>
<script>
export default {
name: 'Component'
}
</script>
<style>
h1 {
color: blue;
}
</style>
データバインディング
-
React
一方向バインディングなため、コードの追跡がしやすかったり、データの変更も予測しやすくデバッグが容易といったメリットがある。 -
Vue.js
双方向バインディングのため、データとUIが自動的に双方向に同期されるためコードがシンプルで直観的であったり、リアルタイムで即座に反映されるといったメリットがある。
仮想DOM
-
React
特定のライフサイクルメソッドやフックを使用し、手動での調整が可能。 -
Vue.js
リアクティブシステムが組み込まれているため、最小限の記述で効率的にUIをに反映させることが可能。
状態管理
-
React
状態管理にはuseStateやuseReducerといったフックを使用し、シンプルな状態管理が可能。
Redux等の外部ライブラリを使用することでコンポーネント間のデータ共有を容易にすることが可能。 -
Vue.js
Vuexを使用することでアプリ全体の状態管理がストアを通じて一元管理することが可能。
ライフサイクルメソッド
-
React
ライフサイクルメソッド（フック）を使用しDOMの変化を監視・制御することが可能。 -
Vue.js
直感的なライフサイクルフック（created/mounted/updated等）があり、データバインディングやDOMの更新に容易に対応することが可能。
コンポーネントの定義
-
React
関数コンポーネントとクラスコンポーネントを使用することができるが、主流は関数コンポーネント。 -
Vue.js
単一ファイルコンポーネントで定義される。
ロジックとビューをわけ、視覚的に把握しやすい構造になっている。
コミュニティとエコシステム
-
React
非常に大規模なコミュニティと様々なライブラリ・ツールがそろっている。
選択肢が多い反面、選定が難しい場合もある。 -
Vue.js
Reactに比べるとライブラリの数は少ないが、公式のツールが充実している。
プロジェクト規模適正
-
React
柔軟性が高く、大規模で複雑なアプリケーション開発等に適している。 -
Vue.js
学習コストが低く、小規模～中規模のプロジェクトに適している。
以上を踏まえた上で、後は開発者の好みやプロジェクトによって何を使用するか判断していくと良い。
Vue.jsを用いて制作されたサイト
-
Nintendo
https://my.nintendo.com/ -
GitLab
https://about.gitlab.com/ -
Trivago（マガジン）
https://magazine.trivago.com/ -
Vue.js
https://ja.vuejs.org/