紙で作ったオセロの変種を画面に移すと、何が変わり何が残るのか

準備するもの：紙の変種とルール文

用意するのは、6×6のマスを描いた紙、二色の駒（コインの表裏でも、白黒の紙片でも構いません）、タイマー、記録用の紙です。対局相手は、3局を通して同じ人にお願いします。

まず、ルール文を200字以内で書きます。この文が、のちにコードの仕様書になります。口頭の補足は禁止ではありませんが、あとで数えるので「補った」と気づいた時点で記録します。例は次のとおりです。

6×6の盤で遊ぶ。上から2行目・左から2列目と、上から5行目・左から5列目は壁マス。壁には石を置けず、壁は挟む列を途中で止める。最初は中央の4マスに、左上と右下を白、右上と左下を黒で置く。黒が先手。相手の石を一直線に挟める場所にだけ置け、挟んだ石をすべて裏返す。置ける場所がなければパス。双方置けなくなったら終了で、石の多いほうの勝ち。

この文には、あえて決めていない点が残っています。盤の端に達した列は挟めるのか、同数のときは引き分けか、パスは相手の同意が要るのか、壁の向こうに自分の石があっても挟めないのか、などです。曖昧さを残すこと自体が実験の道具なので、直しすぎないでください。

手順1：紙で3局遊び、迷いを記録する

紙の3局は、次の条件で行います。

1. 先手と後手を固定するか、1局ごとに交代するかを先に決め、記録に書きます。
2. 1局ごとにタイマーを動かし、終局までの時間を測ります。
3. ルールの解釈で手が止まった回数を数えます。「止まった」とは、どちらかが「これはいいのですか」と口にして、1回でも会話が入った場面です。
4. 止まったときに決めた内容は、その場で一行メモします。たとえば「壁の隣の列は挟めない、と決めた」のように書きます。
5. 石の見落としや置き間違い（裏返し忘れ、裏返しすぎ）が起きたら、回数だけ数えます。

記録は次のような表にまとめると、あとで画面版と並べやすくなります。

• 終局までの時間、紙1局目：、紙2局目：、紙3局目：
• 解釈で止まった回数、紙1局目：、紙2局目：、紙3局目：
• 裏返しの誤りの回数、紙1局目：、紙2局目：、紙3局目：
• 最終の石数差、紙1局目：、紙2局目：、紙3局目：
• 口頭で補ったルール、紙1局目：、紙2局目：、紙3局目：

最後の行が最も重要です。この行に並ぶ項目こそ、「紙では暗黙のまま通っていたルール」の一覧になります。

手順2：ルール文だけを見て画面版を書く

3局が終わったら、紙のメモを見ずに、ルール文だけを頼りに画面版を作ります。メモを見ないのは、補足を無意識に取り込んでしまうのを避けるためです。コードを書いていて「ここは文に書いていない」と手が止まった箇所は、すべて記録します。止まった回数は、紙のときの「解釈で止まった回数」と同じ種類の指標として扱います。

下は、上のルール文をそのまま写した最小構成の例です。1ファイルで動き、外部のライブラリは使いません。壁は9、黒は1、白は2として盤を持ちます。

