20250228-create-npm-package-with-wasm

Transcript

1. WASMをビルドして npmパッケージにする （個人的な作業進捗を添えて） 2025/02/28 新宿御苑.wasm kazto_dev
2. 自己紹介 • 横浜のSIerで働いている多摩地区在住 • 仕事ではマルチスタックと言う名のなんでも屋 ◦ メインはサーバサイド ◦ フロントエンドちょこっと ◦ Flutterスマホアプリちょこっと ◦ AWSちょこっと • 自社で一番WASMとZigとCloudflareを語れる人になりたい
3. やりたいこと • 昨年末のアドベントカレンダーでこんなん書きました
4. やりたいこと • fzfの検索で、migemo風にローマ字で日本語検索できたら便利そう • 本丸は、CLI • npmパッケージにして、フロントエンドとかでも使えたりしないか？ ◦ fzfもmigemoもGolang実装だし、WASMで配布できるのでは？
5. おおまかなステップ • 簡単なWASMをビルドしてnpmパッケージにする • npm installして使えることを確認する • 使いたい外部パッケージ (gomigemo, fzf) をWASMビルドする • どれをどう呼んだら連結させられるか（たぶんここまではまだ行けない）
6. 簡単なWASMをビルドしてnpmパッケージにする • 右のような簡単なソースをつくる • GOOS=js GOARCH=wasm go build -o add.wasm add.go main.go
7. npmパッケージをつくる • ./dist/ ディレクトリに下記を置く ◦ add.wasm ◦ $(go env GOROOT)/misc/wasm/wasm_exec.js ◦ index.js （右記） • npm publish
8. ・・・結果
9. 時間切れ • お目汚し失礼いたしました🙇 • さきほど知ったんですが、WASMにはまだDynamic Link Libraryみたいなしくみな いらしいですね