nownab.log

nownabe's daily posts

ReactとReduxでx86のエミュレータを作った

Posted on Sep 13, 2016

はじめに

こちらです。herokuの無料プランなので、起動に時間がかかる場合があります。 https://x86-emulator.nownabe.com/

レポジトリはこちらです。 https://github.com/nownabe/x86-emulator-js

この記事はこいつの紹介記事になります。アセンブリのことやCPUの仕組みやReact/Reduxの話はあまりでてきません。

スクリーンショット 2016-09-13 21.12.42.png (434.4 kB)

なに?

x86 CPUをエミュレートするやつです。ブラウザでx86の32bit1プログラム(バイナリ)を実行することができるJavaScriptのプログラムです。

といってもまだまだ未完成品で、命令などが全然足りてませんがある程度基本的な機能は実装できたので公開しました。 もし足りてないのがあればIssueください 😅

完全なPCを目指すというよりは、アセンブリ教育用のマイコンボード的位置づけのアプリケーションになっていて、レジスタやメモリの内容を表示できるようになっています。 また、そういう位置づけなのでバイナリを入力するのではなく、ブラウザでx86のアセンブリを入力してそれを直接実行できるという形にしています。ステップ実行できるのも特徴かと思います。

なぜ?

弊社の変態プログラマが「バイナリで短歌を詠みたい」2とわけのわからないことを言い出したのがそもそものきっかけです。 気づいたら作ってました。

まったく目的もなく、一体全体どこからモチベーションがわいてきたのかさっぱりわかりません。

はじめはこの本を読みながらC言語で作ってました。

しくみ

メモリやレジスタはすべてReduxのStoreとしていて、命令を実行するたびにImmutableな感じで新しいメモリやレジスタのオブジェクトを生成しています。 メモリやレジスタはそもそもMutableなものなのでここはちょっと無理してる感がありました。

特にメモリは1Byteごとに描画する必要があり、React/Reduxではギガバイトのメモリとか夢物語でした 😇

アセンブリプログラムはAssembleボタンをクリックすると裏側のSinatraアプリに送られ、NASMというアセンブルでバイナリに変換し、それをBase64エンコードしてJavaScriptに返しています。

おわりに

React/Reduxでエミュレータ作る方法とか、JavaScriptでバイナリを扱う方法とかは需要ないと思いますが別途書けたらなーと思ってます 📝

次はファミコンのエミュレータ作りたいです 😋


  1. i386なんて言ったりもします。 ↩︎

  2. http://kozos.jp/asm-tanka/ ↩︎