🔲
Vue 3 でマルチプレイブラウザゲームを作る 補足編
補足
本編では書き切れなかったことを残しておきます。
Composition API
概要編で書きましたが、Vue には Options API と Composition API の 2 種類の API があり、本稿は Options API を使用しています。
2 種類の API は書き方がかなり異なっていて、たとえばホストのラウンジ画面のリアクティブ変数部分は Options API では以下でした。
Options API
<script>
export default {
data() {
return {
// 招待 URL
invitationUrl: null,
// プレイ開始ボタン無効化
isPlayButtonDisabled: true,
};
},
}
</script>
これを Composition API で書くと
Composition API
<script setup>
// 招待 URL
const invitationUrl = ref(null);
// プレイ開始ボタン無効化
const isPlayButtonDisabled = ref(true);
</script>
のようになります。
好みはあると思いますが、個人的には普通の JavaScript っぽい Composition API の書き方のほうが好きです。
残念ながら Composition API 版は play.vue で v-for をうまく使うことができず断念しました。改善方法をご存じの方はご教示いただけると幸いです。
また、Composition API には継承がありません。代わりに合成がありますが、継承は欲しかったかなという気がします。
参考リンク
本編で参照した資料も含めた参考リンクです。
Discussion