🔲

Vue 3 でマルチプレイブラウザゲームを作る 補足編

2025/01/19に公開

補足

本編では書き切れなかったことを残しておきます。

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