昨年末である 2023/12/28 に、 Vue の Ver.3.4 が Releaseとなった。
The Vue Point “Announcing Vue 3.4”
https://blog.vuejs.org/posts/vue-3-4
Template Parser の全面書き換えによる 44% の SFC コンパイル速度向上や、状態監視の改良により、computed、 effect、 watch、 watchEffect 各関数の呼び出しの実行が、実値更新時のみになるといったパフォーマンス上の改善もさることながら、コーディング上のうれしい改善も 2 つ含まれていた。
defineModel マクロの stable 格上げと、v-bind の shorthand 追加だ。いずれも欲しかった Syntax である。簡単なコンポーネントでどの程度差が出るかを比較する。
Vue 3.3 までのテキスト入力コンポーネント
<script setup lang="ts">
import { type HTMLAttributes } from "vue"
const props = withDefaults(defineProps<{
modelValue?: string
placeholder?: string
disabled?: boolean
inputmode?: HTMLAttributes["inputmode"]
}>(), {
modelValue: "",
placeholder: "入力してください。",
inputmode: "text",
})
const emit = defineEmits<{
(e: "update:modelValue", value: string): void
}>()
</script>
<template>
<input
type="text"
v-model="modelValue"
:placeholder="placeholder"
:disabled="disabled"
:class="{ disabled: disabled }"
:inputmode="inputmode"
autocomplete="off"
/>
</template>Vue 3.4 の defineModel と shorthand を使用したテキスト入力コンポーネント
<script setup lang="ts">
import { type HTMLAttributes } from "vue"
const text = defineModel({ default: "" })
const props = withDefaults(defineProps<{
placeholder?: string
disabled?: boolean
inputmode?: HTMLAttributes["inputmode"]
}>(), {
placeholder: "入力してください。",
inputmode: "text",
})
</script>
<template>
<input
type="text"
v-model="text"
:placeholder
:disabled
:class="{ disabled: disabled }"
:inputmode
autocomplete="off"
/>
</template>可読性の改善は著しい。
現在、私が開発を進めているプロジェクトは昨年の 9 月から始めたものだから、 defineModel はまだ実験段階だった。忸怩たる思いで modelValue の defineEmits を書いていたのだが、どこかのタイミングですべて defineModel に修正したい。
さて、新機能の動作確認当たり Vue Ver 3.4 の初期プロジェクトを Scaffolding tool で生成しようとした際、見慣れない文字列を見つけた。
実験段階の DevTools なるもののインストール確認項目が追加さたようだ。これは非常に興味深い。試しにこれも追加して、開発サーバーを立ち上げたら以下のような画面が表示された。
一見いつもの初期プロジェクトだが、中央下に小さなアイコンがある。これが追加された DevTools らしい。Vue アイコンをクリックすると以下の画面が出てきた。
新しい DevTools はブラウザの拡張機能ではなく、開発中プロジェクトのページ上に表示されるらしい。なるほどと思い次の項目を選択して驚愕した。
現在ブラウザで表示している Path の画面内に存在するコンポーネント一覧がツリーで表示されるのだ。ご丁寧なことに、それが画面上のどの DOM で そのコンポーネントの props には何が設定されているのかまで分かる。
Toggle Component Inspector を有効にすると、Hover 中の DOM が何のコンポーネントで、どのファイルの何行目のコードで生成されているか分かる。
これまで表示している画面上の UI が、何のコンポーネントで、それはどのファイルでどこにあり、どの様に呼び出されているかは、ソースコードを読まなければ分からなかった。コンポーネントの構造にルールを設け、より直感的に UI 部品の構成を理解できるように考え出されたのが Atomic Design だ。
私がテックリードを務めるプロジェクトでは、コンポーネントのルート要素のクラス名に命名規則を設けることで、コンポーネントが簡単に特定できる工夫をしていた。これは必要なくなる。
これは小さからぬ事件ではないだろうか。フロントエンド開発のベストプラクティスを前進させている。
担当になりたての既存プロジェクトで改修対象のファイル特定のため、レンダリング後の HTML の中からキーワードを拾って Grep 、ファイルを特定するなどという非効率な作業は消滅する。Storybook では Page Component まで定義する必要がなくなるかもしれない。
このツールには他に、有効な画面の Path 一覧、プロジェクト内の画像ファイル一覧、Pinia の 状態表示、コンポーネント間の依存関係グラフ表示などの機能があった。Vite にしても、この DevTools にしても、Vue Framework の開発力と発展速度には恐れ入るばかりだ。
これほどのものなら、現在開発中のプロジェクトで試したくなる。たった 3 行の追加と Package インストールで使用可能になる。
{
// 省略
"devDependencies": {
// 省略
"vite-plugin-vue-devtools": "^7.0.25", // 追加
// 省略
}import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools' // 追加
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VueDevTools(), // 追加
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})DevTools の公式によると Vue3 であればどのバージョンでも対応するそうである。Ver 3.3.10 で開発をスタートした私のプロジェクトではすんなり動いた。UI の Hover で、コンポーネントごとにファイル名が表示された時は感動があった。残念ながらその様子をここでお見せすることは出来ないが、コンポーネントグラフであれば問題ないので残しておこう。
不必要な関数やコンポーネントの発見、削除に役立ちそうだ。
