福野泰介の一日一創

ruby4ijを早速使っていただきました！「風船 Ruby 版 (ruby4ij)/Kidspod;」

ただ、なかなかにやっかいな開発環境づくり。開発するために必要なツールが多く、それぞれがバージョンアップするので環境構築方法が変わってしまったりして鬼門です。 そこで便利なweb技術。クラウド処理もありですが、IchigoJam web でも使っている、エッジ技術、WebAssemblyを使ったパパっと手元で軽快動作を目指します。

手始めに、こちら学習用ミニCコンパイラ「ci0」を移植して作った「webci0」

「webci0 - mini C compiler ci0 in WebAssembly」
C言語風に書いたプログラムをスタックマシンなVM用マシン語に変換、インタプリタとして実行します。標準関数は文字列表示のputstrと数表示のputnumのみ。メイン部分は500行ちょっとのオープンソース、いろいろ改造して遊んでみましょう！

WebAssembly用に標準ライブラリ系を準備して、clang, llvm-link, llc, s2wasm, wat2wasm の手順でコンパイル。16KBのWebAssembly用バイナリ ci0.wasm ファイルができあがり！（参考、WebAssembly開発環境 WABT、コンパイル用シェルスクリプト）

printfは「Linuxをはじめよう！:printfを自作してみる」を使わせてもらいましたが、WebAssembly環境で複数の引数の時にうまく動いていないので ci0.c では回避策をとっています。

ブラウザ上のコードエディタとして Ace を使用。快適に動作するので、普段使う標準エディタにしてもいいくらい！ カラーテーマも「Ace Kitchen Sink」からC言語のハイライトに合う感じのものを選んでみました。

ci0のスタックマシンはWebAssemblyのマシン語ともよく似ているので、WASMコンパイラとして育てるのもおもしろそう！
Cコンパイラを作ってみたい人、自作言語を作ってみたい人、WebAssemblyでの開発、オススメです！
（WASM、現時点では、goto非対応、例外非対応な点に注意！）

WebAssemblyマシン語入門
- ブラウザだけでOK！ 1+1からはじめる、WebAssemblyマシン語入門その1
- プログラミングはプログラミングで楽をする、WebAssemblyマシン語入門その2
- もっと楽するコンパイラ、WebAssemblyマシン語入門その3

IchigoJam web（ブラウザで動くIchigoJam）で使っているお気に入り技術、WebAssembly。
マシン語をバイナリで直接書いてみる第一回、初歩的なアセンブラ体験する第二回に続く第三回のテーマは、コンパイラです。

おさらいとして、前回のアセンブラで、param+10 を計算するプログラムを作ってみましょう。

正解はこちら

get_local $0 i32.const 10 i32.add end

paramが1の時、ちゃんと答は11と出ます。では、param+100 を計算するプログラムに変えてみてください。

おや、おかしいですね！？では、128にすると、今度はコンパイルエラーになってしまいます。

WebAssemblyのマシン語での数値は大きさによって1byteから5byteまで長さを変えて表します。最上位bitが1なら、次のbyteを読んで上位に追加していく仕組みになっています。 つまり、1byteで表せる数は、7bitで表せる-64〜63まで。100（2進数で1100100）はこの範囲を超えているので、上位bitを1にして、残りのbitを次のbyteで表すので、1 1100100 (e4) と 0 0000000 (00) となります。

WebAssemblyのコードを書き換えて試してみましょう。

20 0 41 e4 0 6a b

i32.const を表す 41 の後の 64 (=10進数の100) を、e4 に変えてその後ろに 0 を加えて「RUN」
ちゃんと答がでました！

このような計算をいちいち手でやらなくて済む方法は？・・・そうです、プログラムですね。
命令表から手打ちするのも面倒なので、短く楽にプログラムを書けるようにするソフトをつくりましょう。

コンパイラはじめのいっぽ
「P 3 +」と空白区切りで書いたら対応するアセンブリ言語を出力するものです。
※ P は、パラーメータ0を意味することにします

compilebtn.onclick = function() { var src = srcprg.value.split(" "); var asm = []; for (var i = 0; i < src.length; i++) { var s = src[i]; if (s == "P") { asm.push("get_local 0"); } else if (s == "+") { asm.push("i32.add"); } else if (parseInt(s) == s) { asm.push("i32.const " + s); } } asm.push("end"); srcasm.value = asm.join("\n"); }

簡単ですね。このようなソフトをコンパイラといいます。
掛け算とかいろいろ足したものがこちら「WebAssembly poor compiler」です。

「WebAssembly poor compiler」

「P 3 +」と入力し「COMPILE」「ASSEMBLE」「RUN」と順に押して、答が出してみましょう。

課題：パラメータを自乗して1を足すプログラムをつくってみよう！

アセンブラも上記、大きな数値にも対応するよう改良してあるので、プログラムを確認してみてください。

次はこのコンパイラをもう一歩進めて、もっと自然な数式で書けるように改良してみます。
待ちきれない人は、どんどん進めちゃってください！

WebAssemblyマシン語入門
- ブラウザだけでOK！ 1+1からはじめる、WebAssemblyマシン語入門その1
- プログラミングはプログラミングで楽をする、WebAssemblyマシン語入門その2
- もっと楽するコンパイラ、WebAssemblyマシン語入門その3

- 連載、IchigoJamではじめる、Armマシン語入門
1. はじめてのマシン語
2. ハンドアセンブルで超速計算！
3. マシン語メモリアクセスで画面超速表示！
4. マシン語でLEDを光らせよう！
5. 楽しさ広がるマルチバイトメモリアクセスとスタック
6. マシン語使いこなしTIPS
7. カジュアルに使うインラインマシン語
8. アセンブラを使って楽しよう
9. マシン語で高速SPI
10. マシン語を制するもの時間を制す
11. 画面をイチゴで埋め尽くす12の方法
12. レジスタ不足に上位レジスタとスタック操作
13. コンパイラはじめのいっぽ、EVAL実現法とマシン語生成
14. サイズを取るかスピードを取るか、割り算のアルゴリズムとマシン語実装
15. マシン語化で1万倍速!? セットで学ぶアルゴリズムとコンピューター

links
- WebAssembly Advent Calendar 2017 - Qiita 参加！

前回「ブラウザだけでOK！ 1+1からはじめる、WebAssemblyマシン語入門その1」では、マシン語の命令表からひとつずつ選んで数を書いてみました。 プログラムをこのようにマシン語にする作業のことをアセンブル（英語で組み立てを意味する）と言います。

数が多くなってくると、こうして手で変換するのは大変なので、プログラムを作って自動化しましょう。 今使っている環境の範囲だけで動く簡易的なアセンブラ「WebAssembly poor assembler」をJavaScriptで作りました。

「WebAssembly poor assembler」

こちら、前回はマシン語だった param+1 を計算するプログラムのアセンブリ言語プログラムです。

get_local $0 i32.const 1 i32.add end

「ASSEMBLE」ボタンを押すと、下に数字の並びに変換され、RUNで動かせます。

20 0 41 1 6a b

試しに、i32.add を i32.mul に書き換えて、ASSEMBLE、RUNしてみましょう。
i32.const 1 を i32.const 5 に書き換えて、ASSEMBLE、RUNしてみましょう。
param に、10と入力しなおして、RUNしてみましょう。

ちょっとだけ複雑な計算をさせてみます。

get_local $0 i32.const 5 i32.mul i32.const 1 i32.add end

i32.const 1 と i32.add を書き加えて、n*5+1 を計算するプログラムにしました。
ASSEMBLE、RUNしたり、paramを書き換えてみましょう。

このようにアセンブルを自動化するプログラムのことを、アセンブラといいます。
（手でアセンブルすることをハンドアセンブルといい、アセンブラがない時代の必須テクニックでした）

次はコンパイラを作ってみます。お楽しみに！

WebAssemblyマシン語入門
- ブラウザだけでOK！ 1+1からはじめる、WebAssemblyマシン語入門その1
- プログラミングはプログラミングで楽をする、WebAssemblyマシン語入門その2
- もっと楽するコンパイラ、WebAssemblyマシン語入門その3

コンピューターの気持ちに近づけるマシン語。
IchigoJamだけで始めるArmマシン語入門に続き、
ブラウザだけで始めるWebAssemblyマシン語入門その1です。

コンピューターは高速に計算する機械（＝マシン）です。

メモリ（＝記憶装置）に2つの数があったら足し算する電子回路があるとします。
1と1をメモリに書いたら瞬時に2が得られます。
（参考「なぜコンピューターは計算が速いのか？ 電気回路で計算ができる謎を解く」）

足し算だけだと使いみちが限られるので、引き算・掛け算や、計算順序を変える機能などを追加します。
機能を区別する方法は何でもいいのですが、計算が得意なコンピューターのために、それぞれの機能に数を割り当ててあげると効率的です。
やってほしい計算を表す数をずらずらと並べたもの、これがマシン語プログラムとなります。

IchigoJamで使っているのはArmという会社が考えたコンピューターなので、Armマシン語。
今回使うWebAssemblyマシン語は、ブラウザで動くことにした仮想的なコンピューターです。
仮想的とは、マシン（ハードウェア）をソフト（＝プログラム）で表現したものを言います。

とりあえず、動かしてみましょう。
「WebAssembly testenv」を開き、「RUN」を押すと、2とでます。

「WebAssembly testenv」で、1+1=2 をマシン語プログラムでつくり、動かした様子

「param」に1と書いてあるものを、10に変えて、もう一度「RUN」を押してみましょう。
きっと、今度は11と出ます。
（もし動かないならば、きっとお使いのブラウザがWebAssemblyに対応していません！Chrome/FireFox/Safariの最新版をダウンロードしましょう）

20 0 41 1 6a 0b

実はこれがWebAssemblyのマシン語です。(0〜9とa〜fの15種類の文字を使った16進法表記）

右の表を照らし合わせてみると・・・
20 0 ・・・ get_local $0 （渡された数をメモリに書くよ）
41 1 ・・・ i32.const 1 （1をメモリに書くよ）
6a ・・・ i32.add （メモリに書かれた2つの数を足してメモリに書くよ）
0b ・・・ end （プログラムを終わって、メモリに書かれたものを返すよ）

と解読できます。

10-1を計算させるには、i32.add (6a) の代わりに i32.sub (6b) を使います。

20 0 41 1 6b 0b

計算できました！

コードの上に書いてある、WebAssmeblyマシン語であることを表すIDなどと組み合わせて、.wasmファイルを作成すれば、ブラウザ上で高速に動くプログラムができるわけです！

右の表にあるものはもちろん一部です。
興味があればWebAssemblyの仕様書を覗いてみましょう。

ひとつひとつ表から照らし合わせてプログラムを書くのは大変なので、普通はこの作業をプログラムで自動化します。
アセンブラとか、コンパイラなどと呼ばれるソフトで、その数だけプログラミング言語があるわけですね！

マシン語が分かれば自分だけのプログラミング言語を作ることもできちゃいます！
日本生まれで世界に広がるプログラミング言語 Ruby に続こう！

WebAssemblyマシン語入門
- ブラウザだけでOK！ 1+1からはじめる、WebAssemblyマシン語入門その1
- プログラミングはプログラミングで楽をする、WebAssemblyマシン語入門その2
- もっと楽するコンパイラ、WebAssemblyマシン語入門その3