Vueインスタンスと基本構文

Vue.jsは、データバインディングとコンポーネントベースの開発を特徴とするフロントエンドフレームワークです。1つのVueインスタンスは、elプロパティで指定された単一のDOM要素（通常はIDセレクタ）にマウントされます。

<div id="app">
  <p :style="textStyle">{{ message }}</p>
</div>

<script src="vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'こんにちは',
      textStyle: { color: 'purple' }
    },
    methods: {
      updateColor() {
        this.textStyle.color = 'coral';
      }
    }
  });
</script>

テンプレート内でのデータ表示

Vueでは、中括弧{{ }}によるインタポレーション（補間）式でデータを表示できます。式内ではJavaScriptの演算やメソッド呼び出しが可能です。

<div id="demo">
  <p>{{ text.toUpperCase() }}</p>
  <p>{{ items.length }}個のアイテム</p>
</div>

<script>
new Vue({
  el: '#demo',
  data: {
    text: 'hello',
    items: [1, 2, 3]
  }
});
</script>

テキスト・HTML制御ディレクティブ

• v-text：要素のtextContentを設定（子ノードは上書き）
• v-html：innerHTMLを設定（XSSリスクあり）
• v-once：初回レンダリング後に再評価しない

<div id="text-demo">
  <p v-text="rawText">これは無視される</p>
  <p v-html="htmlContent"></p>
  <p v-once>{{ staticMessage }}</p>
</div>

<script>
new Vue({
  el: '#text-demo',
  data: {
    rawText: '<em>強調</em>',
    htmlContent: '<strong>太字</strong>',
    staticMessage: '一度だけ表示'
  }
});
</script>

イベント処理

v-on（または@）ディレクティブでイベントリスナーを登録します。メソッドには自動的にイベントオブジェクトが渡されますが、引数を明示する場合は$eventで参照します。

<div id="event-demo">
  <button @click="handleClick">クリック</button>
  <button @click="handleWithArgs(10, $event)">引数付き</button>
</div>

<script>
new Vue({
  el: '#event-demo',
  methods: {
    handleClick(e) {
      console.log('座標:', e.clientX, e.clientY);
    },
    handleWithArgs(value, event) {
      console.log('値:', value, 'イベント:', event.type);
    }
  }
});
</script>

属性バインディング

v-bind（または:）で動的属性を設定します。

classの動的制御

<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :class="[baseClass, isActive ? 'active' : '']"></div>

styleの動的制御

<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

JavaScriptにおけるオブジェクト指向

JavaScriptでは、コンストラクタ関数やクラス構文でオブジェクト指向プログラミングが可能です。

// コンストラクタ関数によるクラス定義
function User(name) {
  this.name = name;
}

User.prototype.greet = function() {
  return `こんにちは、${this.name}さん`;
};

const user = new User('山田');
console.log(user.greet()); // "こんにちは、山田さん"

変数宣言とアロー関数

ES6以降では、let（ブロックスコープ）、const（定数）が推奨されます。varは関数スコープで、巻き上げの影響を受けます。

const add = (a, b) => a + b;
const greet = name => `Hello, ${name}!`;

// オブジェクトメソッド内でのthisの挙動に注意
const obj = {
  name: 'テスト',
  regularFunc() {
    console.log(this.name); // "テスト"
  },
  arrowFunc: () => {
    console.log(this); // グローバルオブジェクト（ブラウザならwindow）
  }
};