TinyGoを使った VSCode拡張機能 実装 2024.11.8 Asakusa.go#4

asuka (@a_skua) ● 株式会社モニクル/SWE ● WebAssemblyの同人誌を書いている人 ○ WebAssemblyでできること ■ 商業誌：実践入門WebAssembly ○ ご注文はWASIですか? ○ ご注文はWASIですか?? ■ 商業誌：WebAssembly System Interface入門 ○ WebAssembly Cookbook vol.1 ○ WebAssembly Cookbook vol.2 New!! 2 WHOIS 技術書典14 技術書典15 技術書典16 技術書典17 New WASIのまとまった情報あります↓↓ 技術書典17では会社名義の同人誌も発行してます Monicle Techbook vol.1 開発合宿レポート2024：モニクル開発部

3 CookbookはWasmの実装方法や活用事例を扱う ことを目的としたシリーズです． vol.2は初の合同誌(共同著書)で，vol.3以降も Wasmに関する知見を集約することを目的に合同 誌を予定しています． 技術書典17新刊 同人誌書いてみたい人をゆるく募集してます vol.1 vol.2

4 目次 1. GoのWasmサポート状況 a. go:wasmexport→mainブランチで試せる b. TやTCfP承認 2. VSCodeの拡張機能実装 a. WITを使った拡張機能実装Rust 3. Rustでウェブフロントエンド実装 a. JSXのような構文を使えるマクロでSPAを実装 4. ブラウザ上でExcelファイルを扱う a. GoのExcelファイルを扱うコードをWasmにビルドしてブラ ウザ上で扱う話 技術書典17新刊 技術書典17オンラインストアからどうぞ! (本日紙の本もあります)

5 目次 1. GoのWasmサポート状況 a. go:wasmexport→mainブランチで試せる b. TやTCfP承認 2. VSCodeの拡張機能実装 a. WITを使った拡張機能実装Rust 3. Rustでウェブフロントエンド実装 a. JSXのような構文を使えるマクロでSPAを実装 4. ブラウザ上でExcelファイルを扱う a. GoのExcelファイルを扱うコードをWasmにビルドしてブラ ウザ上で扱う話 技術書典17新刊 Rustではなく，TinyGoを使った話をします

TinyGoを使ったVSCode拡張機能実装

VSCodeの拡張機能を実装するには? JSTSを使ってスクリプトを実装する必要がある 7 「Hello World!」を表示する拡張機能

VSCodeの拡張機能を実装するには? JSTSを使ってスクリプトを実装する必要がある 8 JS以外の方法でプラグインを実装するには? Wasmを使って実装する 「Hello World!」を表示する拡張機能 Goを使った同様の実装例

syscall/jsを使う デメリット ● globalThisを経由することになる ● 対象のプロパティが常にあるとは限らない go:wasmimport/wasmexportを使う デメリット ● 数値しか扱えない GoでJSとやり取りする方法 9 Goで実装できるけれども，面倒だからJSでよくない? (わかる)

VSCodeの拡張機能は JSで実装しましょう

おしまい

ではなく

WIT使って良い感じに実装できるよ という話

WITとは WebAssembly Interface Type = WIT ● Wasmのコンポーネントモデルで提供されるIDL ● stringやenum，listなどの高級型を定義できる 14 GraphQLやProtocol Bufferのスキーマ定義のWasm版 インターフェースの定義 実装内容の定義 WITで扱える型 : WIT - The WebAssembly Component Model / Built-in types

詳しくは著書の第3章で紹介しています． Wasmコンポーネントモデルについて 15 著書 : WebAssembly System Interface入門 買ってね❤ WASI 0.1，0.2の仕様，Wasmレジストリについて最新の情 報をまとめた本． WASI 0.2がコンポーネントモデルをベースに策定されてい るため，コンポーネントモデルについても紹介． 最新のWasmの動向を知りたい方にもおすすめです．

WITからTiny)GoとTSのコードを生成する

WITからTinyGoのコードを生成する 「wit-bindgen tiny-go --out-dir=src/gen ./wit」でWITからTinyGoのコードを生成 17 $ tree . ├── src │ ├── gen │ │ ├── example.c │ │ ├── example.go │ │ └── example.h │ └── main.go └── wit └── world.wit

生成されたコードを使って実装すると... WIT ● パッケージ名 = vscode:example ● インターフェース名 = vscode ● 関数名 = show-information-message ● 関数定義 = func (message: string) Go func VscodeExampleVscodeShowInformationMessage(message string) WITからTinyGoのコードを生成する 18 →ポインタなどを意識せずとも実装することができる tinygo build -target=wasi -o example.wasm ./src

WITからTSのコードを生成する 「npx wit2ts --outDir ./src ./wit」でWITからTSのコードを生成 →wit2tsは，@vscode/wasm-component-modelで提供されている 19 $ tree . ├── src │ ├── gen │ ├── example.ts │ └── main.go └── wit └── world.wit npm : @vscode/wasm-component-model

WIT ● パッケージ名 = vscode:example ● インターフェース名 = vscode ● 関数名 = show-information-message ● 関数定義 = func (message: string) TS export namespace Vscode { export type showInformationMessage = (message: string) ⇒ void; } export type Vscode = { showInformationMessage: Vscode.showInformationMessage; }; export namespace example { export type Imports = { vscode: Vscode; }; export type Exports = { run: () ⇒ void; }; } WITからTSのコードを生成する 20

デモ〜WITの書き換えから実行まで〜

コンポーネントモデルとGo コンポーネントモデルがサポートしている言語一覧 22 Goと書かれているが，TinyGoを指している The WebAssembly Component Model

WIT良いじゃん，Goでは使えるの? ● 現状生成されるコードにCが含まれているのでダメそう ● Wasmに関する実装はTinyGoに先行実装されているらしい? ● GOOS=wasip2をサポートするにはコンポーネントモデル必須 コンポーネントモデルとGo 23 Goの最新情報Wasm 1.24のWasmに関するアップデート情報，あります→

WebAssembly / Wasm Advent Calendar 2024 24 Wasmのアドカレやってます🎄 WIT使ってXXX実装してみたなどの話題お待ちしてます🎅 Qiita : WebAssembly / Wasm Advent Calendar 2024

TinyGoを使ったVSCode拡張機能実装 2024.11.8 Asakusa.go#4