はじめに
Vue.js（ビュージェイエス）とは、Webサイトのユーザーインターフェース（UI）を構築するためのJavaScriptフレームワークです。
オープンソースとして提供されており、Webアプリケーションの「見た目」や「動き」を効率的かつモダンに開発できます。
主な特徴
- 学習コストが比較的低い
- HTML、CSS、JavaScriptの基本知識があれば短期間で習得できるよう設計されており、ReactやAngularなどの他の主要フレームワークに比べて入門しやすいのが特徴です。
- プログレッシブ（段階的な導入が可能）
- 大規模なシングルページアプリケーション（SPA）の構築はもちろん、既存のWebサイトの一部にだけ組み込んで使う（例：モーダルやフォームの部分だけVue.jsにする）といった柔軟な使い方ができます。
- 双方向データバインディング
- データ（JavaScriptの変数）とビュー（画面上の表示）を自動的に同期させます。入力フォームの値が変わるとデータも自動で更新されるため、記述するコードの量を減らすことができます。
基本の書き方
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.js サンプル</title>
<!-- CDNからVue.js（Vue 3）を読み込む -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
body { font-family: sans-serif; margin: 40px; }
.box { margin-bottom: 20px; padding: 15px; border: 1px solid #ccc; border-radius: 5px; }
</style>
</head>
<body>
<div id="app">
<h1>Vue.js 体験</h1>
<!-- 1. 双方向データバインディング (v-model) -->
<div class="box">
<h3>リアルタイム文字連動</h3>
<input type="text" v-model="inputText" placeholder="ここに文字を入力">
<p>入力された内容: <strong>{{ inputText }}</strong></p>
</div>
<!-- 2. イベントハンドリング & カウンター -->
<div class="box">
<h3>シンプルカウンター</h3>
<p>現在のカウント: <strong>{{ count }}</strong></p>
<button @click="increment">カウントアップ</button>
<button @click="count = 0">リセット</button>
</div>
<!-- 3. リストの追加・削除 (v-for) -->
<div class="box">
<h3>アイテムリスト管理</h3>
<ol>
<li v-for="(it, idx) in items" :key="idx">
{{ it }} <button @click="delItem(idx)"> x </button>
</li>
</ol>
<input type="text" v-model="item" placeholder="新しいアイテム">
<button @click="addItem">アイテム追加</button>
</div>
</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
// 1. 文字連動用
const inputText = ref('')
// 2. カウンター用
const count = ref(0)
const increment = () => { count.value++ }
// 3. リスト管理用
const items = ref(['aaa', 'bbb', 'ccc'])
const item = ref('')
const addItem = () => {
if (item.value.trim() === '') return
items.value.push(item.value)
item.value = ''
}
const delItem = (idx) => {
items.value.splice(idx, 1)
}
return {
inputText,
count,
increment,
items,
item,
addItem,
delItem
}
}
}).mount('#app')
</script>
</body>
</html>
全体の仕組み
このサンプルは、ビルドツール（Node.jsやnpmなど）を使わず、ブラウザだけで動かせるようにCDN経由でVue.jsを読み込んでいます。
HTMLの中に<div id="app">という「Vueで管理するエリア」を作り、その中でJavaScriptのデータや関数を連携させて動的に画面を書き換えています。
1. HTML部分の解説（画面の表示とディレクティブ）
Vue.jsでは、HTMLのタグの中に特殊な属性（ディレクティブと呼びます）を記述することで、データと連動した動きを実現しています。
-
v-model="inputText":
input要素とJavaScript側のinputTextという変数を「双方向」に結びつけます。ユーザーがキーボードで文字を入力すると即座に変数の中身が更新され、逆に変数が変われば入力欄も変わります。 -
{{ inputText }}:
「マスタッシュ構文（二重中括弧）」と呼ばれ、JavaScriptの変数の値をそのままHTMLに文字として埋め込むために使います。 -
@click="increment":
v-on:click の省略形で、ボタンがクリックされたときにJavaScript側のincrement関数を実行します。 -
count = 0:
このように簡単な処理であれば、関数を作らなくても直接JavaScriptのコードをその場で書くこともできます。 -
v-for="(it, idx) in items":
配列 items の中身を一つずつループ処理して、リスト（<li>）を自動で大量生成します。itは要素の中身、idxは何番目か（インデックス番号）が入ります。 -
:key="idx":
Vueがリストの要素を効率よく識別・管理（再描画の最適化）するために必須となる属性です。
2. JavaScript部分の解説（Composition API）
<script>タグの中身を見ていきます。Vue 3のComposition APIという書き方が使われています。
Vueが提供する機能の中から、アプリを作るcreateAppと、データをリアクティブ（値が変わると画面も連動して変わる仕組み）にするrefを取り出しています。
-
setup():
Composition APIの心臓部です。コンポーネントが初期化されるとき最初に呼ばれ、ここで変数や関数を定義します。 -
.mount('#app'):
HTML側の<div id="app">の中身を、このVueアプリの管理下に置く（マウントする）という指示です。
変数の定義にref()を使う理由
JavaScriptの通常の変数（let inputText = ''など）だと、値が変わっても画面が自動で変わりません。ref('')で包むことで、値が書き換わったときにVueがそれを察知し、画面の該当箇所を自動で更新（リアクティビティ）してくれます。
なお、JavaScriptのコード内でrefの中身を読み書きするときは、inputText.valueのように.valueをつけるルールになっています（※HTMLテンプレート内では自動で.valueが解決されるため、{{ inputText }}のようにそのまま書けます）。
各関数の動き
-
increment:
count.value++で現在の数値を1つ増やしています。 -
addItem:
1.item.value.trim() === ''で、入力欄が空（またはスペースだけ）の場合は処理をストップします。
2.items.value.push(item.value)で、配列の最後に新しいアイテムを追加します。
3.item.value = ''で、入力が終わったあとにテキストボックスを空に戻します。 -
delItem:
items.value.splice(idx, 1)を使って、指定されたインデックス番号（idx）の要素を1つだけ削除します。
return { ... }で返した変数や関数だけが、HTMLテンプレート側（<div id="app">の中）から参照できるようになります。
まとめ
複雑な開発環境を準備しなくてもメモ帳とブラウザさえあれば動作します。
コードの数字や文字を書き換えて、どのように画面が変化するか試してみてください。