はじめに
近年、フロントエンド開発ではSPA（シングルページアプリケーション）の普及により、効率的にUIを構築・管理する仕組みが求められています。
その代表的な技術のひとつが「Vue.js」です。
Vue.jsは、コンポーネントベースの設計とリアクティブなデータバインディングを特徴とするフレームワークであり、シンプルさと柔軟性を両立しています。
本記事では、Vue.jsの基本的な考え方や主要な機能（ref・reactive・computed・watch）について、初学者でも理解できるように整理しました。
これを通じて、フロントエンド開発の基礎理解を深め、実務でのUI構築に役立てることを目的としています。
SPAとは・・・Webアプリの画面遷移を1つのページ内で動的に行う仕組みのこと
目次
1. Vue.jsとは
2. ReactとVue.jsの違い
3. なぜVue.jsが必要なのか
4. Vue.jsの特徴「リアクティブ」とは？
5. ref・reactive・computed・watchの使い分け
6. 実務における使い方
7. まとめ
１.Vue.jsとは
Vue.jsは、WebサイトやWebアプリの画面を効率よく作るためのJavaScriptフレームワークです。
例えば、ECサイトの商品一覧や会員情報画面などでは、
- ボタンを押したら画面が変わる
- 入力した内容がリアルタイムで反映される
- 検索条件によって表示内容が変わる
といった動きがあります。
Vue.jsを利用することで、このような動的な画面を効率的に開発できます。
「データが変わると画面も自動で変わる仕組みを持った開発ツール」
と考えるとイメージしやすいです。
２.ReactとVue.jsの違い
ReactとVue.jsは、どちらもWebアプリケーションの画面を作るための技術です。
ReactはUI構築に特化したライブラリであり、自由度が高く大規模開発でよく利用されています。一方、Vue.jsは学習しやすさを重視したフレームワークで、初心者でも扱いやすいことが特徴です。
ReactはJavaScript中心に開発を行うのに対し、Vue.jsはHTMLに近い記述方法を採用しているため、直感的に理解しやすいという違いがあります。
そのため、学習のしやすさを重視する場合はVue.js、自由度や採用実績を重視する場合はReactが選ばれることが多いです。
３.なぜVue.jsが必要なのか
Vue.jsが必要とされる理由は、画面表示を効率よく管理できるためです。
従来のJavaScriptだけでもWebページを作ることはできますが、その場合は
- データを変更する処理
- 画面を更新する処理
をそれぞれ開発者が書く必要があります。
例えば、入力フォームの値を画面に反映する場合、
「値を変更するたびに、表示部分を探して書き換える」
といった処理が必要になるので画面の要素が増えるほど管理が難しくなります。
一方でVue.jsでは、このような課題を解決するために
**データと画面を自動的に連動させる仕組み（リアクティブ）**が用意されています。
そのため、データを変更するだけで、画面の表示も自動的に更新されます。
４.Vue.jsの特徴「リアクティブ」とは？
Vue.jsのリアクティブとは、
データの変化を自動で検知して、関連する画面表示を更新する仕組みです。
リアクティブ機能（ref）を使用した場合
1.データが変わる→2.Vueが変化を検知する→3.画面が自動で更新される
Vue.js実装例：ボタンを押すと数字が増える
JavaScriptの場合は‥
1.ボタンを押す→2.count の値が変わる→3.document.getElementById()で要素を取得→4. innerTextで画面を書き換える→5.画面が更新される
JavaScript実装例：ボタンを押すと数字が増える
JavaScriptの変数と画面表示は別々に管理されています。そのため変数の値を変更しただけでは画面は自動で更新されません。一方Vue.jsではデータと画面が連携しているため、データを変更するだけで画面が自動的に更新されます。
リアクティブ機能はref以外に reactive・computed・watch等があります。
５.ref・reactive・computed・watchの使い分け
Vueにはリアクティブなデータを扱うための機能が複数用意されています。それぞれの機能には役割があるため、用途に応じて適切に使い分けることが重要です。
使い分けのポイント
ref は、文字列や数値、真偽値などの単一の値をリアクティブに管理するための機能です。シンプルなデータを扱う場合に適しており、Composition APIでは最も基本的な状態管理の方法として利用されます。
reactive は、オブジェクトや配列全体をリアクティブに管理するための機能です。複数の関連するデータを1つのまとまりとして扱えるため、データ構造を整理しやすくなります。
computed は、既存のリアクティブな値をもとに新しい値を生成するための機能です。計算結果をキャッシュする仕組みを持っているため、依存する値が変更された場合のみ再計算されます。そのため、テンプレート内で複雑な計算を直接記述するよりも効率的です。
watch は、リアクティブな値の変化を検知し、そのタイミングで処理を実行するための機能です。値の変化そのものを監視することが目的であり、計算結果を作成する computed とは役割が異なります。
選択時の考え方
状態を保持したい場合は ref または reactive を使用します。単一の値であれば ref、複数の値をまとめて管理したい場合は reactive を選択します。
また、既存の値から別の値を導き出したい場合は computed を使用し、値の変化をきっかけに何らかの処理を実行したい場合は watch を使用します。
7.実務における使い方
ref、reactive、computed、watch は単独ではなく組み合わせて利用することが多いです。
ユーザー検索画面を例に見てみましょう。
ref
検索キーワードの入力値を管理します。
reactive
検索条件をまとめて管理します。
例えば東京都在住で絞る場合はreactiveに追加されます。
computed
検索結果件数を自動計算します。
watch
検索キーワード変更時に検索処理を実行します。
8.まとめ
- ref は単一の状態を管理する仕組み
- reactive はオブジェクトの状態を管理する仕組み
- computed は状態から新しい値を計算する仕組み
- watch は状態の変化を監視して処理を実行する仕組み
Vueではこれらを組み合わせることで、画面の状態管理やデータ更新を効率的に行えます。
ref と reactive は「状態を持つための機能」、computed は「状態から新しい値を作る機能」、watch は「状態の変化に反応して処理を実行する機能」という役割分担になっています。
また、役割を明確に分けることでコードの可読性が向上し、保守や機能追加もしやすくなります。
