Slide 1

Slide 1 text

WASMをビルドして npmパッケージにする (個人的な作業進捗を添えて) 2025/02/28 新宿御苑.wasm kazto_dev

Slide 2

Slide 2 text

自己紹介 ● 横浜のSIerで働いている多摩地区在住 ● 仕事ではマルチスタックと言う名のなんでも屋 ○ メインはサーバサイド ○ フロントエンドちょこっと ○ Flutterスマホアプリちょこっと ○ AWSちょこっと ● 自社で一番WASMとZigとCloudflareを語れる人になりたい

Slide 3

Slide 3 text

やりたいこと ● 昨年末のアドベントカレンダーでこんなん書きました

Slide 4

Slide 4 text

やりたいこと ● fzfの検索で、migemo風にローマ字で日本語検索できたら便利そう ● 本丸は、CLI ● npmパッケージにして、フロントエンドとかでも使えたりしないか? ○ fzfもmigemoもGolang実装だし、WASMで配布できるのでは?

Slide 5

Slide 5 text

おおまかなステップ ● 簡単なWASMをビルドしてnpmパッケージにする ● npm installして使えることを確認する ● 使いたい外部パッケージ (gomigemo, fzf) をWASMビルドする ● どれをどう呼んだら連結させられるか(たぶんここまではまだ行けない)

Slide 6

Slide 6 text

簡単なWASMをビルドしてnpmパッケージにする ● 右のような簡単なソースをつくる ● GOOS=js GOARCH=wasm go build -o add.wasm add.go main.go

Slide 7

Slide 7 text

npmパッケージをつくる ● ./dist/ ディレクトリに下記を置く ○ add.wasm ○ $(go env GOROOT)/misc/wasm/wasm_exec.js ○ index.js (右記) ● npm publish

Slide 8

Slide 8 text

・・・結果

Slide 9

Slide 9 text

時間切れ ● お目汚し失礼いたしました🙇 ● さきほど知ったんですが、WASMにはまだDynamic Link Libraryみたいなしくみな いらしいですね