<!doctype html><meta charset="utf-8"><title>壁つきオセロ6x6</title>
<style>td{width:44px;height:44px;text-align:center;border:1px solid #444;cursor:pointer;font-size:28px}</style>
<p id="s"></p><table id="b"></table>
<script>
const N=6,D=[-1,0,1],M=["","●","○"];
const g=Array.from({length:N},()=>Array(N).fill(0));
g[1][1]=g[4][4]=9; g[2][2]=g[3][3]=2; g[2][3]=g[3][2]=1;
let t=1;
function flips(y,x,p){
 if(g[y][x])return[];
 const r=[];
 for(const dy of D)for(const dx of D){
  if(!dy&&!dx)continue;
  const l=[];let a=y+dy,c=x+dx;
  while(a>=0&&c>=0&&a<N&&c<N&&g[a][c]==3-p){l.push([a,c]);a+=dy;c+=dx}
  if(l.length&&a>=0&&c>=0&&a<N&&c<N&&g[a][c]==p)r.push(...l);
 }
 return r;
}
const can=p=>g.some((r,y)=>r.some((_,x)=>flips(y,x,p).length));
function draw(){
 b.innerHTML=g.map((r,y)=>"<tr>"+r.map((v,x)=>`<td onclick="play(${y},${x})">${v==9?"■":M[v]}</td>`).join("")+"</tr>").join("");
 const n=v=>g.flat().filter(q=>q==v).length;
 s.textContent=`手番 ${M[t]}　●${n(1)} ○${n(2)}`;
}
function play(y,x){
 const f=flips(y,x,t); if(!f.length)return;
 g[y][x]=t; f.forEach(([a,c])=>g[a][c]=t);
 if(can(3-t))t=3-t; else if(!can(t)){draw();s.textContent+="　終局";return}
 draw();
}
draw();
</script>

このコードを読むと、文に書かれていなかった決定が何か所か実装されていることがわかります。

• 壁は「自分の石でも相手の石でもない」ので、挟む列は壁の手前で終わります。
• 盤の端に達した列は、挟めません。
• パスは自動です。相手に手がなければ手番が戻り、双方に手がなければ終局します。
• 同数のときの扱いは、コードに書かれていません。表示は石数だけです。

どれも紙では「見ればわかる」と通っていた項目です。コードでは、決めない限り先へ進めません。自分の書いた版が上の例とどこで分かれたかも、記録に残してください。

手順3：同じ条件で画面の3局を遊ぶ

画面版を完成させたら、紙のときと同じ相手と同じ条件で3局遊びます。先手後手の割り当て、記録の項目、迷いの数え方は変えません。紙のときに作った表の列を、画面1局目から3局目として増やします。

画面版では、次の観察を加えてください。

• 手を打つまでにかかった時間の体感（長い局面があれば、その局面の手数を書きます）
• 相手の手を見落として声を出した回数
• 「パスになったことに気づくまでの間」があったか
• 画面ならではの不満（石が裏返る瞬間が見えない、など）

ここに、公式作品「潮目のオセロ」を比較対象として開いてみるのも有効です。確認済みの範囲では、この作品には返る石のプレビュー、置けない手番の自動パス、ひとり対局での一手戻しがあります。自作の画面版に何がなく、何を足したくなったかを書き出すと、「画面化で何が補われるのか」が具体的になります。足した機能は、足した順番どおりに記録してください。

結果の読み方と、起こりやすい誤り

数字が出そろったら、紙と画面を次の観点で比べます。以下は結果の予想ではなく、結果が出たときの解釈の目安です。

• 「解釈で止まった回数」が、紙に比べて画面で減った場合は、補足が仕様として固まった可能性があります。紙の「口頭で補ったルール」の行が、コードの条件分岐に対応しているか確かめます。
• 同じ回数が減らなかった場合は、ルール文に書き漏らした点が画面側でも別の形で残っていると考えられます。止まった箇所をルール文に書き足し、再度読み直します。
• 「裏返しの誤り」が減った場合、減ったのは遊びの核ではなく、作業の確実さです。減った分だけ手番の緊張が変わったかは、体感の行で別に読みます。
• 終局までの時間が大きく変わった場合、遊びの中身が変わったのか、操作の速さが変わっただけなのかを分けて考えます。手数を割れば区別しやすくなります。

誤読しやすい点は次のとおりです。

1. 順序の影響: 紙を先に遊ぶと、画面では盤面の定石に慣れた状態から始まります。可能なら、別の相手で画面を先に遊ぶ組も用意し、差を見ます。
2. バグと仕様の混同: 画面版で「おかしい」と感じた手が、バグなのか、ルール文に忠実な結果なのかを必ず切り分けます。ルール文に戻って確認してください。
3. 補助機能の混入: プレビューやヒントを足した状態で比べると、紙と画面の差ではなく補助の有無の差を見てしまいます。補助は、無しの3局を終えてから足してください。
4. 3局という少なさ: 3局は傾向を見るための数で、統計的に結論を出す数ではありません。数字を一般化せず、自分のルールと相手に限った観察として書き留めます。
5. 相手の変化: 同じ相手でも、紙から画面で気分や慣れが変わります。記録に当日の状況をひと言添えておくと、あとで読み返せます。

次の行動

まずルール文を200字以内で書き、紙で1局だけ遊んで「口頭で補った行」を埋めてみてください。その行が埋まれば、画面版に何を書き込むべきかがほぼ決まります。画面版が動いたら、アソバースの投稿画面からHTMLをアップロードして、遊んでもらうところまで進められます。直下のindex.htmlだけで動く最小構成なので、そのまま試せます。