CONTENT
ここから
目的
第1章では、キャラクターを選択できる画面を作りました。しかし、そのままではAIは分析できません。
なぜならAIは画面を見ているわけではなく、データしか理解できないからです。
この章では、「現在どんなドラフト状況なのか」をAIが理解できる形へ変換します。
学ぶこと
- 配列
- オブジェクト
- filter
- map
- 状態管理
- AIへ渡すデータの作り方
なぜ整理が必要なのか
例えば現在の状況が次のようになっていたとします。
相手チーム
- Jett
- Omen
- Cypher
自分チーム
- Sova
- Sage 人間なら、
「敵は前に出る構成だな」
などと考えられます。
しかしAIは画面を見ていません。
そのため、
{
enemyTeam: [
{ name: 'Jett' },
{ name: 'Omen' },
{ name: 'Cypher' }
],
allyTeam: [
{ name: 'Sova' },
{ name: 'Sage' }
]
}
のようなデータとして渡す必要があります。
現在選ばれているキャラクターを取得する
まずは相手チームを取得します。
const enemyTeam = state.enemyTeam.filter(
(character) => character !== null
);
解説
現在の配列はこのようになっています。
[
{ name: 'Jett' },
{ name: 'Omen' },
null,
null,
null
]
まだ選ばれていない場所は null です。
そこで、
filter()
を使って空き枠を除外します。
結果はこうなります。
[
{ name: 'Jett' },
{ name: 'Omen' }
]
必要な情報だけを取り出す
キャラクターには画像URLなども含まれています。
しかしAI分析には不要です。
そこで必要な情報だけ抽出します。
const enemyTeam = state.enemyTeam
.filter((character) => character !== null)
.map((character) => ({
id: character.id,
name: character.name,
role: character.role,
}));
mapとは
mapは配列を別の形へ変換します。
例えば
[
{
id: 'jett',
name: 'Jett',
role: 'Duelist',
image: 'xxx'
}
]
を
[
{
id: 'jett',
name: 'Jett',
role: 'Duelist'
}
]
へ変換できます。
選択可能なキャラクターだけ取得する
AIは、
「まだ選ばれていないキャラクター」
だけを提案する必要があります。
まず選択済みキャラクター一覧を取得します。
const usedIds = getUsedCharacterIds();
結果は例えば
[
'jett',
'omen',
'sage'
]
になります。
次に選択可能キャラクターだけ取得します。
const availableCharacters = characters.filter(
(character) => !usedIds.includes(character.id)
);
結果
[
{ name: 'Phoenix' },
{ name: 'Reyna' },
{ name: 'Cypher' }
]
選択済みキャラクターが除外されます。
AIへ送るデータを作る
ここが最も重要な部分です。
function createAnalyzePayload() {
return {
enemyTeam,
allyTeam,
availableCharacters,
};
}
実際には次のようなデータになります。
{
enemyTeam: [
{
name: 'Jett',
role: 'Duelist'
}
],
allyTeam: [
{
name: 'Sova',
role: 'Initiator'
}
],
availableCharacters: [
{
name: 'Phoenix',
role: 'Duelist'
}
]
}
これでAIが分析できる状態になります。
AIが考えやすいデータとは
AIにとって重要なのは、
見た目
ではありません。
構造です。
悪い例
Jett
Omen
Cypher
良い例
{
enemyTeam: [
{
name: 'Jett',
role: 'Duelist'
}
]
}
AIは整理されたデータの方が圧倒的に理解しやすくなります。
この章の完成条件
相手チーム情報を取得できる。
自分チーム情報を取得できる。
空き枠を除外できる。
選択済みキャラクターを除外できる。
選択可能キャラクター一覧を作れる。
AIへ送るオブジェクトを作れる。
チャレンジしてみよう
課題1
現在選択されているキャラクター数を表示してください。
例
相手チーム: 3人
自分チーム: 2人
課題2
現在不足している人数を表示してください。
例
相手チーム残り2枠
自分チーム残り3枠
課題3
選択可能キャラクター数を表示してください。
例
残り選択可能キャラクター: 17体
課題4
役割ごとの人数を集計してください。
例
Duelist: 2
Controller: 1
Initiator: 1
Sentinel: 1
課題5
自分チームに存在しない役割を表示してください。
例
不足役割:
Controller
Sentinel
これは次章のAI分析で非常に重要な情報になります。
まとめ
この章では、画面で選択された情報をAIが理解できるデータへ変換しました。
重要なのは、
「画面を作ること」
ではなく、
「現在のドラフト状況をデータとして表現すること」
です。
次章では、このデータをGemini APIへ送り、
「今選ぶべきキャラクターは誰か」
をAIに分析させます。