VueJS3のCompositionAPIが楽しいの話
こちらはアンテクアドベントカレンダー2021の記事です
https://adventar.org/calendars/6534
さてさて、木曜日になりましたね、いかがお過ごしでしたか？
Vue.jsの話の基本的なところは大川峻くんがたくさん書いてくれてて、楽しそうだなーと思いつつ、今回はちょっとVue慣れた人向けの話になります。
というわけで始めていきましょう、CompositionAPIの話です。
ヒアウィーゴー！
CompositionAPIとはなんぞや
VueJS3から搭載された新機能です。一言でいうとVueJSの全く新しい書き方ですね。具体的に言えば script あたりの書き方がガラッと変わってしまったわけです。
https://v3.ja.vuejs.org/guide/composition-api-introduction.html
VueJS2の頃までは.vueファイルはこんな書き方してたと思うんですよ。
<template>
<div>
{{ hoge }}
{{ fuga }}
<button @click="clickHogeFuga">{{ hogefuga }}</button>
</div>
</template>
<script>
export default {
props: {
hoge: {
type: String,
required: false
}
},
data() {
return {
fuga: 'fuga'
}
},
computed: {
hogefuga() {
return this.hoge + this.fuga;
}
},
methods: {
clickHogeFuga() {
window.alert(this.hogefuga);
}
},
}
</script>この書き方、OptionsAPIなどとも言いまして、特徴としては「リアクティブデータとか、算出プロパティとか、メソッドがブロック分けされて書かれてて見やすい」ってのがあると思います。いわばVueJSの最も個性的な部分とも言えましょう。
ただこれ、慣れないとよくわからん上に、メソッドの中身のビジネスロジックを外のファイルに出しづらかったり、なかなか面倒が多かったものです。
また、コンポーネント間の状態管理のためにvue-observalがイマイチコード補完が効きづらいので泣く泣く大した規模でもないのにVuexを入れざるを得なかった諸兄も多かったと思います。
VueJS3でもこの書き方はできるのですが、せっかく良い機能があるのに使わない手はありません。
CompositionAPIを使って書き換えたらこんな感じになります。
<template>
<div>
{{ hoge }}
{{ fuga }}
<button @click="clickHogeFuga">{{ hogefuga }}</button>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
props: {
hoge: {
type: String,
required: false
}
},
setup(props) {
const fuga = ref('fuga');
const hogefuga = computed(() => {
return props.hoge + fuga.value;
});
const clickHogeFuga = () => {
window.alert(hogefuga.value);
};
return {
fuga,
hogefuga,
clickHogeFuga
};
},
}
</script>おわかりいただけたでしょうか。
簡単に言えばprops以外は全部setupにひとまとめにされています。
何が違うのかは次から細かく見ていきましょう。
何が違うの？
上のソースの data computed methods は全部 setup に押し込められているわけですが、ちょっと違う形で書かれているのがわかるでしょうか？
まず、各々のプロパティが setup の中でコレといった区別もなく変数になっています。
そして、変数になるときにそれぞれ data や computed と同じ働き方をさせるために見慣れないメソッドの戻り値が格納されてるのがわかると思います。
たとえば、上のソースの data のところに書かれていた fuga は ref() という関数の戻り値になっています。これは、参照可能なリアクティブなオプションとして格納されているということです。
算出プロパティには computed() という関数の戻り値になっています。ここで注意したいのは上のソースでthisで参照していたものがthisつけずに参照できるようになっているところです。propsは特別なので、setupの引数から参照します。更に注意したい点として、さっき ref() した fuga の実際の値は .value で参照されているところです。
メソッドは普通に無名関数が格納されているだけですね。まあ、いつもどおりです。
そして最後に分割代入の形で return されています。これは return されたものだけが template の中で使えるようになるためです。
まとめ
というわけで CompositionAPI の触りをさらっとやっていきました。
コレをすると処理の共通化だったり、状態の横断的な参照だったりがかなり簡単にかけるようになるのがおわかりいただけるかと思います。
まあ、なんていうか、実装の自由度が増します。（自由であるがゆえに秩序持って書かないとすぐとっちらかりますが）
VueJS3ではこんな感じにかけるようになりますよー、という紹介でした。
