Go

【GopherJS入門】GoのソースコードからJavaScriptを生成

【GopherJS入門】GoのソースコードからJavaScriptを生成

こんにちは。現役エンジニアの”はやぶさ”@Cpp_Learningです。Go言語(Golang)やフロントエンドを勉強中です。

GoのソースコードからJavaScriptを生成できるGopherJSについて勉強したので、備忘録も兼ねて本記事を書きます。

GopherJSとは

GopherJSについて、公式ではGoからJavaScriptへのコンパイラと紹介しています。

GopherJS – A compiler from Go to JavaScript

GopherJS compiles Go code (golang.org) to pure JavaScript code. Its main purpose is to give you the opportunity to write front-end code in Go which will still run in all browsers.

引用元:gopherjs|公式GitHub

実際に使ってみると、以下の特徴があるので、個人的にはGo to JavaScriptを実現するライブラリ兼アプリという表現の方が”しっくり”きます。

GopherJSの特徴
  • GopherJSの作法に従って、Goのプログラムを書く必要があり、ライブラリまたはフレームワークという印象
  • コンパイラ以外の機能もCLIで提供

GopherJS入門 -環境構築-

最初にDockerでGo開発環境を構築します。以下の記事も参考にして下さい。

WSL2-Docker-VSCode-Golang
【Go言語(Golang)】WSL2とDockerで最高のGo開発環境をつくるWSL2 + Docker + VS Code の Remote – Containers のGo開発環境の構築方法とコンテナを活用したWebアプリ開発の簡単な実践チュートリアルについて解説した記事です。...

まずは適当な場所にプロジェクトフォルダ:docker-gopherjs を作成します。最終的には、以下の構成になります。

DockerでGo開発環境構築

以下のコマンドでGo公式イメージをDocker Hubからpullします。Goの最新バージョンを使いたい人は、タグを 1.17 から latest に変更して下さい。

$ docker pull golang:1.17

ホスト(Windowsマシンとか)とコンテナ間のシェアフォルダで作業するのが好きなので、以下のコマンドでコンテナを起動します。

$ docker run -v [host側のディレクトリパス:コンテナ側のディレクトリパス] -it [イメージ:タグ]

今回は以下の通りです。

$ docker run -v C:/Users/hayab/workspace/docker-gopherjs:/go/src/app -it golang:1.17

以降からはコンテナに潜って作業します。VSCode拡張機能の Docker 使うのがオススメです。

GopherJSパッケージのインストール

最初に go.mod を作成します。

$ go mod init example.com/myapp

続いて gopherjs をインストールします。

$ go get github.com/gopherjs/gopherjs

gopherjs コマンドを叩いて、コマンド説明などが表示できれば環境構築完了です(下図参照)。

GopherJS入門
スポンサーリンク

GopherJS入門 -GoからJavaScriptを生成-

以降からはGoのコード書いていきます。

JavaScriptの関数を呼ぶ

js.Global.Call()でJavaScriptの関数を呼ぶことができます。例えば、alert関数を呼ぶときは、以下のように書きます。

コンソール出力

コンソール出力は、Go標準パッケージのfmtがそのまま使えます。

JavaScriptのdocument.hoge()

JavaScriptでいう以下のコードは、js.Global.Get().Call()で対応できます。

  • document.write(“Hello world!”)
  • document.addEventListener(‘click’, func())

例えば、以下の通りです。

Goの関数をJavascriptから呼ぶ

Goで作成した自作関数をJavascriptから呼ぶときは、js.Global.Get().Set()を使います。

上記のコードをapp.goという名で保存します。

GopherJS入門 -GoからJavaScriptを生成-

先ほど保存したのapp.goからJavaScriptを生成します。

ビルド -Go to JavaScript-

以下のコマンドでapp.goからapp.jsを生成できます。

$ gopherjs build app.go -o ../js/app.js

簡単ですね。

コマンドを忘れたときは、-hを使えば、ガイドしてくれます。

$ gopherjs build -h

index.html

最後に適当なindex.htmlを作成します。

適当なブラウザでindex.htmlを開いて、動作確認したときの様子が以下です。

はやぶさ
はやぶさ
本当にgoからJavaScriptを生成できた!感動した!!

まとめ

GoのソースコードからJavaScriptを生成できるGopherJSについて、色々試した内容をまとめました。本記事が、誰かの参考になれば、嬉しいです。

ただ正直に言えば、Golangもフロントエンドも勉強中なので、中途半端な知識で本記事を書いています。なので不適切な記述があれば、優しく教えて頂けると嬉しいです。

はやぶさ
はやぶさ
バックエンドだけでなく、フロントエンドも強くなって、クールなアプリを開発したい!頑張ります!!

以下 オススメ書籍を紹介

PICK UP BOOKS

  • 数理モデル入門
    数理モデル
  • Jetoson Nano 超入門
    Jetoson Nano
  • 図解速習DEEP LEARNING
    DEEP LEARNING
  • Pythonによる因果分析
    Python