Vue.js3.4～3.5の新機能をまとめて紹介！ 新しいAPIやSSRの改善

Vue3.4～3.5の新機能まとめ

新しく追加された機能（1）

　次に、新しく追加された4つの機能を紹介します。

v-bindの省略形

　最初に紹介するのは、v-bindの省略形です。例えば、次のようなディレクティブ記述があるとします。

<a v-bind:href="href">

　これまでも、このv-bindディレクティブは、次のような:による省略形がありました。

<a :href="href">

　さらに、省略できる仕組みがバージョン3.4で追加されました。ただし、紹介した例の通り、属性名と変数名が同名の場合のみ可能で、属性値が省略できます。結果、リスト2のように記述できます。

［リスト2］v-bindの新たな省略形

<a :href>

ref属性を変数化できるuseTemplateRef()

　次に紹介するのは、新しいuseTemplateRef()関数です。この関数は、ref属性が記述された要素を取得するための関数です。例えば、次のようなタグ記述があるとします。

<input type="number" ref="inputNameNumber">
<input type="tel" ref="inputNameTel">

　このref属性値をもとにDOM要素を取得する場合、これまでは、次のように属性値と同名のRef変数を宣言する必要がありました。もしこれを別の変数名にした途端、目的の要素を取得できず、使いづらいといった問題点がありました。さらに、変数名が固定化されてしまうために、動的に要素を取得することも難しいです。

const inputNameNumber = ref(null);
const inputNameTel = ref(null);

　これが、バージョン3.5でuseTemplateRef()関数が新たに導入され、リスト3のように、その引数に属性値を渡せば済むようになりました。

［リスト3］useTemplateRef()の利用

const inputNameNumber = useTemplateRef("inputNameNumber");
const inputNameTel = useTemplateRef("inputNameTel");

　useTemplateRef()が導入されたおかげで、ref属性を利用した要素を取得する際のRef変数名を、任意のものにすることができるだけでなく、リスト4のように、取得する要素の指定が変数化できるようになります。つまり、動的に要素を取得できるようになります。

［リスト4］useTemplateRef()の引数を変数化

const inputElementType = ref<"inputNameNumber"| "inputNameTel">("inputNameNumber");  // (1)
const inputElement = useTemplateRef(inputElementType.value);  // (2)

　そのため、例えば、要素の取得コードを、リスト5のようにコンポーザブル内に記述する際も簡単になります。

［リスト5］コンポーザブル内に記述した要素の取得コード

export function useInputNameProcess(inputNameRef: "inputNameNumber"| "inputNameTel") {
  const inputElementType = ref<"inputNameNumber"| "inputNameTel">(inputNameRef);
  const inputElement = useTemplateRef(inputElementType.value);
    :
}

　ただし、このuseTemplateRef()を利用する際、型に関して少し注意が必要です。まず、戻り値のvalueプロパティに取得した要素が格納されていますが、このvalueプロパティは、図1のようにnullの可能性があります。必要に応じてnullチェックを行ってからvalueプロパティを利用します。

図1：useTemplateRef()の戻り値のvalueプロパティはnullの可能性がある

　また、useTemplateRef()の引数の型は、そのコンポーネント内でref属性が記述された属性値を元にしたリテラル型のユニオン型だということです。リスト4の（1）のref()関数のジェネリクスの記述が「"inputNameNumber"| "inputNameTel"」となっているのはそのためです。もしジェネリクスを記述しないとすると、引数から文字列型と型推論されてしまい、（2）で図2のようなエラーとなります。

図2：useTemplateRef()の引数は文字列型では型エラーとなる