質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

Q&A

解決済

1回答

827閲覧

WebAssemblyでGoの関数をブラウザのJavaScriptから呼び出す

womo

総合スコア6

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

0グッド

0クリップ

投稿2023/04/20 02:31

実現したいこと

WebAssemblyでGoの関数をブラウザのJavaScriptから呼び出したいのですが、
できないです。なかなか前に進めないですね。
ご教授頂けるとうれしいです。

前提

VisualStudioCode Version: 1.77.3
go version go1.19.1

モジュールの構成は以下です
C
└── study
└──src

├── index.html
├── main.go
├── main.wasm
├── wasm_exec.js
└── .vscode
└── settings.json

発生している問題・エラーメッセージ

該当のソースコード
ret = goIncrement(value)
のところで以下のエラー

DebugConsole

1Uncaught ReferenceError ReferenceError: goIncrement is not defined 2 at increment (C:\wom\dentaku\index.html:47:13) 3 at onclick (C:\wom\dentaku\index.html:53:61)

該当のソースコード

main.go

1package main 2 3import ( 4 "strconv" 5 "syscall/js" 6) 7 8func increment(this js.Value, args []js.Value) any { 9 counter := js.Global().Get("document").Call("getElementById", "counter") 10 counterValue, err := strconv.ParseInt(counter.Get("textContent").String(), 10, 64) 11 if err != nil { 12 return map[string]any{"error": err.Error()} 13 } 14 counterValue += int64(args[0].Int()) 15 counter.Set("textContent", counterValue) 16 return map[string]any{"message": counterValue} 17} 18 19func main() { 20 js.Global().Set("goIncrement", js.FuncOf(increment)) 21 select {} // keep running 22}

index.html

1<!doctype html> 2<!-- 3Copyright 2018 The Go Authors. All rights reserved. 4Use of this source code is governed by a BSD-style 5license that can be found in the LICENSE file. 6--> 7<html> 8 9<head> 10 <meta charset="utf-8"> 11 <title>Go wasm</title> 12</head> 13 14<body> 15 <!-- 16 Add the following polyfill for Microsoft Edge 17/18 support: 17 <script src="https://cdn.jsdelivr.net/npm/text-encoding@0.7.0/lib/encoding.min.js"></script> 18 (see https://caniuse.com/#feat=textencoder) 19 --> 20 <script src="wasm_exec.js"></script> 21 <script> 22 if (!WebAssembly.instantiateStreaming) { // polyfill 23 WebAssembly.instantiateStreaming = async (resp, importObject) => { 24 const source = await (await resp).arrayBuffer(); 25 return await WebAssembly.instantiate(source, importObject); 26 }; 27 } 28 29 const go = new Go(); 30 let mod, inst; 31 WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => { 32 mod = result.module; 33 inst = result.instance; 34 document.getElementById("runButton").disabled = false; 35 }).catch((err) => { 36 console.error(err); 37 }); 38 39 function increment(value) { 40 console.clear(); 41 ret = goIncrement(value) 42 console.log(ret) 43 } 44 </script> 45 <div id="counter">0</div> 46 <button onClick="increment(1);" id="runButton" disabled>+1</button> 47</body> 48 49</html>

補足情報(FW/ツールのバージョンなど)

エディタ:Visual Studio Code v.1.77.3
OS:Windows10 Pro
Goのバージョン:1.19.1

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

go.run(inst)に相当する記述がJavaScriptにありません。
そうなるとGo側の実装は実行されていないことになります。

慣れないうちはprintln("start")をメインの先頭にでも書いておきましょう。

WASMのロード&ランサンプルコード

(WebAssembly.instantiateStreamingはもうメジャーブラウザはみんなサポートしたのでポリフィルの必要は無さそう)

javascript

1(async () => { 2 const go = new Go(); 3 let result = await WebAssembly.instantiateStreaming( 4 fetch("main.wasm"), 5 go.importObject 6 ); 7 go.run(result.instance); 8})();

投稿2023/04/20 10:10

編集2023/04/20 10:47
nobonobo

総合スコア3367

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

womo

2023/04/21 02:24

今回もお世話になりました。 もっともっと勉強しないといけないですね。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問