Go言語+WebAssemblyで形態素解析をしてみた

こんにちは、ひがしです。
今回はWebAssemblyで形態素解析をしていきます。

他のGo言語でWebAssemlbyを試した記事はこちらから↓

Go言語でWebAssembly

Go言語 + WebAssemblyでHTTP requestを送信する

環境とか

今回の環境は以下になります。

• OS
  • manjaro Linux
• 言語
  • Go言語(go1.14.2 linux/amd64)
• shell
  • fish

諸準備

Hello Worldをしつつ、WebAssemblyのプロジェクトを立てましょう。

$ mkdir wasm-ma

$ cd wasm-ma

$ go mod init github.com/higashi000/wasm-test

go modの部分のurlは何でもいいです。
なんなら私は公開しないテスト用のプロジェクトを立てる時はexample.com にしてます。(だめだったらごめんなさい)

wasm_exec.jsを持ってくる

次にwasm_exec.jsを作業ディレクトリに持ってきましょう。
ここではfishとbashでちょっとコマンドが変わってきます。

fishの場合

$ set -x WHICHGO (go env GOROOT)

$ cp $WHICHGO/misc/wasm/wasm_exec.js .

bashの場合

$ WHICHGO=`go env GOROOT`

$ cp $WHICHGO/misc/wasm/wasm_exec.js .

Hello Worldをする

とりあえずHello Worldをしましょう。

GoのHello WorldとWebAssemblyを呼び出すコードを書いたHTMLを書きます。

main.go

index.html

次にmain.goをWebAssemblyにコンパイルしましょう。
コンパイルは以下のコマンドで行えます。

$ GOOS=js GOARCH=wasm go build -o main.wasm

このとき、コンパイルして出力されたWebAssemblyのファイル名とindex.htmlの6行目で読み込んでいるファイル名が一致しているよう注意してください。

ここまで来たらあとはhtmlをホストしてそこにアクセスするだけです。
今回はgoexec というツールを使用します。
goexecをインストールして以下のコマンドを実行しましょう。

$ goexec 'http.ListenAndServe(`:8080`, http.FileServer(http.Dir(`.`)))'

実行したらlocalhost:8080にアクセスしましょう。
アクセスしてF12キーを押し、ConsoleにHello WebAssembly!! と出力されていれば成功です。

形態素解析をするぞ

今回の本題である形態素解析に入っていきます。
今回はGo言語の形態素解析ライブラリであるkagomeを使用させていただきます。

やること

今回はHTMLの入力フォームの文字を形態素解析にかけていきたいと思います。
というわけでまずは入力フォームの文字をConsoleに表示してみましょう。

Go言語でHTMLの要素にアクセスするためにはsyscall/js パッケージが必要です。
そして、そこから入力フォームのidを指定してValueを取り出すことが出来ます。やってみましょう。

main.go

documentで全体のエレメントを取得し、そこからgetElementByIdで入力フォームを取り出します。
最後に.Get("value").String() で入力フォームの文字を文字列として取り出します。

HTMLも合わせて編集しましょう。
WebAssemblyの読み込み部分を関数化し、ボタンが押されたら読み込むようにしてみます。

実行すると以下のようになります。
いい感じに値が取れましたね。わーい。

文字列を形態素解析にかけていく

文字列を取得し、形態素解析にかけ、表示までやってしまいましょう。

main.go

index.html

新しくidがresultのdivタグを作り、そこにinsertAdjacentHTMLを使って形態素解析の結果を挿入しています。

実行するとこんな感じ。いいね。

ボタンのクリックを監視する

毎回main.wasmを読み込んでいては時間がかかってしまうので最初で読み込んであとはボタンのクリックを待つようにしましょう。

main.go

index.html

ここで注目する部分は

cb := js.FuncOf(func(val js.Value, args []js.Value) interface{} {
  // 省略

  return nil
})

とmain関数のselect{} です。

この部分は以下の記事を参考にさせていただきました。

https://golangtokyo.github.io/codelab/go-webassembly/?index=codelab#5

cb := の部分はコールバック関数です。
main関数のselect{} はプログラムを終了させないためのものです。

実行してみました。読み込みに時間がかかりますが、読み込み後はサクサク動いてくれます。

まとめ

今回はGo言語をWebAssemblyにコンパイルし、形態素解析を行ってみました。
ライブラリを使えるということで作れるものの幅がかなり広がりそうです。

今後も色々試してみます。