Reactでゲームもどきを作成してみている！？①

近頃、ウチの小さな庭がジャングルになりつつあります。

今回は、ノーコードでプログラムを作ってみよう。
プログラムって。。。コードやん（笑）

あっ、すみません。
趣旨としては、何も考えずに、ChatGPT先生にお願いして、どこまで作成できるかの物語です。
コードに対する考えは一切捨て、質問・回答だけで作成していきます。
（ここの修正が必要とか分っていても手を出しません。）

これは私のプロンプト力が試されるものと考えています。
できるかどうかはわかりません。（挫折するかもしれません）
でも、できるだけ頑張ります。

---

まずはReactをインストール

まずはreactをインストールしないと始まらないので、
以下のコマンドで環境を作成しましょうか。

npx create-react-app test --template typescript

---

ざっくばらんに

環境が整ったので、まずはざっくばらんに先生に質問を投げかけてみました。

reactを使用して麻雀ゲームを作成しようとしています。
typescriptを使用してコードを生成してください。

あまりにもざっくばらんすぎて笑えます。
そんな先生の回答がこちら

ChatGPT先生

以下はReactとTypeScriptを使用して麻雀ゲームを作成するための基本的なコードです。

まず、必要な依存関係をインストールします。

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom

次に、srcディレクトリを作成し、App.tsxというファイルを作成します。

import React from 'react';

const App: React.FC = () => {
  return (
    <div>
      <h1>麻雀ゲーム</h1>
      {/* ここにゲームコンポーネントを追加する */}
    </div>
  );
};

export default App;

次に、index.tsxファイルを作成します。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

この基本的なセットアップが完了したら、さまざまなコンポーネントを作成してゲームを構築することができます。たとえば、HandコンポーネントやTileコンポーネントなどが必要になるでしょう。

ただし、麻雀ゲームは非常に複雑なものであり、ルールやゲームプレイの詳細に基づいて多くのコードが必要になる可能性があります。この基本的なスケルトンコードはあくまで出発点であり、実際のゲームプレイには多くの追加のロジックやコンポーネントが必要になるかもしれません。

このコードをもとにして、麻雀ゲームを作成していくことができます。必要に応じて追加のコンポーネントやロジックを実装して、麻雀ゲームを完成させてください。

先生の回答から、install部分はもう完了しているので無視（ゴメンナサイ）
「app.tsx」、「index.tsx」をそれぞれコピーして、既存のファイルに上書きしてやった！
できた画面が

画面

おお～～っ！
もうなんかできたんじゃねーって感じですね。（画面表示されただけやけど）

---

ちょっとさみしいので

麻雀にはメンバーが必須です。
さすがにこれだけではさみしいので、ちょっとメンバーくらいは欲しいところですよね。
なので以下のような質問をしてみました。

以下のような処理を実現したいです。
・4人のメンバーを入力できる
・選択ボタンをクリックで、メンバーが自動でセットされ、下に表示される
・メンバーは縦にそれぞれ表示
・メンバーの上部に配牌ボタンを表示
・app.tsxとは別ファイルで

そんな先生の回答がこちら

ChatGPT先生

理解しました。以下に、要件に合わせたコンポーネントの実装例を示します。

まず、MemberInput.tsxというファイルを作成します。

import React, { useState } from 'react';

type MemberInputProps = {
  onMemberSet: (members: string[]) => void;
};

const MemberInput: React.FC<MemberInputProps> = ({ onMemberSet }) => {
  const [members, setMembers] = useState<string[]>(['', '', '', '']);

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
    const newMembers = [...members];
    newMembers[index] = event.target.value;
    setMembers(newMembers);
  };

  const handleSetMembers = () => {
    onMemberSet(members);
  };

  return (
    <div>
      {members.map((member, index) => (
        <input
          key={index}
          type="text"
          value={member}
          onChange={(event) => handleInputChange(event, index)}
        />
      ))}
      <button onClick={handleSetMembers}>メンバーを選択</button>
    </div>
  );
};

export default MemberInput;

次に、MemberDisplay.tsxというファイルを作成します。

import React from 'react';

type MemberDisplayProps = {
  members: string[];
};

const MemberDisplay: React.FC<MemberDisplayProps> = ({ members }) => {
  if (members.length === 0) {
    return <div>メンバーを選択してください。</div>;
  }

  return (
    <div>
      {members.map((member, index) => (
        <div key={index}>{member}</div>
      ))}
    </div>
  );
};

export default MemberDisplay;

最後に、App.tsxファイルにこれらのコンポーネントを組み込みます。

import React, { useState } from 'react';
import MemberInput from './MemberInput';
import MemberDisplay from './MemberDisplay';

const App: React.FC = () => {
  const [selectedMembers, setSelectedMembers] = useState<string[]>([]);

  const handleMemberSet = (members: string[]) => {
    setSelectedMembers(members);
  };

  return (
    <div>
      <h1>麻雀ゲーム</h1>
      <MemberInput onMemberSet={handleMemberSet} />
      <button>配牌</button>
      <MemberDisplay members={selectedMembers} />
    </div>
  );
};

export default App;

上記のコードでは、MemberInput.tsxではメンバーの入力フィールドと選択ボタンを表示し、入力されたメンバーを親コンポーネントに渡します。

MemberDisplay.tsxでは、渡されたメンバーを表示するコンポーネントです。メンバーが選択されていない場合はメッセージを表示します。

最後に、App.tsxでこれらのコンポーネントを組み込んで使用します。

これにより、4人のメンバーを入力し、選択ボタンをクリックするとメンバーが自動的にセットされ、

下に表示されるようになります。また、メンバーの上部には配牌ボタンが表示されます。

先生のおっしゃる通りにして、ファイルを作成してコピペ。
ほんでもって表示されたのがコチラ

画面

ま、まぁ見た目はさておき
そしてとりあえずメンバー選択してみたよ。

画面

お～っ、ちゃんとセットされてますね。
すごいですね、先生！

今のところ完全にアーキテクチャーとかは無視です（笑）
私が実装したいもののみで質問していってます。
あしからず

---

おわりに

いかがだったでしょうか。
今回はここまでにしておきます。
なんかワクワクしてきましたね。
「これからアレやコレや実装していかないと」と思うと、楽しくて仕方ありません。
ではまた次回に
ありがとうございました。(*◕ฺω◕ฺ)ﾉ