言語を切り替えても進行が消えない仕組み

言語切り替えで「変わるもの」と「変わってはいけないもの」

最初に、切り替えの前後で変わるものと変わらないものを分けます。

• 変わるもの：ボタンやヒントの文言、説明文、見出しなど、画面に出る文字
• 変わってはいけないもの：盤面の配置、手番、残りの回数、集めた数、一手戻すための履歴など、遊びの進み具合

前者を「表示」、後者を「状態」と呼びます。ゲームのルールは状態だけを見て動き、表示は状態を人間に見せる窓口にすぎません。

もう一つ区別しておくことがあります。作者が入力した作品名や紹介文は、日本語／英語の表示切り替えで書き換えられません。これは確認済みの仕様です。サイト側が用意した文言は切り替わり、作者の書いた文字は切り替わらないので、「切り替わる文字」と「そのまま残る文字」が一つの画面に同居します。

状態と表示を分ける最小の形

分離の考え方は、短いコードで見ると分かりやすくなります。次の例は、そのままHTMLファイルとして保存して開けば動く最小構成です。「進行」にあたる手数を state に持ち、文言は strings に分けています。

<button id="lang">日本語 / English</button>
<p id="count"></p>
<button id="add"></button>
<script>
const strings = {
  ja: { add: "ひとつ進める", count: n => `進行: ${n} 手` },
  en: { add: "Advance", count: n => `Progress: ${n} moves` }
};
const state = { lang: "ja", moves: 0 };
function render() {
  const t = strings[state.lang];
  document.getElementById("add").textContent = t.add;
  document.getElementById("count").textContent = t.count(state.moves);
  document.documentElement.lang = state.lang;
}
document.getElementById("add").onclick = () => { state.moves++; render(); };
document.getElementById("lang").onclick = () => {
  state.lang = state.lang === "ja" ? "en" : "ja";
  render();
};
render();
</script>

ポイントは三つあります。

1. 言語切り替えのボタンが変えるのは state.lang だけで、state.moves には触れません。
2. render() は状態から画面を毎回描き直す関数です。言語が変わっても、手数が変わっても、同じ関数を呼びます。
3. 文言は strings に集約されているので、言語を増やしても状態の側は変更不要です。

進行が消えてしまう設計の典型は二つあります。一つは、言語切り替えのときに初期化処理（ゲームの開始処理）をもう一度呼んでしまうことです。もう一つは、画面上の文字を読んで状態の代わりにすることです。たとえば表示中の「3 手」という文字から手数を取り出す作り方では、文言が変わった瞬間に読み取れなくなります。

公式作品から読み取れること

確認済みの事実を並べると、次のとおりです。

• 13作品はすべて独立したHTMLで、外部通信なしに動く
• サイトの日本語／英語設定に合わせて表示が切り替わる
• 言語変更とプレイ画面の拡大で進行が保たれる
• 「動きを抑える」設定に対応している
• 保存があるのは「余白の庭」「WAVE / WAVE」「かたちのあいだ」の3作品で、他の10作品の記録や録音は画面を開いている間だけ残る

ここから読み取れることが二つあります。

一つ目は、「進行が保たれること」と「保存されること」は別の話だという点です。保存のない10作品でも、言語変更では進行が保たれると案内されています。つまり、言語変更の間に進行を持ち越す仕組みは、ブラウザを閉じても残る保存とは別の層にあると考えられます。外部通信なしの独立したHTMLである以上、サーバーに預けて復元している可能性も低いと言えます。ただし、その層が画面を描き直すだけの方式なのか、言語変更の前後で何らかの形で状態を引き継ぐ方式なのかは、確認済み事項には書かれていません。この部分は作品を開いて挙動で確かめる範囲にとどめます。

二つ目は、言語変更とプレイ画面の拡大が同じ文脈で語られている点です。どちらも「見え方が変わるだけで、ゲームの中身は変わらない」操作です。文字の長さが変わればレイアウトも変わり、拡大すれば要素の大きさも変わります。それでも盤面や手番は同じままでなければなりません。表示を変える操作と状態を変える操作を分けておくという設計が、二つの機能を同時に支えていると読み取れます。

