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
71
20250228-create-npm-package-with-wasm
kazto
February 28, 2025
Tweet
Share
More Decks by kazto
See All by kazto
C言語でオブジェクト指向プログラミング / object-oriented-in-c
kazto
1
860
Golangでwget劣化クローンをつくる / wget clone with golang
kazto
1
490
登壇を応援する会忘年LT_今からやぞ_.pdf
kazto
2
4.4k
Other Decks in Programming
See All in Programming
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
930
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
440
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.1k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.2k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
660
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
400
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
520
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
540
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Goで作る、開発・CI環境
sin392
0
240
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
780
NPOでのDevinの活用
codeforeveryone
0
850
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
Statistics for Hackers
jakevdp
799
220k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A Modern Web Designer's Workflow
chriscoyier
695
190k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Site-Speed That Sticks
csswizardry
10
690
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Fireside Chat
paigeccino
37
3.5k
Six Lessons from altMBA
skipperchong
28
3.9k
The Pragmatic Product Professional
lauravandoore
35
6.7k
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みたいなしくみな いらしいですね