Vueを触っていて躓いたところメモ #JavaScript

普段はサーバーサイドばかり触っていますが、少しフロントの勉強を始めたのでメモ程度に書き残しました。

Vue3のComposition APIの基本

リアクティブなデータの作成

Composition APIでは、ref と reactive という2つの関数を使用してリアクティブなデータを作成します。

ref

単純な値に使用: refは主にプリミティブなデータ型（文字列、数値、ブーリアンなど）のリアクティブな参照を作成するために使用されます。
.valueでアクセス: 作成されたリアクティブ変数にアクセスする際には .value プロパティを使用します。

サンプル：
```
const message = ref('Hello, Vue!');
console.log(message.value); // 'Hello, Vue!'
```

reactive

オブジェクトに使用: reactiveはオブジェクトや配列などの複雑なデータ構造をリアクティブにするために使用されます。
直接的なプロパティアクセス: 作成されたリアクティブオブジェクトのプロパティには直接アクセスできます。

サンプル：
```
const profile = reactive({ name: 'John', age: 30 });
console.log(profile.name); // 'John'
```

setup 関数

setup 関数は、コンポーネントのcreated と beforeMountライフサイクルの間に一度だけ呼び出されます。
この関数内で、リアクティブなデータやメソッドを定義します。

サンプル:

export default {
  setup() {
    const name = ref('John');
    
    function greet() {
      alert('Hello, ' + name.value);
    }

    return {
      name,
      greet,
    };
  },
};

「this」コンテキストは使えなくなり「setup」メソッドに(できなくはない)

従来、Vue2ではコンポーネントのインスタンスプロパティにアクセスするためにthisキーワードを使用していました。しかし、Vue3ではインスタンスプロパティへのアクセスの仕方が変わりました。

Vue3ではComposition APIのsetupという関数があります。しかし、setup関数内では、「this」というキーワードを使うことができなくなりました。理由は、setup関数が、オブジェクトが完成する前の段階で動作するためです。

代わりに、Vue 3では、上述したref関数を使ってデータプロパティを作成します。作成したデータプロパティを変更するためには、.valueでアクセスします。

サンプル：

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
    name: "ModalComponent",
    setup() {
        const modal = ref(false);

        const toggleModal = () => {
            modal.value = !modal.value;
        };

        return {
            modal,
            toggleModal,
        };
    },
});
</script>

このコードでは、modalという名前のリアクティブな参照を作成し、その値を読み書きするためにmodal.valueを使用しています。

イベント名のケースに関する注意点

Vue.jsでコンポーネント間で情報をやり取りする時には、カスタムイベントを使います。しかし、イベントの命名や使用には注意点があります。

HTMLは、基本的に「ケースインセンシティブ」です。これは、大文字と小文字を区別しないという意味です。そのため、Vue.jsでは、イベント名を作成する際には、「ケバブケース」（kebab-case: 単語間をハイフンで繋ぐ形式）を使用するのが一般的です。

以下の例を見てみましょう：

<!-- 子コンポーネント -->
<script>
export default {
  methods: {
    changeStatus() {
      this.$emit('change-modal-status', true); // イベント名はケバブケースで定義しています。
    },
  },
};
</script>

<!-- 親コンポーネント -->
<template>
  <child-component @change-modal-status="handleChangeStatus"></child-component> <!-- イベントをリスニングしています -->
</template>

<script>
export default {
  methods: {
    handleChangeStatus(status) {
      console.log(status); // イベントがトリガーされた時に実行される関数
    },
  },
};
</script>

この例では、子コンポーネントから親コンポーネントへchange-modal-statusというイベントを送信して、親コンポーネントでそれを受け取っています。

<child-component @change-modal-status="handleChangeStatus"></child-component>

子コンポーネントから親コンポーネントへイベントを発行する際には、イベント名をケバブケースで定義してリスニングして、親コンポーネント側ではhandleChangeStatusのようにキャメルケースで記述します。

@change-modal-status: この部分は、child-component内からchange-modal-statusという名前のイベントが発火されたときに、特定のメソッドをトリガーするリスナーを設定しています。@はv-on:の省略形であり、イベントリスナーを設定するVue.jsのディレクティブを示しています。
"handleChangeStatus": これは、change-modal-statusイベントがトリガーされたときに呼び出されるメソッドの名前です。このメソッドは親コンポーネント内に定義されているべきで、その中で何らかの処理を行います（例：受け取ったデータを使用して親コンポーネントの状態を更新する）。