Vue.jsの基本 #2

2025年11月20日
技術情報

前回に引き続きJavaScriptフレームワークのVue.jsの基本について説明します。
Vue.jsは、HTMLに動きをつけたり、ユーザー操作に応じてリアルタイムに画面を更新したりするためのフレームワークです。
この記事では、Vue.jsの中でも特によく使われるテンプレート構文（HTML側）とロジック（JavaScript側）を紹介します。

JavaScript側の基本構造

Vue 3 では Composition API（setup関数）と Options API（data, methods, computedなど）の2通りがあります。
ここでは両方を簡単に紹介します。

setup()：Composition APIのエントリーポイント

import { reactive  } from 'vue';

export default {
  setup() {
    // reactiveを使ってオブジェクト全体をリアクティブにする
    const state = reactive({
      count: 0,
      message: 'こんにちは！'
    });

    const increment = () => {
      state.count++;
    };

    return { state, increment };
  }
};

テンプレート側の使い方

<template>
  <div>
    <p>{{ state.message }}</p>
    <p>クリック回数：{{ state.count }}</p>
    <button @click="increment">カウントアップ</button>
  </div>
</template>

reactive() はオブジェクト全体をリアクティブ（反応的）に変換します。
⇒ state.count のように直接プロパティを参照できます（ref のように .value は不要）。

ref() は単一の値をリアクティブにするのに便利ですが、
複数の状態をまとめて管理するなら reactive() のほうがスッキリします。

return { state, increment } により、HTML（テンプレート）側で state と increment を使えるようになります。

次回はOptions APIのdataとcomputedについて説明します。

木曜日担当：nishida