prime's diary

そすうの日々を垂れ流しちゃうやつだよ

オンラインBrainf*ckインタプリタ・デバッガを作った【Brainf*ck Advent Calendar 2019とその他のAdCの17日目】

はじめに

この記事はBrainf*ck Advent Calendar 17日目・KMC Advent Calendar 17日目・LeapMind Advent Calendar 17日目の記事です。

adventar.org

adventar.org

adventar.org

概要

難解プログラミング言語の一つであるBrainf*ckのオンラインデバッグ環境を作った話をします。

作ったものは……これ!!!👉👉👉👉👉Online Brainf*ck debugger👈👈👈👈👈

Brainf*ckデバッガについて

Brainf*ckはその仕様上、極めてバグを埋め込みやすいです。具体的には、

  • 変数名とかそういうものはなく、アドレスだけで値を参照・操作する
    • そのうえ、アドレス移動は相対移動(元の位置から+1/-1のみ)しかできないので、参照先を間違えやすい
  • 関数とかいう便利な機能もないので、重複したコードが登場しやすい
  • +, -, >, <命令はよく連続して使われて数え間違えやすく、しかも使う個数を1個でも間違えるとバグる

したがって、(特に大規模な)Brainf*ckプログラムを作成する上ではデバッガの存在はとても大切です。

ということで数年前に

moon.kmc.gr.jp

というデバッガを作ったのですが、如何せん古くなってきたので新しく作り直すことにした、というのが今回の内容です。

現在の機能

インタプリタ

  • Brainf*ckのコードを実際に実行することができます。標準入力を与えることもできます。
  • デバッグモードを有効にすると、100msごとなど指定した時間間隔で命令を実行させられます。
  • 入出力をUTF-8の文字列と解釈するか、16進数と解釈してバイナリを扱うかを選択できます。
  • Brainf*ckではEOFに達したときに入力命令を実行した場合の値は規定されていませんが、これを0と-1(255)で選択できます。

デバッグ機能

  • プログラムカウンタとデータポインタの位置を表示します。
  • @命令に達するとそこで実行を停止させることができます。停止させた後はステップ実行などで細かくプログラムの動作を追うことが可能です。
  • :命令に達すると標準エラー出力に今のポインタの指す値を出力します。.標準エラー出力版です。
  • 指定した範囲のメモリの内容を見ることができます。

その他

  • インタプリタをWebWorkerで動かすことで、重いプログラムを動かしてもUIが重くならず、無限ループに陥ってもページを再読込する必要がない
  • インタプリタjQueryで頑張って書いていたが、Vue.jsを使ってまともなコードになった

今後追加したい機能

旧デバッガにあった機能

  • 今のプログラムカウンタの位置やデータポインタの位置を視覚的に表示する
  • 命令実行ログを取得する
  • ログを遡って実行を逆再生できるようにする
    • ステップ実行などで通り過ぎると悲しいため

あると嬉しそう

  • デバッグ時のステップ実行より高度なデバッグ実行機能
  • デバッグ時のメモリ内容書き換え
  • コードスニペット(あるいはより強力なマクロ機構)
  • コードテスト機能
  • デザインをかっこよくしたい
  • @命令はプログラムカウンタに対してトリガを掛けるが、データポインタとかメモリ上の値に対してトリガを掛けられるようにする
  • コードに対してシンタックスハイライトとか自動インデントとか補完とかしたい(エディタとしての機能をつける)
  • デバッグOFF時の性能向上

ということで半分ぐらい実装できてないですが、便利ではあるのでぜひ使ってみてください! もし欲しい機能やバグがあれば、

github.com

このリポジトリにIssueを立てるか、自分で実装してPull Requestを投げてください!

ではよきBrainf*ckプログラミングライフを!