概要

このシリーズは TypeScript の勉強がてらに、簡易版ポケポケをWebアプリとして実装することを試みるものです。前回 (環境構築・要件定義編)は、環境構築とカードやバトルの要件定義を行いました。今回は要件定義をもとに、ユーザーやカードのデータベース設計および実装をMySQLで行いたいと思います。

環境

mysql Ver 8.0.40-0ubuntu0.22.04.1 for Linux on x86_64 ((Ubuntu))

手順

1. MySQLをインストールします。

npm install mysql
npm install mysql @types/mysql

2. MySQLにログインする。

以下のコマンドを使用して、MySQLにログインしましょう。

mysql -u root -p

パスワードを求められるので入力すると、ログインすることができます。

3. データベースを作成する。

poke_poke_mimicという名前のデータベースを作成してみます。
SQLの基本的な使い方については、以下の記事を参考にしてみてください。

MySQLにログインしたあとの画面で、以下のコマンドを実行し、データベースを作成しましょう。

CREATE DATABASE poke_poke_mimic;
USE poke_poke_mimic;

4. テーブルを作成する。

新しく作成したデータベースに今回使用するユーザーのためのUsersテーブルと、カードのためのCardsテーブルを作成してみましょう。
プロジェクトの中に新たに、dbフォルダを作成し、その中にinit.sqlというSQLスクリプトを作成します。

init.sql

-- Usersテーブル
CREATE TABLE Users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  username VARCHAR(255) UNIQUE NOT NULL,
  password VARCHAR(255) NOT NULL,
  email VARCHAR(255),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Cardsテーブル
CREATE TABLE Cards (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  hp INT NOT NULL,
  type ENUM('fire', 'water', 'grass') NOT NULL,
  attack VARCHAR(255) NOT NULL,
  attack_energy INT NOT NULL,
  attack_damage INT NOT NULL,
  reality ENUM('god', 'high', 'medium', 'low') NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

これを実行し、poke_poke_mimicにテーブルを作成します。
以下のコマンドをMySQL上で実行しましょう。

SOURCE <db/init.sqlまでのパス>

これにより、以下のようなテーブルを作成することができました。

5. カードの登録を行う。

作成したCardsテーブルに、簡易版ポケポケのカード情報を登録していきます。まず、SQLクエリを使用してカードを1枚ずつ登録する方法を紹介します。その後、一括で複数のカードを登録する方法についても説明します。

単一のカードを登録

以下の例は、「リザードン」のカードを登録するSQLクエリです。

INSERT INTO Cards (name, hp, type, attack, attack_energy, attack_damage, reality) 
VALUES ('リザードン', 150, 'fire', 'かえんほうしゃ', 4, 100, 'god');

複数のカードを一括登録

大量のカードを一括で登録したい場合は、以下の形式でSQLを記述することができます。

addCards.sql

INSERT INTO Cards (name, english_name, hp, type, attack, attack_energy, attack_damage, reality) VALUES
('フシギダネ', 'Bulbasaur', 60, 'grass', 'はっぱカッター', 1, 20, 'low'),
('フシギソウ', 'Ivysaur', 80, 'grass', 'つるのムチ', 2, 30, 'medium'),
('フシギバナ', 'Venusaur', 160, 'grass', 'メガドレイン', 3, 70, 'high'),
('ヒトカゲ', 'Charmander', 50, 'fire', 'ひのこ', 1, 10, 'low'),
('リザード', 'Charmeleon', 80, 'fire', 'かえんほうしゃ', 2, 50, 'medium'),
('リザードン', 'Charizard', 150, 'fire', 'フレアドライブ', 4, 100, 'high'),
('ゼニガメ', 'Squirtle', 50, 'water', 'あわ', 1, 10, 'low'),
('カメール', 'Wartortle', 80, 'water', 'みずでっぽう', 2, 40, 'medium'),
('カメックス', 'Blastoise', 150, 'water', 'ハイドロポンプ', 3, 80, 'high'),
('ファイヤー', 'Moltres', 200, 'fire', 'スカイアタック', 5, 150, 'god'),
('サンダー', 'Zapdos', 200, 'water', 'サンダーボルト', 5, 150, 'god'),
('フリーザー', 'Articuno', 200, 'grass', 'ふぶき', 5, 150, 'god');

mysql> source <addCards.sqlまでのパス>

このクエリをMySQLで実行することで、カード情報がすべてデータベースに登録されます。
もっと種類を付け足したくなったら、新しくレコードを追加すると良いでしょう。

登録後の確認

カードが正しく登録されているかを確認するには、以下のSQLクエリを実行してみてください。

SELECT * FROM Cards;

登録されたカードの情報が以下のように表示されれば成功です。

まとめ

ここまでで、Cardsテーブルにカード情報を登録し、データベースにポケポケの基礎データを用意することができました。次回は、これらのデータをTypeScriptを使ったバックエンドアプリケーションと連携し、Webアプリケーションから操作できるようにしていきます。

お楽しみに！