ReactとReduxでx86のエミュレータを作った
はじめに
こちらです。heroku の無料プランなので、起動に時間がかかる場合があります。 https://x86-emulator.nownabe.com/
レポジトリはこちらです。 https://github.com/nownabe/x86-emulator-js
この記事はこいつの紹介記事になります。アセンブリのことや CPU の仕組みや React/Redux の話はあまりでてきません。
なに？
x86 CPU をエミュレートするやつです。ブラウザで x86 の 32bit1プログラム(バイナリ)を実行できる JavaScript のプログラムです。
といってもまだまだ未完成品で、命令などが全然足りてませんがある程度基本的な機能は実装できたので公開しました。 もし足りてないのがあれば Issue ください 😅
完全な PC を目指すというよりは、アセンブリ教育用のマイコンボード的位置づけのアプリケーションになっていて、レジスタやメモリの内容を表示できるようになっています。 また、そういう位置づけなのでバイナリを入力するのではなく、ブラウザで x86 のアセンブリを入力してそれを直接実行できるという形にしています。ステップ実行できるのも特徴かと思います。
なぜ？
弊社の変態プログラマが「バイナリで短歌を詠みたい」2とわけのわからないことを言い出したのがそもそものきっかけです。 気づいたら作ってました。
まったく目的もなく、一体全体どこからモチベーションがわいてきたのかさっぱりわかりません。
はじめはこの本を読みながら C 言語で作ってました。
自作エミュレータで学ぶx86アーキテクチャ コンピュータが動く仕組みを徹底理解！
しくみ
メモリやレジスタはすべて Redux の Store としていて、命令を実行するたびに Immutable な感じで新しいメモリやレジスタのオブジェクトを生成しています。 メモリやレジスタはそもそも Mutable なものなのでここはちょっと無理してる感がありました。
特にメモリは 1Byte ごとに描画する必要があり、React/Redux ではギガバイトのメモリとか夢物語でした 😇
アセンブリプログラムは Assemble ボタンをクリックすると裏側の Sinatra アプリに送られ、NASM というアセンブルでバイナリに変換し、それを Base64 エンコードして JavaScript に返しています。
おわりに
React/Redux でエミュレータ作る方法とか、JavaScript でバイナリを扱う方法とかは需要ないと思いますが別途書けたらなーと思ってます 📝
次はファミコンのエミュレータ作りたいです 😋
Footnotes
-
i386 なんて言ったりもします。 ↩