プログラミング系ゲーム3選 (1) – A=B
もうすぐ10日目に突入する!ここで少し息抜きとして、プログラミングやコンピュータに関連するゲームをいくつか紹介しようと思う。今日紹介するゲームは A=B という名前で、Steam で購入可能、WindowsとMacの両方でダウンロードして遊ぶことができる。
A=B はゲームの主人公が設計したプログラミング言語であり、文法は A=B しかない。この極めて簡素な文法を使って様々なパズルを解いていくことになり、問題を解き進めるにつれて文法も次第に豊富になっていく。
まずは Steam のレビューを見てみよう。

ゲーム内容
ゲーム内では様々なパズルに遭遇するが、いずれも文字列処理に関するものだ。そのうち A=B という文法は、文字列 A を B に置換することができる。例えばプログラムが aaa=bbb であり、文字列が aaabbb の場合、結果は bbbbbb になる(aaa を bbb に置換する)。ゲーム内の文法説明も非常にシンプルで、直接PDFへのリンクが渡されるだけだが、ストーリーが進むにつれてより多くの文法が解放されていく。
ここでゲーム内の問題をいくつか挙げてみる:
1. abc のソート
与えられた文字列は abc の3文字のみを含み、長さは最大7である。a=b という文法しか使えない状況で、どう書けばよいだろうか?
この問題の答えはとてもシンプルで、3つのバリエーションをすべて列挙すればよい:
ba=ab
ca=ac
cb=bc
もし入力が bcba だった場合:
baにマッチし、baをabに置換する。文字列はbcabになるcaにマッチし、caをacに置換する。文字列はbacbになるbaにマッチし、baをabに置換する。文字列はabcbになるcbにマッチし、cbをbcに置換する。文字列はabbcになる
プログラミング言語の観点から見ると、本来なら直接 for ループを書くか関数を呼び出すだけで解決できる問題なのに、ここでは少し想像力を働かせる必要がある。
2. 回文
このチャプターでは、使える文法がいくつか追加される:
y=(return)false
y にマッチしたときに false を返す。
(start)a=(end)b
先頭の文字 a にマッチしたとき、末尾の文字を b に置換する。この先頭によって末尾が変わるという特性は直感的ではないように思えるが、このゲームのデザインによって、自然とこの文法の使い方を学べるようになっている。
問題はおなじみの、文字列が回文かどうかを判定するものだ。入力は同様に abc の3文字のみを含む。
axAy=
bxBy=
cxCy=
(start)a=(end)xAy
(start)b=(end)xBy
(start)c=(end)xCy
yx=(return)false
=(return)true
一見すると難解に思えるが、コードを少し見てみればそのコアとなる概念を理解できる。
まず、a, b, c で始まる文字列にマッチした場合、末尾を xAy の形式に変換する。ここの xy は他の文字列に置き換えても問題なく、すでに処理済みであることを表している。入力文字列が abba だとすると、1巡目の処理を経た後、文字列は bbaxAy になる。
このとき axAy= を実行することで、1組の回文を消去できる。理想的な状況ではすべての回文が消去されるが、残るものがある場合は yx のような状態になり、マッチしなかった文字が存在することを示す。
感想
このゲームを遊ぶのに何らかのプログラミング言語を習得している必要はないが、基本的な問題解決の概念がなければ、すんなりプレイするのはやはり難しい。ソフトウェアエンジニアにとっては、このゲームを遊ぶことは文法が極端に貧弱な言語でパズルを解いているような感覚に近い。
だが、これは良いことだと僕は思う。僕たちはプログラミング言語の概念に慣れすぎており、ループや関数を書くことに慣れきっているため、たまには違った角度から思考してみることで、かえって多くの楽しみを見出すことができる。
上記の2つの例は、プログラミング言語を使えば数分で解決できるものだが、A=B の文法で書くとなるとしばらく考え込む必要があり、目的を達成するためにまったく異なる思考が引き出されることになる。
関連記事
- Three.js で僕の部屋を表現する 僕が React Three Fiber を使って実際の自分の部屋をブラウザ上に再現し、実世界のオブジェクトを目録に見立て、空間の記憶を通してここ数年の生活と仕事について語った話。
- フロントエンドで画像を扱う際に注意すべきこと Jake Archibaldの記事を起点に、現代のレスポンシブ画像の書き方を整理する。なぜwidth/heightを付ける必要があるのか、CSSのaspect-ratioはいつ使うべきか、AVIFとWebPの選び方、そしてpicture/source/srcsetを使ったモバイル向け画像の切り替えについて。
- CSS field-sizing — たった1行のCSSでフォーム要素を自動リサイズする かつてtextareaの自動高さ調整は、JavaScriptでscrollHeightを監視するしかなかった。しかしCSSのfield-sizing: contentなら、わずか1行で代替でき、textarea、input、selectに対応している。本記事では従来のやり方のペインポイントと、field-sizingの使い方をまとめる。
- リンクの下線をもっと見栄え良くする:text-underline-offset デフォルトでは下線と文字が近すぎて、このスタイルを好まないデザイナーもいるし、僕自身もあまり綺麗ではないと感じていた。