Vue.jsの基本 #3

2025年12月11日
技術情報

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

JavaScript側の基本構造

Vue 3 では Composition API（setup関数）と Options API（data, methods, computedなど）の2通りがあります。
今回は Options API（data, methods, computedなど）について簡単に紹介します。

data()：Options APIでデータを定義する

export default {
  data() {
    return {
      message: 'こんにちは！',
      count: 0
    };
  }
};

data() は画面で使うデータを定義します。
戻り値のオブジェクトがVueインスタンスの状態になります。

computed：計算済みプロパティ（リアクティブな値の加工）

export default {
  data() {
    return { price: 100, taxRate: 0.1 };
  },
  computed: {
    totalPrice() {
      return this.price * (1 + this.taxRate);
    }
  }
};

computed は、他のデータから自動的に計算される値を定義します。
キャッシュされるため、無駄な再計算を防ぎます。

methods：関数（イベント処理など）

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

イベント時の動作などを関数としてまとめておく場所です。
テンプレートからは @click=”increment” のように呼び出せます。

mounted：コンポーネントが画面に表示されたあとに実行

export default {
  mounted() {
    console.log('コンポーネントがマウントされました！');
  }
};

mounted() はVueコンポーネントが実際にDOMに描画された直後に呼ばれます。
APIデータ取得や初期設定などに使います。

木曜日担当：nishida

nishida at 2025年12月11日 10:00:00

Tweets by GIGASJAPAN_APPS

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833（平日 10:00～17:00）

お問い合わせフォーム

↑

↓

Vue.jsの基本 #3

ギガスジャパン

お問い合わせ