子ども向けアプリに四目並べを追加：AIに渡した「完了の条件」とテストの確かめ方

子ども向けのボードゲームアプリに、新しいゲームとして四目並べを足しました。画面を1つ増やすだけのつもりでしたが、手を入れる場所は新しい画面のファイルだけでは終わりませんでした。この記事では、Claude Code に頼む前に「完了の条件」を文章にしておいた進め方と、文字サイズを最大にした状態や iPad の横向きまで確かめた手順を書きます。

作りたかったもの

タイトル画面に「4つならべ」を出して、そこから対局できるようにすることです。四目並べは、7列6段の縦向きの盤を使う遊びです。列を選んで駒を入れると、駒はその列の一番下（すでに駒があれば、その上）まで落ちます。先に縦・横・斜めのどれかで4つ並べたほうが勝ちです。

作り始める前に、どうなったら終わりかを次のように書き出しました。

タイトル画面に「4つならべ」が出て、だれと遊ぶかを選べる
列を押すと、駒が一番下に落ちる
勝ち・引き分け・「もういっかい」が動く
新しく足すUIテスト（タイトル画面から四目並べに入って戻れる、4つ並べて勝ちになる、満杯の列を押すと案内が出る）と、これまでのUIテストがすべて通る
文字サイズを最大にしたときと、横向きにしたときに、盤と「もういっかい」が押せる

ここで出てくるテストは2種類あります。ユニットテストは、画面を出さずに、勝ち負けの判定などの計算部分だけを確かめるものです。UIテストは、人が画面を触る代わりに、コンピュータが自動で画面を押して、出てくるものを確かめるものです。

画面の行き先は、こうなります。

flowchart LR
  A["タイトル画面"] --> B["4つ ならべ"]
  B --> C["だれと遊ぶかを選ぶ"]
  C --> D["7列6段の盤"]
  D --> E["勝ち・引き分け"]
  E -- "もういっかい" --> D
  D -- "もどる" --> A

AIへの頼み方

作業は Claude Code にさせました。私がやったのは、上の「完了の条件」を先に文章にして渡したことです。「四目並べを作って」とだけ頼むのではなく、押したときに何が起きてほしいか、どのテストが通ればよいかまで含めて渡しました。

この書き方にしたのは、できあがりを私が目で見て判定する回数を減らしたかったからです。条件がテストの形で書いてあれば、できたかどうかはテストの結果で分かります。

進め方はこの順です。

flowchart TD
  A["完了の条件を文章で書く"] --> B["Claude Code に作らせる"]
  B --> C["ユニットテストとUIテストを動かす"]
  C -- "落ちた" --> B
  C -- "全部通った" --> D["シミュレータで自分で遊んで確かめる"]

シミュレータは、Mac の画面の中で iPhone や iPad を動かす道具です。実機を触らずに、画面の見た目と操作を確かめられます。

画面を足すだけでは足りなかったところ

新しいゲームの画面を作れば終わり、と考えていましたが、そうはなりませんでした。足りなかったのは次の3つです。

1つ目は、アプリがゲームの種類をどう区別しているか、という部分です。このアプリには、遊べるゲームの一覧を表す区分と、対局を始めるときに「どのゲームを始めるか」を渡す区分の2つがあります。その両方に四目並べを足して、はじめてタイトル画面に3番目の「4つならべ」が出ました。新しい画面のファイルを作るだけでは、タイトル画面からそこへたどり着けません。

2つ目は、UIテストが盤の升目を押すための手がかりです。このアプリには、UIテストが画面の部品を名前で呼び出すための共通の手引きをまとめた部分があります。そこに「四目並べの升目」の呼び出し口を足して、はじめてテストが盤を押せるようになりました。テストの本体を書く前に、テスト側から画面を触れる状態を作る必要があった、ということです。

3つ目は、駒が入らない列を押されたときの案内です。満杯の列を押せてしまうと、子どもには何も起きていないように見えます。そこで「そのれつはいっぱいだよ」と画面に出すようにしました。

どう判断したか

完了の条件に、文字サイズ最大と横向きを入れておくと決めました。iOS には、本体の設定で文字を大きくできる仕組みがあります。Apple は、いちばん大きいサイズまで試すと、文字が切れたり重なったりする不具合を見つけられる、と書いています。盤のような升目の並ぶ画面は、文字が大きくなったときに崩れやすいところです。

読み上げの文言も、あとまわしにせず条件に入れました。VoiceOver は、画面を見なくてもアプリを操作できるようにする Apple の読み上げ機能です。目の不自由な人が使うもので、すべての部品に短く正確な説明を付けることが求められます。四目並べの升目には、何列目の何段目かと、「おすとこのれつにおちる」という案内を読み上げるようにしました。

読み上げを先に整えたことには、もう1つ効きめがありました。Apple の資料によると、iOS のUIテストは2つの土台の上に成り立っています。1つは XCTest というテスト用の仕組み、もう1つはアクセシビリティです。アクセシビリティとは、画面の部品に「これは何のボタンか」という説明を持たせておく仕組みのことで、読み上げもこれを使います。

UIテストは、この説明を手がかりに部品を探し、押し、結果を確かめます。つまり読み上げのために付けた説明は、そのままテストが盤を探す足場にもなります。読み上げを後回しにすると、テストのために別の目印を付けることになりかねません。

最後に落ちた駒に枠を付けるのも、同じ考えで入れました。どこに落ちたかを目で追えないと、7列6段の盤では自分の手がどこに行ったのか見失います。読み上げ側には、升目ごとに何列目の何段目かを入れました。

できたもの

ユニットテストは、iPhone 16 のシミュレータで146件すべて通りました。このうち8件が、今回の四目並べの判定のために足したものです。残りの138件はこれまでからあるもので、そちらも1件も落ちていません。すでに入っているゲームを壊していない、という確認になります。

UIテストは、iPhone 16 で30件すべて通りました。このうち2件は iPad でしか動かせないものなので、iPhone では飛ばしています。その2件を含む9件を iPad Pro 13インチで動かし、文字サイズ最大・横向き・四目並べの動きが通ることを確かめました。

新しく足したUIテストは、四目並べ自体の3件のほか、タイトル画面から入って戻れることの1件、文字サイズ最大の1件、iPad の横向きの1件です。

テストが通ったあと、シミュレータで自分でも対局しました。確かめたのは次の3つです。

押した列に○が一番下まで落ち、「つよい」に設定したコンピュータの相手が打ち返してくること
文字サイズを最大にしても盤が崩れず、満杯の案内が折り返して読めること
iPad の横向きで、盤と「もういっかい」が画面に収まること

まだ確かめられていないこともあります。実機での VoiceOver の読み上げ方と、効果音の聞こえ方です。シミュレータでは、この2つは本物と同じにはなりません。

まとめ

AIに頼む前に「どうなったら終わりか」を文章にしておくと、できたかどうかをテストの結果で判定できます。目で見て確かめる回数が減ります。
完了の条件には、動くことだけでなく、文字サイズ最大や横向きのような「崩れやすい状態」も書いておきます。Apple も、いちばん大きい文字サイズまで試すと文字の切れや重なりが見つかる、と書いています。
読み上げの文言は、目の不自由な人のためであると同時に、UIテストが画面の部品を探す手がかりにもなります。先に整えておけば、テスト用の目印を別に用意せずに済みます。
新しい画面を足すときは、画面のファイルだけを見ないことです。今回は、ゲームの種類を表す区分とテストからの呼び出し口にも手を入れて、やっとタイトル画面からたどり着けました。

次は、実機で VoiceOver の読み上げと効果音を確かめます。

参考にした資料

この記事は、筆者の開発記録をもとにAI（Claude）が下書きし、筆者が確認して公開しています。