Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20250228-create-npm-package-with-wasm
Search
kazto
February 28, 2025
Programming
1
79
20250228-create-npm-package-with-wasm
kazto
February 28, 2025
Tweet
Share
More Decks by kazto
See All by kazto
アイカツ!から学ぶビジネスパーソンとしての姿勢 / learn-the-attitude-of-businessperson-from-aikatsu
kazto
0
160
C言語でオブジェクト指向プログラミング / object-oriented-in-c
kazto
1
870
Golangでwget劣化クローンをつくる / wget clone with golang
kazto
1
500
登壇を応援する会忘年LT_今からやぞ_.pdf
kazto
2
4.4k
Other Decks in Programming
See All in Programming
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
420
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
550
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
230
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
230
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
320
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
770
構文解析器入門
ydah
7
2k
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
280
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Docker and Python
trallard
45
3.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
Site-Speed That Sticks
csswizardry
10
760
Why Our Code Smells
bkeepers
PRO
337
57k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Writing Fast Ruby
sferik
628
62k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Transcript
WASMをビルドして npmパッケージにする (個人的な作業進捗を添えて) 2025/02/28 新宿御苑.wasm kazto_dev
自己紹介 • 横浜のSIerで働いている多摩地区在住 • 仕事ではマルチスタックと言う名のなんでも屋 ◦ メインはサーバサイド ◦ フロントエンドちょこっと ◦
Flutterスマホアプリちょこっと ◦ AWSちょこっと • 自社で一番WASMとZigとCloudflareを語れる人になりたい
やりたいこと • 昨年末のアドベントカレンダーでこんなん書きました
やりたいこと • fzfの検索で、migemo風にローマ字で日本語検索できたら便利そう • 本丸は、CLI • npmパッケージにして、フロントエンドとかでも使えたりしないか? ◦ fzfもmigemoもGolang実装だし、WASMで配布できるのでは?
おおまかなステップ • 簡単なWASMをビルドしてnpmパッケージにする • npm installして使えることを確認する • 使いたい外部パッケージ (gomigemo, fzf)
をWASMビルドする • どれをどう呼んだら連結させられるか(たぶんここまではまだ行けない)
簡単なWASMをビルドしてnpmパッケージにする • 右のような簡単なソースをつくる • GOOS=js GOARCH=wasm go build -o add.wasm
add.go main.go
npmパッケージをつくる • ./dist/ ディレクトリに下記を置く ◦ add.wasm ◦ $(go env GOROOT)/misc/wasm/wasm_exec.js
◦ index.js (右記) • npm publish
・・・結果
時間切れ • お目汚し失礼いたしました🙇 • さきほど知ったんですが、WASMにはまだDynamic Link Libraryみたいなしくみな いらしいですね