また、「潮目のオセロ」と「灯りのチェス」のオンライン対局には、再読み込みで同じ部屋へ復帰する仕組みや、手番・合法手・勝敗をサーバーで確認する仕組みがあります。これは言語切り替えで進行が保たれる話とは別物です。前者は通信と部屋の記録に支えられ、後者は画面側の状態と表示の分離に関わります。混ぜて考えないようにします。

自分の画面で確かめる手順

実験の設計書として、手順を示します。結果はここには書きません。ご自身で確かめてください。

準備するもの

• 日本語／英語を切り替えられるアソバースの画面
• 紙とペン（盤面や数字を書き留める用）
• ゲストのままで構いません。ログインは不要です

確かめる対象と、記録する項目

• 潮目のオセロ（ひとり対局）、進めておく状態：数手進める、記録する項目：石の配置、手番、「一手戻す」が使えるか
• こだまの森、進めておく状態：数ラウンド進める、記録する項目：ラウンド、点数、間違いの回数
• 月夜の配達、進めておく状態：小包を一部運ぶ、記録する項目：バッグの中身、残りの燃料
• 時計じかけの台所、進めておく状態：時間制限のない「見習い」で途中まで進める、記録する項目：入れた材料の順番、針の位置
• 余白の庭、進めておく状態：数個を置く、記録する項目：置いたものの種類と位置、季節

時間が流れる作品では、切り替えの間にも時間が進むかどうかが判断を混ぜてしまいます。そのため、「時計じかけの台所」は時間制限のない見習いで確かめます。

手順

1. 作品を開き、記録対象の状態を作ります。紙に、盤面や数字を書き出します。
2. サイトの言語設定を切り替えます。設定の場所は画面で探してください。
3. 作品に戻り、書き出した項目と一致するか照らします。
4. 元の言語に戻して、もう一度照らします。往復で最低2回確かめると安心です。
5. プレイ画面を拡大し、同じ項目を照らします。

結果の読み方

• すべて一致：表示の切り替えで状態が壊れていません。案内どおりです。
• 一部だけ違う：どの項目が違うかを書き留めます。たとえば盤面は同じでも履歴が消えている、といった違いです。違いが出たら、その作品の現在の案内を確認してください。
• 全部が初期状態に戻る：作品が読み込み直されて状態を引き継げていないということです。ただ、その場合も、先に画面の拡大や別のタブ操作が原因でないか切り分けます。

保存ありの3作品との対比

「余白の庭」は保存があるため、言語切り替えとは別に、タブを閉じて開き直した後の状態も確かめられます。保存のない10作品と対比すると、「言語変更で進行が保たれる」ことと「保存されて閉じても残る」ことが別だと実感できます。保存のない作品の側は、進行を失ってもよい状態で確かめてください。

作る人が気をつける点

アソバースに自作のゲームを投稿する方にも、この考え方は使えます。ただし、投稿作品の言語切り替えの仕組みは、確認済み事項に含まれません。作品の言語をどう扱うかは、作者が自分のゲームの中で決めることです。

作る際の注意点は、次の四つにまとまります。

• 状態を一つのオブジェクトにまとめ、画面の文字から状態を読まないようにします。
• 言語を変える処理から、開始処理（初期化）を呼ばないようにします。
• 文言を辞書にまとめておけば、英語を後から足しても状態の側を触らずに済みます。
• 保存が必要なら、状態だけをまとめて保存します。アップロード作品ではlocalStorageやsessionStorageが一時メモリーの互換処理であることにも注意してください。永続的な保存が必要なときは、作品専用のクラウドセーブ（作品ごとにJSONで128KiBまで）を使うかどうかを検討します。

ゲームにFirebaseのUIDや認証トークン、メールアドレスを渡さないという前提は、この設計でも変わりません。状態に入れるのは、遊びの進み具合だけにします。

次の行動

「潮目のオセロ」のひとり対局で数手進め、盤面を紙に書き出してから、言語を二往復させてみてください。一致したかどうかを項目ごとに確かめたら、「余白の庭」で保存の有無の違いも試すと、状態・表示・保存の三つの層が見分けられます。自作のゲームがある方は、state と render() を分ける形にして、言語切り替えのボタンから開始処理を外せているか、コードを見直してみてください。