SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ますます便利になるVue.jsの新機能を探ろう!

Vue3.3の新機能とは? ジェネリクスコンポーネントを中心にdefineSlots()などの新機能を解説【後編】

TypeScriptのサポートがアップデート! Vue3.3の新機能まとめ 後編


  • X ポスト
  • このエントリーをはてなブックマークに追加

ゲッタに対応したtoRef()とtoValue()

 最後に紹介するのが、新機能リスト8のtoValue()です。この関数は、どちらかというと、コンポーザブルなどの関数内で利用するために新たに導入されたものであり、リアクティブ変数をリアクティブではないものへと変換するものです。

Refオブジェクトを生成するtoRef()

 このtoValue()の導入に合わせて、その仕様が変更されたものとしてtoRef()があります。toRef()は、これまで、リアクティブなオブジェクトの個々のプロパティを独立したリアクティブな変数とする際に利用されてきた関数です。例えば、リスト8の(1)のリアクティブなオブジェクトであるmemberInfoのnameのみを、リアクティブな別の変数としたい場合に、リスト8の(2)のようなコードを記述して利用できます。

リスト8:toRef()の利用例
const memberInfo = reactive({  // (1)
  name: "田中太郎",
  state: "問題発生。"
});
const memberInfoName = toRef(memberInfo, "name");  // (2)

 この(2)のコードで、memberInfoNameはRefオブジェクト、つまりリアクティブな変数となり、しかも、その変数の値(memberInfoName.value)を変更すると、(1)のmemberInfo.nameも連動します。逆も然りです。

 この仕組みは、PropsのひとつをRefに変更する際にもよく利用されます。例えば、外部のライブラリで用意されたコンポーザブル(関数)としてuseName()というのがあり、この引数がRefであるとします。そして、Propsとして受け取った値のひとつを、そのuseName()に渡す場合を考えます。この場合、リスト9のようなコードになります。

リスト9:PropsとtoRef()を組み合わせた例
const props = defineProps<Props>();
const propsName = toRef(props, "name");  // (1)
useName(propsName);

 ここで、useName(props.name)というコードは記述できません。というのは、Propsの各値はRefではないからです。そこで登場するのが、リスト9の(1)のコードです。

ゲッタに対応したtoRef()

 ただし、ここには問題があります。もし、Propsのnameがprops.nameのようにpropsオブジェクト直下の場合ならばよいのですが、もう1階層オブジェクトがネストされた状態でprops.memberInfo.nameのように、PropsのmemberInfoオブジェクトの中のnameプロパティである場合、リスト9(1)のコードは次のようになります。

const propsName = toRef(props.memberInfo, "name");

 この場合、PropsのmemberInfoがundefinedかどうかを判断できなくなり、場合によってはエラーとなります。そこで、このような場合にcomputed()を利用してリスト10のようなコードを記述していました。

リスト10:ゲッタコードとcomputed()の組合せ
const propsName = computed(
  (): string | undefined => {
    return props.memberInfo?.name;
  }
);

 このcomputed()内部関数の処理は、単に値をリターンするだけのコードです。そして、このように単に値をリターンするだけの処理を、「ゲッタ(Getter)」と呼んでいます。

 このゲッタに対してcomputed()を利用したコードは正しいのですが、computed()そのものがコンピュータリソースを必要とする処理であるためムダがあります。そこで今回新たに導入されたのが、toRef()でのゲッタ利用です。これは、リスト11のコードとなります。

リスト11:toRef()のゲッタコード
const propsName = toRef(
  (): string | undefined => {
    return props.memberInfo?.name;
  }
);

 単にcomputed()の代わりにtoRef()を利用しただけであり、この仕組みにより、ゲッタをRefとして扱えるようになりました。

Refを値に戻すtoValue()

 このゲッタに対するtoRef()のサポートと同時に導入されたのがtoValue()です。toValue()は、Refオブジェクト、すなわち、リアクティブ変数に対して適用させることで、リアクティブ変数ではない単なる値へと変更する関数です。例えば、リスト12のようなコードです。この場合、memberNameValueは単なる文字列の「田中太郎」になり、リアクティブ変数でなくなります。

リスト12:リアクティブ変数を単なる値へと変更するtoValue()
const memberName = ref("田中太郎");
const memberNameValue = toValue(memberName);

ゲッタを直接引数とできるtoValue()

 このようにリアクティブな変数をリアクティブでない変数へと変更したい際には、これまでは、unref()関数が利用されていました。ただし、unref()の場合は、リスト13のように、その引数にゲッタを渡すと動作がおかしいことになっていました。

リスト13:unref()にゲッタをわたしたコード
const memberNameValue = unref(
  (): string | undefined => {
    return props.memberInfo?.name;
  }
);

 そこで、ゲッタを引数として、その値を適切に取り出せるように新たに導入されたのがtoValue()です。toValue()の引数を、リスト14のようにゲッタにしても、memberNameValueは、無事、単なる文字列かundefinedになるようになっています。

リスト14:toValue()にゲッタをわたしたコード
const memberNameValue = toValue(
  (): string | undefined => {
    return props.memberInfo?.name;
  }
);

 例えば、props.memberInfo.nameが「田中太郎」ならば、memberNameValueも「田中太郎」になります。

まとめ

 Vue3.3の新機能を紹介する本稿の後編は、いかがでしたでしょうか。

 前編の最初に紹介したように、このVue3.3で導入された新機能のおかげで、これまでバグを誘発しかねないコーディングを、そのコーディング段階から型チェックによって未然に防げるようになったものが多々あります。

 簡単に言えば、より安心してコーディングできるようになるための新機能といえます。そのような内容が伝わったのでしたら嬉しい限りです。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ますます便利になるVue.jsの新機能を探ろう!連載記事一覧
この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 齊藤 新三(サイトウ シンゾウ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。Web系製作会社のシステム部門、SI会社を経てフリーランスとして独立。屋号はSarva(サルヴァ)。HAL大阪の非常勤講師を兼務。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18397 2023/10/05 11:14

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング