SHOEISHA iD

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

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

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

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

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


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

defineSlots()とdefineOptions()

 ここからは、新機能リストで紹介していない6と7について、まとめて紹介します。

Slot Propsの型定義ができるdefineSlots()

 まず、新機能リスト6のdefineSlots()です。これは、スコープ付きSlotにおいて、Slot Propsの構成要素を定義できる仕組みです。例えば、リスト4のようなコンポーネントがあったとします。

リスト4:スコープ付きSlotを利用したコンポーネントの例
<script setup lang="ts">
  :
const memberInfo = reactive({  // (1)
	name: "田中太郎",
	state: "問題発生。"
});
const problemsInit: string[] = ["電話が通じません。", "留守です。"];  // (2)
const problems = ref(problemsInit);
</script>

<template>
  <section>
    <slot v-bind:memberName="memberInfo.name" v-bind:memberState="memberInfo.state">  // (3)
      <p>問題ありません</p>
    </slot>
    <slot name="detail" v-bind:memberProblems="problems">  // (4)
      <p>特にありません。</p>
    </slot>
  </section>
</template>

 リスト4の(3)のデフォルトSlotのSlot Propsは、memberNameとmemberStateであり、その値は(1)からもわかるように文字列です。一方、(4)のdetail SlotのSlot PropsはmemberProblemsのみであり、その値は(2)からわかるように文字列配列です。

 このようなスコープ付きSlotを定義する際、そのSlots Propsとして、どのような名称のどのようなデータ型が必要なのかを、これまで定義する方法がありませんでした。これを実現したのがdefineSlots()マクロです。リスト4のスクリプトブロックに、リスト5のようなコードを追記することで、Slot Propsが定義できます。

リスト5:defineSlots()によるSlots Propsの定義
type SlotsProps = {
  default?: (props: {memberName: string, memberState: string}) => any;
  detail?: (props: {memberProblems: string[]}) => any;
};
defineSlots<SlotsProps>();

 defineSlots()マクロのジェネリクスの型定義として記述するコードを構文としてまとめると、次のようになります。

構文:defineSlots()の型定義
type SlotsProps = {
  Slot名?: (props: {Slot Prop名: データ型, …}) => any;
  :
};
defineSlots<SlotsProps>();

 この定義により、もし定義以外のSlot Propsを記述すると、図3のようなエラー表示となります。

図3: 定義以外のSlot Propsを記述した際のエラー表示
図3: 定義以外のSlot Propsを記述した際のエラー表示

オプション設定ができるdefineOptions()

 次に紹介するのは、新機能リスト7のdefineOptions()です。Vue.js本体のinheritAttrs属性を始めとして、外部モジュールなどが指定する属性によっては、Options API方式でなければ設定できないもの、つまり、script setupタグ内では設定できないものがあります。これらの設定が必要な場合は、これまでは、リスト6のように、scriptタグとscript setupタグの両方を記述する必要がありました。

リスト6:scriptタグとscript setupタグの両方を記述する必要がある場合のコード
<script>
export default {
  inheritAttrs: false
}
</script>
<script setup>
import {ref} from "vue";
  :
</script>

 このOptions APIでなければ設定できないオプションをscript setupタグ内で記述できるようにしたのが、defineOptions()マクロです。このdefineOptions()を利用すると、リスト6のコードは、リスト7のようなコードで済むようになります。

リスト7:defineOptions()でオプションを設定したコード
<script setup>
import {ref} from "vue";

defineOptions({
  inheritAttrs: false
});

  :
</script>

次のページ
ゲッタに対応したtoRef()とtoValue()

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング