コラム（第一回論理式）

2020年12月25日 12:33

時は1980年代、任天堂ファミリーコンピュータが全盛の時代、MSXという規格のパーソナルコンピュータが産声をあげました。お茶の間のテレビにダイレクトに接続できるこのパソコンは、当時世間を賑わしていたPC-6001mkIIやX1C、FM-7などと比べモニタが不要なため安価であり、十代の私にもなんとか買えるコンピュータでした。

そんな安価なパソコンの普及とともに脚光を浴び始めたのが、ゲームのプログラムコードを掲載する雑誌です。今では考えらないことですが、読者は無心に写経ならぬ写コード（打ち込み）をしてアマチュアがつくったゲームを楽しむというスタイルのものでした。なんとこれ、ゲームを作って投稿し掲載されると３〜５万円の原稿料がもらえたのです。

十代の私は猿のようにゲームをつくり小遣いを稼ぎました。実はこれを作ったのは私です。

魔法使いウィズに影響うけたであろう、ファンダム初期の作品シャポー。ジャンプするだけのゲームだけど好きでした。 pic.twitter.com/RZRxSJiI7s
— ぼう (@bouandmamedi) July 1, 2020

今でもツイートしてくれる方がいるとは感動です。（これは私の作品の中でもROMカートリッジに焼かれて販売されたものです。）

さて、このように読者が目で見て打ち込むので、当然ながらプログラムコードは短い方が良いわけです。１画面プログラム部門（プログラムコードが当時のMSX-BASICの最大40文字×24行内に収まる）などというカテゴリーもありました。短い方が採用される確率があがり収入につながるので、機能を損なわずにソースコードを短くできると、それを眺めて恍惚としていました。

そんなわけでこれがすっかり性癖として身についてしまいました。現在もプログラミングの仕事をしていると、頭の中で黒板五郎の声がします。まだ短くできるでしょーーが！！。。。と。

一見、短く書くのは良いことのように聞こえるかもしれませんが多くの場合、可読性が落ちます。それに今となってはそんなことに時間をかけるのは無駄なことなのです。

例えば、JSでゲームをつくろう！的な入門的なコンテンツでよく登場するコードがあります。カーソルキー（上下左右の方向キー）でプレイヤー（32x32pxのpng画像）を動かすためのサンプルコードです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>自機移動</title>
</head>
<body>
<script>

   // 自機
   document.write('<img id="player" src="player.png" style="position:absolute;">');
   var x = 0;
   var y = 0;

   // 自機移動
   addEventListener("keydown", movePlayer);
   function movePlayer(event) {
       var keyCode = event.keyCode;
       // -----------------------------------------------------
       if (keyCode === 37) {
           x -= 32;
       }
       if (keyCode === 38) {
           y -= 32;
       }
       if (keyCode === 39) {
           x += 32;
       }
       if (keyCode === 40) {
           y += 32;
       }
       // -----------------------------------------------------
       document.getElementById('player').style.left = x + "px"; 
       document.getElementById('player').style.top = y + "px";
   }

</script>
</body>
</html>

論理式を使って自機の座標演算（点線で挟まれた部分）を短くしてみます。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>自機移動</title>
</head>
<body>
<script>

   // 自機
   document.write('<img id="player" src="player.png" style="position:absolute;">');
   var x = 0;
   var y = 0;

   // 自機移動
   addEventListener("keydown", movePlayer);
   function movePlayer(event) {
       var keyCode = event.keyCode;
       // -----------------------------------------------------
       x += ((keyCode === 39) - (keyCode === 37)) * 32;
       y += ((keyCode === 40) - (keyCode === 38)) * 32;
       // -----------------------------------------------------
       document.getElementById('player').style.left = x + "px"; 
       document.getElementById('player').style.top = y + "px";
   }

</script>
</body>
</html>

さらに、自機の可動範囲（この例では縦横0〜100px）を同様に論理式で加えます。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>自機移動</title>
</head>
<body>
<script>

   // 自機
   document.write('<img id="player" src="player.png" style="position:absolute;">');
   var x = 0;
   var y = 0;

   // 自機移動
   addEventListener("keydown", movePlayer);
   function movePlayer(event) {
       var keyCode = event.keyCode;
       // -----------------------------------------------------
       x += ((keyCode === 39)*(x < 100) - (keyCode === 37)*(x > 0)) * 32;
       y += ((keyCode === 40)*(y < 100) - (keyCode === 38)*(y > 0)) * 32;
       // -----------------------------------------------------
       document.getElementById('player').style.left = x + "px"; 
       document.getElementById('player').style.top = y + "px";
   }

</script>
</body>
</html>

どうでしょう。短くかつ高機能になりましたが、とても読みづらいコードになりましたw（つづく）

コラム（第一回 論理式）

いいなと思ったら応援しよう！

コラム（第一回論理式）