はじめに

現役鍼灸師がフロントエンドエンジニアを目指して実装したじゃんけんゲームを過去の自分に向けて残すことにした。
JavaScriptの基礎学習をし、ステップアップを兼ねてVueを学習しようと決意。
何かアプリを作る方が楽しく学べると思い、簡易的なじゃんけんゲームを作ることにした。

参考書籍

Vue3 フロントエンド開発の教科書

こちらの書籍を参考にしながら環境構築から実装まで進めていく。
初学者の自分にとっても非常に丁寧でわかりやすい内容だった。
開発にあたって必要な箇所をつまみ読みした為、後日改めて腰を据えて学びたい。

必要なツール

Visual Studio Code

Vueプログラミングをするにあたって、テキストエディタとしてVisual Studio Codeの利用が推奨されている。

Visual Studio Codeの拡張機能

VolarとTypeScript Vue Pluginをインストール。
VolarはVueの記法に合わせてエラー表示を行う。
TypeScript Vue Pluginは構文のチェックに対応。

Node.js

Vueプロジェクトの作成や実行環境として利用。

Vueプロジェクトの作成方法

例として「vue_janken」プロジェクトを作成。
vue_jankenプロジェクトを格納する親フォルダ上で、下記コマンドを実行。

npm init vue@latest

コマンドを実行した際に、

Need to install the following packages:
    create-vue@latest
OK to proceed? (y)

上記のようなメッセージが出る場合は、Vueプロジェクトを作成するパッケージそのものがインストールされていない為、「y」を入力して次へ進む。

次に、9つの質問が順番に表示される。
下記の通り順に入力していく。

質問	回答
Project name:	「vue_janken」を入力
Add TypeScript?	Yes
Add JSX Support?	No
Add VueRouter for Single Page Application development?	No
Add Pinia for state management?	No
Add Vitest for Unit Testing?	No
Add Cypress for both Unit and End-to-End testing?	No
Add ESLint for code quality?	Yes
Add Prettier for code formatting?	Yes

質問の意味については今回は割愛。

Vueプロジェクトへの依存ライブラリの追加コマンド

このままでは動作しない為、パッケージをインストール必要がある。
vue_jankenフォルダ上で下記のコマンドを実行。

npm install

次に下記コマンドを実行。

npm run dev

ターミナル上に表示されたURLにブラウザからアクセス。
以下のような画面が表示されれば無事成功。

ゲームの概要

じゃんけんの手を選択すると、相手もランダムで手を選択。
勝ち、負け、あいこの判定を行い、結果を表示する。

完成図

動作確認はこちら

App.vue

App.vue

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'Game',
  setup() {
    //　勝敗の結果を表す変数を定義。初期値は空文字
    const result = ref('');
    //　コンピュータの手を表す変数を定義
    const computer = ref('');
    // コンピュータの手をランダムに決める
    function play(player: string) {
      const hands = ['グー', 'チョキ', 'パー'];
      computer.value = hands[Math.floor(Math.random() * hands.length)];
      // じゃんけんの勝敗を判定するロジック
      if (player === computer.value) {
        result.value = '引き分け';
      } else if (
        (player === 'グー' && computer.value === 'チョキ') ||
        (player === 'チョキ' && computer.value === 'パー') ||
        (player === 'パー' && computer.value === 'グー')
      ) {
        result.value = '勝ち';
      } else {
        result.value = '負け';
      }
    }
    return {
      result,
      computer,
      play,
    };
  },
});
</script>

<template>
  <div>
    <h1>じゃんけんゲーム</h1>
    <p class="text">相手： {{ computer }}</p>
    <p class="text">結果： {{ result }}</p>
    <div class="btn">
      <button @click="play('グー')">グー</button>
      <button @click="play('チョキ')">チョキ</button>
      <button @click="play('パー')">パー</button>
    </div>
  </div>
</template>

<style>
  h1, .text, .btn {
    text-align: center;
  }
  button {
    margin-right: 10px;
  }
  button:hover {
    cursor: pointer;
  }
</style>

おわりに

Vue,TypeScriptを触った経験がないまま勢いで開発を始めてみたけど、ググり続けて何とか形にできたのはいい学びになった。
技術書を読むだけだと退屈で寝落ちしてしまうが、手を動かしながらだと楽しく学べる。
改めて手を動かすことの大切さを実感。
始めて触る技術だらけで不安があったものの、知的好奇心の方が上回り直面する数々のエラーも苦にならず最後までこれた。
今後はSPAの開発に挑戦してVueの理解を深めていきたい。
新しい分野を学ぶのは本当に楽しい。。