MENU

GopherJSを利用して、GoをJavaScriptに変換する

内山浩佑
Contents
  1. 概要
  2. GopherJSとは
  3. Goのインストール
  4. GopherJSのインストール
  5. 変換対象のGoプログラムを作成
  6. 変換されたJavaScriptを読み込む処理を実装
  7. GoをJavaScriptに変換
  8. 動作確認
  9. まとめ

概要

今回は、GoをWebブラウザ上で動作させるために、GopherJSを利用する方法を解説します。

他にも方法やツールはありますが、私が読んでいたオープンソースプロジェクトで使われていて興味を持ったため、今回はGopherJSについて調査しました。

公式のドキュメントを読んでも、ひとまず動作確認する方法が分かりにくかったため、本記事では、簡単なプログラムを動作させるところまでを解説しています。

GopherJSとは

GopherJS
https://github.com/gopherjs/gopherjs

GopherJSは、GoをJavaScriptに変換するツールです。
このことによって、GoプログラムをWebブラウザで実行できるようになります。
Cgoに対応していないという制約はあるようです。

Goのインストール

現状、GopherJSはGo 1.16以降のバージョンで動作します。
手元のPCでGoが入っていない場合は、Homebrewなどでインストールしてください。

もし、バージョンが異なるGoがすでに入っている場合は、
以下の手順で、GopherJS用のGoをインストールできます。

$ go get golang.org/dl/go1.16.3
$ go1.16.3 download
$ export GOPHERJS_GOROOT="$(go1.16.3 env GOROOT)"

GopherJSのインストール

GopherJSのインストールは、以下のコマンドで行なえます。

$ go get -u github.com/gopherjs/gopherjs

gopherjsコマンドが実行できるようになります。

$ gopherjs
GopherJS is a tool for compiling Go source code to JavaScript.

Usage:
  gopherjs [command]

Available Commands:
  build       compile packages and dependencies
  doc         display documentation for the requested, package, method or symbol
  get         download and install packages and dependencies
  help        Help about any command
  install     compile and install packages and dependencies
  run         compile and run Go program
  serve       compile on-the-fly and serve
  test        test packages
  version     print GopherJS compiler version

Flags:
  -h, --help   help for gopherjs

Use "gopherjs [command] --help" for more information about a command.

変換対象のGoプログラムを作成

以下のようにGoプログラムを作成します。

package main

import "github.com/gopherjs/gopherjs/js"

func main() {
    js.Global.Set("pet", map[string]interface{}{
        "New": New,
    })
    js.Global.Get("document").Call("write", "Hello world!")
}

type Pet struct {
    name string
}

func New(name string) *js.Object {
    return js.MakeWrapper(&Pet{name})
}

func (p *Pet) Name() string {
    return p.name
}

func (p *Pet) SetName(name string) {
    p.name = name
}

js.Global が記述されている部分が、Goからのやりとりの部分になります。

js.Global.Get("document").Call("write", "Hello world!")`

の部分は、Hello world!という文字列を表示させる処理を記述しています。

js.Global.Set("pet", map[string]interface{}{
        "New": New,
    })

の部分は、Goで定義したPet構造体の処理をJavaScriptから呼び出すための設定です。
JavaScriptで、pet.New('Maru').Name() という記述で処理を呼び出せるようにしています。

変換されたJavaScriptを読み込む処理を実装

以下のような index.html ファイルを作成します。

<html>
<head>
    <script src="./test.js"></script>
    <script src="./main.js"></script>
</head>
</html>

test.jsは、Goプログラムから変換したJavaScriptファイルです。

main.jsは、test.jsに定義されたスクリプトを呼び出す用のJavaScriptファイルです。
以下のような、内容になっています。

alert(pet.New('Maru').Name());

GoをJavaScriptに変換

以下のようなコマンドで、GoをJavaScriptに変換します。

$ gopherjs build -o test.js

実行すると test.js が出力されます。

動作確認

index.htmlをブラウザで開くと、以下のような動作が確認できます。

  • 「Maru」という文字列がalertで表示される
  • 「Hello world!」という文字列がブラウザに表示される

以上で、GoをJavaScriptに変換して動作確認できるようになりました。

まとめ

GopherJSで、Goの簡単なプログラムをJavaScriptに変換して、ブラウザ上で実行するところまでを解説しました。
Goで書かれたプログラムをブラウザでも使用したい場合などに便利ですね。機会があれば、使っていきたいですね。

AUTHOR
uchiko
uchiko
記事URLをコピーしました