グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



Go WebAssemblyでブラウザ上でGoを実行する その2 Go側からJavascriptを操作する

前回の記事「GoのコードをWebAssenblyにコンパイルしてブラウザ上でGoを実行する」では、コンパイル済みのGoのプログラムをブラウザ上で実行しただけでした。
今回は、さらにGoのプログラム側からJavascriptを操作してみようと思います。

syscall/js

Goのプログラム側からJsにアクセスするには syscall/js ライブラリを利用します。

Package js gives access to the WebAssembly host environment when using the js/wasm architecture.

日本語訳:jsパッケージは、js/wasmアーキテクチャを使用する際に、WebAssemblyホスト環境へのアクセスを提供します。syscall/js

syscall/jsにはブラウザ側のグローバルオブジェクトを取得する機能があり、このグローバルオブジェクトを介してGoとJavascriptでやり取りが可能になります。

Go側からJavascriptのDOMを作成して表示してみる

今回のファイル構成は以下のようになっています。

main.go

index.htmlを表示するためのwebサーバです。

docs/index.html

wasm_exec.jsを読み込み、src/webassembly.goをビルドしたbuild.wasmを実行しています。

src/webassembly.go

 syscall/js をimportしてDOM要素を作成し、html側のbodyに追加します。

ビルドコマンド

ここまでの状態でmain.goを起動すると以下のようにwebで表示されます。

Go側で作成したDOMが追加されていることが確認できました。
ただ、これでは動きがないので、次はGo側でDOMにイベントを設定してみます。

カウンターを動かす

以下のファイルだけ内容を変更して、カウンターを動かしてみます。

src/webassembly.go

ビルドしてサーバを起動して動作を試します。

カウンターが動きました!

さいごに

Go側からグローバルオブジェクトを介してJavascriptの操作を行えました。
普段JavascriptでDOMを操作する感覚のまま扱えますが、Goの型とJavascriptの型の 変換対応を意識しないといけないのでちょっと注意が必要かなと思いました。
以下に対応表を記載しておきます。

Goの型 Javascriptの型
js.Value [its value]
js.Func function
nil null
bool boolean
integers and float number
string string
[]interface{} new array
map[string]interface{} new object

今回のような処理ではGoで書く良さが特にないので次回はjsからGoの関数を使ってみようと思います。

The following two tabs change content below.

竹内 和也

事業開発部 web application engineer
大学卒業後、Web系ベンチャー企業でシステムエンジニアを経て、2009年にアーティスへ入社。 システムエンジニアとして多くの大学・病院・企業・自社のwebシステム開発に携わる。 2020年より事業開発部として新規サービスの開発に従事している。 資格:LPIC3
この記事のカテゴリ

FOLLOW US

最新の情報をお届けします