目次

• はじめに
• 今回作成したアプリ
• 作成したポーカーゲームの仕様
• 使用した技術
• VueCLIの導入
• CompositionAPIを用いて計算プログラムを作成
• さいごに

はじめに

Vue3とCompositionAPIを使用して勉強がてらに何かアプリを作成したいと思い、web上で出来るポーカーを作ってみました。
前半では環境構築とVue3+CompositionAPIを使用して簡単な計算プログラムを作っていきます。
後半では作成したアプリの詳細な説明をしていきます。

今回作成したアプリ

https://www.tribeck.jp/column/opinion/production/poker/

作成したポーカーゲームの仕様

・手札は５枚で交換は1回のみ可能
・全5ゲームを行い、総合得点をカウントする。
・ジョーカーは2枚入り
・基本的な役は通常のポーカーと同じ(ファイブカードが存在)

使用した技術

・node.js(version:18.4.0)
・VueCLI(version:5.0.8)
・Vue(version:3.2.37)
・TypeScript

VueCLIの導入

VueCLIが導入されていなければ下記のコマンドで導入

> yarn global add @vue/cli

導入が完了したら、下記のコマンドにてプロジェクトを作成

> vue create プロジェクト名

Manually select featuresを選択
Vue3+TypeScript+Vuex+SCSSを使用するために、今回は下記のように設定。
それ以降は下記のように設定
以上で、環境構築は終わりとなります。
作成したプロジェクトのルートディレクトリに移動し、作成したプロジェクトを起動してみましょう。

> yarn serve

下記のような画面が表示されたら成功です。

CompositionAPIを用いて計算プログラムを作成

CompositionAPIのref,reactiveを使用したサンプルプログラムです。
App.vueを下記のように書き換えます。

<template>
  <div class="counter">
    <p>りんご１個:{{ appleObj.price }}円</p>
    <label>
      購入したい{{ appleObj.name }}の数:
      <input v-model="inputNum" type="text" />
    </label>
    <p>りんご{{ inputNum }}つの合計金額は{{ calcSum }}円です。</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, reactive } from "vue";

export default defineComponent({
  name: "App",
  components: {},
  setup() {
    const inputNum = ref(0);
    const appleObj = reactive({
      name: "リンゴ",
      price: 100,
    });

    // computed
    const calcSum = computed(() => {
      return appleObj.price * inputNum.value;
    });

    return {
      inputNum,
      appleObj,
      calcSum,
    };
  },
});
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

従来ではdata,computed,methodのオプションは分けて書いていましたが、CompositionAPIではsetupオプションにまとめて書いていきます。
reactiveはオブジェクトに対して、refはプリミティブな値(number, string, booleanなど)に対してリアクティブデータとして定義させます。

上記のサンプルプログラム

https://www.tribeck.jp/column/opinion/production/calcSample/

さいごに

今回のコラムはここまでとなります。
次回のコラムでは作成したソースコードの説明を工夫したポイントなどを交えながら説明できればと思います。
次回のコラムはこちら

ポーカーの画像はこちらからお借りしました。
https://chicodeza.com/freeitems/torannpu-illust.html