GolangによるWebアセンブリのターゲット化入門

10121 ワード
go webassembly テキストリンク

Heads up! This post originally appeared on BradCypert.com but has been modified for your viewing pleasure on Dev.to!
2015年に、GoogleはDART VMがクロムに組み込まれないと発表しました.これは私にとって衝撃的な一日でした.ダーツの初めから、私は、私たちがWebクライアントのためのJavaScriptにファーストクラスの代替品を持っていることを願っていました.
私は間違って取得しないでください、私はJavaScriptのトンを書いているが、それは私が必ずしも私が言語のようなことを意味することを意味しません.TypeScriptは、ブラウザは単に実行することができます何かではないが、私のための驚異を行っているが、まだJavaScriptに他の選択肢のための憧れを残した.
Webアセンブリを入力します.私が最初にWebアセンブリを聞いたとき、私の気持ちは興奮しなかった.私は大学でアセンブリの小さなビットを書いていたとクロムのdevtoolにシャイニングアセンブラの指示のアイデアは後方に一歩のように鳴った.ありがたいことに、ウェブアセンブリは単にアセンブラの指示をChromeまたはFirefoxに押し付けるだけではありません.
Webアセンブリは、JavaScriptにコンパイルされているtypescriptと同様に、ビルドターゲットとして別の言語によって対象とされる言語です.この例では、GalangとターゲットのWebアセンブリをプラットフォームとアーキテクチャとして使用しますが、Webアセンブリを対象とする他の言語もあります(Rust、C、C++をいくつか挙げます).
なぜWebアセンブリを使用しますか?
JavaScriptのようにWebアセンブリが問題を解決するツールであることを認識することは重要です.Webアセンブリは、高速/追加、Webアセンブリは、実際に構築するときに、実際には非常に小さく、事前に最適化されたバイナリを生成することができます.
Webアセンブリが手動メモリ管理を必要とすることに注意してください.
仲間割れできますか.
これは私の意見で非常に関連した質問です.たぶん、あなたは反応でユーザーインターフェースを構築し続けるでしょうが、可能なパフォーマンス利得のためにどんなビジネスロジックもwebassemblyに移行することに興味があります.たぶん、あなたはRust、Go、CまたはC++(Webアセンブリを対象とする他の言語)で書かれたサーバーからいくつかのコードを再利用したいだけです.JavaScriptとWebアセンブリの両方を混同するのに意味がある多くのユースケースがあります.ありがたいことに、彼らは相互運用できるように作られています.

簡単なWebアセンブリプログラム
ビルドプロセス中にWebアセンブリを対象とする非常に、非常に基本的なプログラムをコーディングすることから始めましょう.コンソールに「hello world」を印刷して起動しましょう.
Create a new directory to house our project. I used `mkdir go-wasm`, but you can use whatever you'd like.

cd into your newly created directory and run `go mod init github.com/your-name-here/go-wasm`. Update your command to use your name or username and if you chose a different folder name then update that as well.

We'll create a new file named main.go and add the following to it:

package main
import (
    "fmt"
)
func main() {
    fmt.Println("Hello World!")
}
このファイルに特別なことは何もないことに気づくでしょう.これはいつもの例ではありませんが、この例では非常に普通のコードを探しています.実際には、これを実行して自由に動作し、それを確認してください.
We'll have to add a Web Assembly Support file to run our code. Thankfully, Golang ships with one. We can just run `cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .`

Next we'll need to setup an HTML file to be rendered to browser. Additionally, we'll include some JavaScript to load and execute our Web Assembly program.

<html>
  <head>
    <meta charset="utf-8" />
    <script src="wasm_exec.js"></script>
    <script>
      const go = new Go();
      WebAssembly.instantiateStreaming(
        fetch("main.wasm"),
        go.importObject
      ).then(result => {
        go.run(result.instance);
      });
    </script>
  </head>
  <body></body>
</html>
私たちのスクリプトは、このHTMLファイルの最も興味深い部分です.我々の最初のスクリプトはステップ4からwasm_exec.jsファイルをロードします、一方、我々の第2のスクリプトは我々のウェブ・アセンブリ命令をフェッチして、実行します.
Our last step is to build out our `main.wasm` file. We can do that simply by setting a few flags before running our build command: `GOOS=js GOARCH=wasm go build -o main.wasm`. You'll also notice that we're specifying our output filename here, too!
すべてのセットアップでは、しかし、あなたはフィットを参照してくださいHTTPサーバー上でこのディレクトリを提供することができます.推奨が必要な場合は、goexecパッケージを使用して任意のGOコマンドを実行することができます.インストールするには、go get -u github.com/shurcooL/goexecと簡単なHTTPサーバーを実行します
私たちのサーバーが稼働しているので、localhostに行きます:8080(またはあなたのサーバーアドレスが何であれ)、空白の白い画面が表示されるはずです(我々はそれをすぐにするでしょう).今のところ、devtoolを開き、コンソール出力で「Hello World」を探します.そこにあるならば、あなたは成功して、構築目標としてウェブアセンブリを使っている試みプログラムを走らせました.

Galang/Washによる要素の追加
デモが行く限り、これは私が提供できる最も屈辱的なものの一つです.我々はそれを修正しようとしている(心配しないで、まだ何もクレイジー).私たちの計画は、Webアセンブリを介してWebページにいくつかの要素を追加し、それらにいくつかのプロパティを設定することです.次のコードを変更して起動しましょう.
package main
import (
    "fmt"
    "syscall/js"
)
func main() {
    fmt.Println("Hello World!")
    document := js.Global().Get("document")
    p := document.Call("createElement", "p")
    p.Set("innerHTML", "Hello WASM from Go!")
    p.Set("className", "block")
    styles := document.Call("createElement", "style")
    styles.Set("innerHTML", `
        .block {
            border: 1px solid black; color: white; background: black;
        }
    `)
    document.Get("head").Call("appendChild", styles)
    document.Get("body").Call("appendChild", p)
}
ああ!我々の変化を語りましょう
我々は、新しい輸入(goexec 'http.ListenAndServe(:8080, http.FileServer(http.Dir(.)))')を加えました.これは、ブラウザドキュメントを取得するなどJavaScript関連のTidBitsとのインターフェイスを支援する関数へのアクセスを提供します.我々の主要な方法では、我々は正確にそれをします.次に、ドキュメントを活用します.新しい段落要素を作成する呼び出し.最後に、新しく定義された段落要素にいくつかのプロパティを設定します.
我々は、スタイル要素とすぐ後に同じことをします.この場合、innerhtmlをCSSクラスを適用するよう設定します.最後に、ドキュメントの先頭と本体を取得し、スタイルと段落要素をそれぞれ追加します.
私たちの変更点で、我々はsyscall/jsを介して当社のWebアセンブリの手順を再構築することができますGOOS=js GOARCH=wasm go build -o main.wasmを介して我々の変更を確認するサーバーを更新します.私たちは、ドキュメントのブラックボックスで「GOからこんにちはWASM」を見なければなりません.多田🎉!

Ready to learn something new? You can find more tutorials on BradCypert.com!!
あなたの人生を容易にする2020年から3 JavaScript機能
react-routerページを移動するときにスクロール上部に配置