ポケポケもどきをTypeScriptで作る - (1) 環境構築・要件定義編

# 概要
みなさんはポケポケをやっていますか？
今回はポケポケブームに乗っかり、TypeScriptやデータベースの勉強がてら「簡易版ポケポケ」を作ってみたいと思います。
カードゲームってよく考えられてるなあと実感できるプロジェクトでした。一体どんな人がどうやって考えているんでしょうね？

# 技術スタック
- Next.js - フロントエンドおよびバックエンド（APIの開発）。
- MySQL - データベースとしてポケモン情報を管理。
- PokeAPI - ポケモン画像およびデータの外部API。
- TypeScript - 型安全性を提供するためのプログラミング言語。
- React - フロントエンドUIコンポーネントを構築。

# 環境構築
#### Step1 : 準備
- **Node.js**（推奨バージョン：LTS）
- **npm**または**yarn**（Node.jsに同梱されています）
- 任意のコードエディタ（例：Visual Studio Code）

#### Step2 : プロジェクトのセットアップ
Next.js
###### 1. 新しいプロジェクトの作成
```bash
yarn create next-app --example with-typescript poke-poke-mimic
cd poke-poke-mimic
```

###### 2. 依存パッケージのインストール
```bash
yarn add promise-mysql
yarn add axios
```
- promise-mysql：Node.jsで非同期にMySQLを扱う
- axios：API通信を簡単に行う

###### 3. 開発サーバーの起動
```bash
yarn dev
```
これでローカル開発サーバーが起動し、ブラウザで http://localhost:3000 にアクセスしてアプリを確認できます。

# 要件定義
ポケポケは超大規模なゲームなので、個人開発では到底太刀打ちできません(´;ω;｀)
ということで今回は、簡易版ポケポケを作りたいと思います。以下に簡易版ポケポケの要件定義を示します。
### 機能一覧
###### 1. ユーザー管理
- ユーザーの新規登録 （重複の無い名前とパスワード） および ログイン

###### 2. カード一覧表示
- ポケモンカードをリスト形式で表示
- 各カードの詳細情報を表示

###### 3. パックを引く
- ランダムで5枚のカードを獲得できる
- レア度に応じて出現確率が変わる

###### 4. デッキ作成
- 各カード1枚まで、6枚のカードを組み合わせてデッキを作成できる

###### 5. (発展) 対戦
- AIとのバトル機能
- オンライン対戦

### カード情報
:::note warn
簡易版ポケポケでは、進化 / にげる という概念が存在しません（笑）
:::

1枚のカードが持つ情報として、

- カード名 (name)
- HP (hp)
- 属性 (type)
- 技名 (attack)
    - 必要なエネルギー (attack_energy)
    - 与えるダメージ (attack_damage)
- レア度 (reality)

また、属性については、
- 炎 (fire)
- 水 (water)
- 草 (grass)

の3種類とし、レア度については、
- 神 (god) : 0.1%
- 高 (high) : 9.9%
- 中 (medium) : 40%
- 低 (low) : 50%

の4種類とする。

### バトル要件
3ポイント先に取った方の勝ち。
最初に3枚のカードが配られる。1ターンごとに1枚カードを山札から引き、ポケモンを出すことができる。バトルには1枚だけカードを出すことができる。（控えはない）
基本的には技のダメージ分を与え、HPが0になったら1ポイント取ることができる。
1ターンごとにエネルギーを付けることができ、技を出すにはエネルギーが必要である。
弱点の属性のポケモンからの技は **+20** 余計にダメージを受けてしまう。

### カード一覧
全部で12匹のポケモンカードを用意します。
### God レアリティ

| 名前      | 英語名     | HP  | 属性   | 技名               | 必要エネルギー | ダメージ |
|-----------|------------|-----|--------|--------------------|----------------|----------|
| ファイヤー | Moltres    | 200 | fire   | スカイアタック | 5              | 150      |
| サンダー   | Zapdos     | 200 | water  | サンダーボルト | 5              | 150      |
| フリーザー | Articuno   | 200 | grass  | ふぶき     | 5              | 150      |

### High レアリティ

| 名前      | 英語名      | HP  | 属性   | 技名               | 必要エネルギー | ダメージ |
|-----------|-------------|-----|--------|--------------------|----------------|----------|
| フシギバナ | Venusaur   | 160 | grass  | メガドレイン  | 3              | 70       |
| リザードン | Charizard  | 150 | fire   | フレアドライブ | 4              | 100      |
| カメックス | Blastoise  | 150 | water  | ハイドロポンプ | 3              | 80       |

### Medium レアリティ

| 名前      | 英語名      | HP  | 属性   | 技名               | 必要エネルギー | ダメージ |
|-----------|-------------|-----|--------|--------------------|----------------|----------|
| フシギソウ | Ivysaur    | 80  | grass  | つるのムチ    | 2              | 30       |
| リザード   | Charmeleon | 80  | fire   | かえんほうしゃ | 2              | 50       |
| カメール   | Wartortle  | 80  | water  | みずでっぽう  | 2              | 40       |

### Low レアリティ

| 名前      | 英語名      | HP  | 属性   | 技名               | 必要エネルギー | ダメージ |
|-----------|-------------|-----|--------|--------------------|----------------|----------|
| フシギダネ | Bulbasaur  | 60  | grass  | はっぱカッター | 1              | 20       |
| ヒトカゲ | Charmander | 50  | fire   | ひのこ       | 1              | 10       |
| ゼニガメ   | Squirtle   | 50  | water  | あわ      | 1              | 10       |

新しくポケモンを追加したい場合は、この表に新しくレコードを追加することになります。

# まとめ
今回は簡易版ポケポケの要件定義を作成しました。次回は、この要件に基づきデータベースの設計と実装を進めます。

https://qiita.com/cobieee/items/07db4ebb24e10e185cba

お楽しみに！