Vue 3デフォルト時代の新常識
新しいCLIツールで生成したVue 3プロジェクトを利用して、Vue 3デフォルト時代のさまざまな変化点を説明していきます。
Options APIからComposition APIへ
本連載でこれまで説明した*.vueファイルの記述法は「Options API」と呼ばれます。説明のため、前回記事でも説明した図5のサンプルを再掲します。
このサンプルの<script>部は、リスト2の通りです。
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({ // コンポーネント処理内容の記述
// データ ...（1）
data() {
return {
no: 1,
company: 'Apple',
name: 'iPhone 13',
url:'https://www.apple.com/' as string, // 明示的にstringを指定
weight: 173 as number // 明示的にnumberを指定
}
},
// 算出プロパティ ...（2）
computed: {
fullName(): string {
return `${this.name} (${this.company})`
},
},
// メソッド ...（3）
methods: {
getWeightText(weight: number): string {
// weightはnumber型なのでtoFixedメソッドが利用できる
return `重量：${weight.toFixed(1)} g`
}
}
})
</script>
（1）は画面に表示するデータ、（2）はデータを加工して出力する読み取り専用の算出プロパティ、（3）は引数を伴うメソッドの実装です。これらを「data」「computed」「methods」の各JavaScriptオブジェクト要素に分けて記述するのが、Options APIの特徴といえます。
一方、リスト2と同じ処理をComposition APIで記述すると、リスト3の通りになります。
<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({ // コンポーネント処理内容の記述
setup() { // コンポーネントを定義するメソッド ...（1）
// データ ...（2）
const no = ref(1)
const company = ref('Apple')
const name = ref('iPhone 13')
const url = ref<string>('https://www.apple.com/') // 明示的にstringを指定
const weight = ref<number>(173) // 明示的にnumberを指定
// 算出プロパティ ...（3）
const fullName = computed(():string => {
return `${name.value} (${company.value})`
})
// メソッド ...（4）
const getWeightText = (weight: number):string => {
// weightはnumber型なのでtoFixedメソッドが利用できる
return `重量：${weight.toFixed(1)} g`
}
// データ・算出プロパティ・メソッドを返却 ...（5）
return {
no, company, name, url, weight, fullName, getWeightText
}
}
})
</script>
Composition APIでは、コンポーネントの定義は（1）のsetupメソッドで行います。データ（2）は、初期値を与えたrefメソッドで定義することで、双方向データバインディングが実現されます。「ref<string>」や「ref<number>」と記述することで、TypeScriptの型を明示的に指定することもできます。
算出プロパティ（3）は、処理内容のメソッドをcomputedメソッドの引数に与えて定義し、メソッド（4）も変数として定義します。なお、算出プロパティやメソッド内でデータを参照する場合、データ変数のvalueプロパティを利用します。最後に、ここまで定義したデータ・算出プロパティ・メソッドを、setupメソッドの戻り値として返却します（5）。この一連の記述により、Composition APIを利用したリスト3は、Options APIを利用したリスト2と同じ意味となります。
さらに、Vue 3.2からは、Composition APIの記述をシンプルにする<script setup>が利用できるようになりました。これを利用すると、リスト3の記述はリスト4の通り単純化されます。Composition APIのsetupメソッド内容（return文以外）を<script setup>タグの内側に記述するだけで、同じ動作を実現できます。
<script setup lang="ts">
import { ref, computed } from 'vue'
// データ
const no = ref(1)
const company = ref('Apple')
const name = ref('iPhone 13')
const url = ref<string>('https://www.apple.com/') // 明示的にstringを指定
const weight = ref<number>(173) // 明示的にnumberを指定
// 算出プロパティ
const fullName = computed(():string => {
return `${name.value} (${company.value})`
})
// メソッド
const getWeightText = (weight: number):string => {
// weightはnumber型なのでtoFixedメソッドが利用できる
return `重量：${weight.toFixed(1)} g`
}
</script>
［補足］<script setup>にも対応したVolar拡張機能
Volarは、Vue 3に対応したVisual Studio Codeの拡張機能です。拡張機能メニューからインストールできます（図6）
Volar以前に有名なVue向け拡張機能としてVeturがありましたが、Veturは前述の<script setup>を正しく解釈せず、宣言した変数が未使用であるという誤った警告を表示します。
一方VolarはVue 3に最適化されており、<script setup>内で宣言した変数が<template>部で参照されていることを正しく解釈します。
前述の通り、Volarは公式で利用が推奨されており、今後Vue.js開発を行うには定番となる拡張機能です。
そのほかの変更点
Vue 3がVue.jsのデフォルトになったため、前述のWebページURLをはじめとして、Vue.jsの各所に細かい変更があります。以下では主な注意点を説明します。詳細はブログ記事も参照してください。
npmパッケージやCDN利用時のバージョン指定
これまでnpmで「vue」や「vue-*」というパッケージを「latest」（最新バージョン）を指定してダウンロードするとVue 2がダウンロードされましたが、これからはVue 3がダウンロードされます。Vue 2を使い続けるには、明示的にバージョン番号を指定する必要があります（リスト5）。なお、Vue CLIやcreate-vueツールで生成したプロジェクトでは、明示的にVue.jsのバージョンが指定されるので、この変更は必要ありません。
// 今まではこの記述でVue 2を参照していたが、これからはVue 3を参照する
"dependencies": {
"vue": "latest",
},
// Vue 2を参照する場合、明示的にバージョンを指定する
"dependencies": {
"vue": "^2.6.14",
},
同様に、CDNが提供するVue.jsのファイルを参照する場合、Vue 2を利用する場合は明示的に「@2」とバージョンを付与する必要があります（リスト6）。
<!--今まではこの記述でVue 2を参照していたが、これからはVue 3を参照する --> <script src="https://unpkg.com/vue"></script> <!-- Vue 2を参照する場合、「@2」を付与する --> <script src="https://unpkg.com/vue@2"></script>
GitHubリポジトリのパス変更
今まで「vuejs/vue-next」のように「-next」が付与されていたVue 3関連のリポジトリは、表2の通りパスが変更されます。変更前のパスでGitHubにアクセスすると、変更後のパスにリダイレクトされます。
| No. | 変更前のパス | 変更後のパス |
|---|---|---|
| 1 | vuejs/vue-next | vuejs/core |
| 2 | vuejs/vue-router-next | vuejs/router |
| 3 | vuejs/docs-next | vuejs/docs |
| 4 | vuejs/vue-test-utils-next | vuejs/test-utils |
| 5 | vuejs/jsx-next | vuejs/babel-plugin-jsx |
まとめ
本記事では、Vue 3がVue.jsのデフォルトになったことによる、Vue.js開発手順や技術の変化を説明しました。新しいCLIツールやVolar拡張機能、Composition APIなどにより、シンプルかつ高速にVue.js開発を行えるようになり、開発者はロジックの実装により集中できるようになりました。本連載でも次回以降、新しい手順を利用してVue.jsの実装法を説明していきます。
次回は今回も簡単に取り上げたコンポーネントの記述・利用法を、より突っ込んで説明していきます。
