SHOEISHA iD

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

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

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

TypeScriptのサポートが強化されたVue3.3の新機能とは?──PropsとEmitsに関する新機能を解説【前編】

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

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

 Vue3、すなわち、Vue.jsのバージョン3がリリースされたのが3年前の2020年9月です。そのVue3が、Vueプロジェクトのデフォルトになったのが、2022年2月です。その時点でのVue本体のバージョンは3.2です。それから1年以上が経過した2023年5月11日に、Vue3.3がリリースされました。本稿では、前編と後編の2回にわたって、このVue3.3での新機能をまとめて紹介します。前編である今回は、PropsとEmitsに関する新機能を紹介します。

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

TypeScriptとの親和性を高めるアップデート

 Vue3.3によって導入された新機能を紹介する前に、このアップデートの趣旨をまず紹介しておこうと思います。

Vue3.3アップデートの趣旨

 Vue.jsの開発者であるEvan Youによると、3.3にアップデートを行うにあたって、その一番中心に据えたのが、TypeScriptによるコーディング環境をよりよいものにすること、だそうです。

 Vue.jsが、そのバージョン2から3に大幅アップデートする際、その内部コードを全てTypeScriptで書き換えました。これは、もちろん、Vueを利用したコーディングにおいてTypeScriptの利用を強要するものではありません。

 しかし、一方で、もし、TypeScriptでコーディングを行おうとするならば、よりスムーズに、より心地よくコーディングできる必要があるし、それを妨げるものがあるならば、それは、Vue.js開発者チームの責任である、とEvan Youは考えたそうです。

 そこで、まず、VS CodeのVue用プラグインである、Volarの機能強化を図りました。型チェックをより適切に行うように、事前にコーディングミスを指摘できるように、と改造を行ってきたそうです。

 それでも不十分な部分が多々あり、それを改善するためには、Vue.js本体を、よりTypeScriptとの親和性を高めるようにアップデートする必要があります。これが、Vue3.3のアップデートの一番中心に据えられた課題です。

Vue3.3アップデートの内容

 このような趣旨で行われた3.3へのアップデートのため、その内容は、主にTypeScriptの型にまつわるものがほとんどといえます。具体的には、以下が新機能リストです。

  1. Props型定義とEmits型定義のインポート
  2. 新しいEmits定義
  3. defineModel()[実験的段階]
  4. Propsのデフォルト値[実験的段階]
  5. ジェネリクスコンポーネント
  6. defineSlots()
  7. defineOptions()
  8. toValue()

 前編である今回は、このうち、1〜4を、次節以降、順に紹介していきます。5以降については、後編で紹介します。

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

次のページ
PropsとEmitsに関する新機能

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

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

もっと読む

この記事の著者

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

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

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

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、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編 」他、著書多数

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング