GoではじめるWebAssebmly その2「JavaScriptイベントハンドリング」

WebAssebmlyはWebブラウザ上でバイナリファイル（テキスト形式もあり）を実行できる環境です。JavaScriptと異なりコードの漏洩がなく、実行速度も高速というのがメリットです。

WebAssebmlyは元々Rustで開発することが多かったですが、最近では様々なプログラミング言語が対応しています。その一つがGoです。Go 1.11からWebAssembly向けにもコンパイルできるようになっています。

一般的なWebAssemblyはDOMやネットワーク操作が行えません。それに対してGo 1.11ではJavaScript APIを使えるようにした syscall/js パッケージを用いることで、DOMやネットワーク操作を可能にしています。

そこで今回はDOMのクリックイベントをWebAssemblyで扱う方法を紹介します。

まずGoのコードです。今回はmain.goとしています。最初に syscall/js をインポートします。

そして、トップレベルのDOMであるドキュメントを作成します。

IDやクラスを使ってDOMを取得します。

取得したボタンに対してコールバックを指定します。

ボタンのクリックイベントにコールバックを指定します。

最後にプログラムが終了しないようにチャネルを待ち受けます。

これで完成です。全体のコードは次のようになります。

HTMLを準備する

HTMLはボタンを貼り付けだけのものです。

JavaScriptファイルを用意する

専用のJavaScriptファイルを設置します。

Goをコンパイルする

最後にGoファイルをコンパイルして WebAssebmly化します。

サーバを立ち上げる

Webサーバは goexec を用います。インストールは go get -u github.com/shurcooL/goexec になります。インストールされたら以下のコマンドでHTTPサーバを立ち上げます。

これで http://localhost:8080/ でアクセスできます。

試す

では実際に試しているところです。ボタンをクリックすると開発者ツールのコンソールにログが出力されます。

このようにしてGoのコードからイベントハンドリングができます。

---

Goを使うことでWebアプリケーションをまるっとWebAssemblyで提供できる可能性が出てきました。高速、かつコードの隠蔽化も実現しますのでWebアプリケーションの可能性を飛躍的に向上できるでしょう。

ぜひトライしてみてください。