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

Asakusa.go#4 https://asakusago.connpass.com/event/334004/presentation/

Transcript

1. TinyGoを使った VSCode拡張機能 実装 2024.11.8 Asakusa.go#4
2. 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. 3 CookbookはWasmの実装方法や活用事例を扱う ことを目的としたシリーズです． vol.2は初の合同誌(共同著書)で，vol.3以降も Wasmに関する知見を集約することを目的に合同 誌を予定しています． 技術書典17新刊 同人誌書いてみたい人をゆるく募集してます vol.1 vol.2
4. 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. 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を使った話をします
6. TinyGoを使ったVSCode拡張機能実装
7. VSCodeの拡張機能を実装するには? JSTSを使ってスクリプトを実装する必要がある 7 「Hello World!」を表示する拡張機能
8. VSCodeの拡張機能を実装するには? JSTSを使ってスクリプトを実装する必要がある 8 JS以外の方法でプラグインを実装するには? Wasmを使って実装する 「Hello World!」を表示する拡張機能 Goを使った同様の実装例
9. syscall/jsを使う デメリット • globalThisを経由することになる • 対象のプロパティが常にあるとは限らない go:wasmimport/wasmexportを使う デメリット • 数値しか扱えない GoでJSとやり取りする方法 9 Goで実装できるけれども，面倒だからJSでよくない? (わかる)
10. VSCodeの拡張機能は JSで実装しましょう
11. おしまい
12. ではなく
13. WIT使って良い感じに実装できるよ という話
14. WITとは WebAssembly Interface Type = WIT • Wasmのコンポーネントモデルで提供されるIDL • stringやenum，listなどの高級型を定義できる 14 GraphQLやProtocol Bufferのスキーマ定義のWasm版 インターフェースの定義 実装内容の定義 WITで扱える型 : WIT - The WebAssembly Component Model / Built-in types
15. 詳しくは著書の第3章で紹介しています． Wasmコンポーネントモデルについて 15 著書 : WebAssembly System Interface入門 買ってね❤ WASI 0.1，0.2の仕様，Wasmレジストリについて最新の情 報をまとめた本． WASI 0.2がコンポーネントモデルをベースに策定されてい るため，コンポーネントモデルについても紹介． 最新のWasmの動向を知りたい方にもおすすめです．
16. WITからTiny)GoとTSのコードを生成する
17. 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
18. 生成されたコードを使って実装すると... 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
19. 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
20. 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
21. デモ〜WITの書き換えから実行まで〜
22. コンポーネントモデルとGo コンポーネントモデルがサポートしている言語一覧 22 Goと書かれているが，TinyGoを指している The WebAssembly Component Model
23. WIT良いじゃん，Goでは使えるの? • 現状生成されるコードにCが含まれているのでダメそう • Wasmに関する実装はTinyGoに先行実装されているらしい? • GOOS=wasip2をサポートするにはコンポーネントモデル必須 コンポーネントモデルとGo 23 Goの最新情報Wasm 1.24のWasmに関するアップデート情報，あります→
24. WebAssembly / Wasm Advent Calendar 2024 24 Wasmのアドカレやってます🎄 WIT使ってXXX実装してみたなどの話題お待ちしてます🎅 Qiita : WebAssembly / Wasm Advent Calendar 2024
25. TinyGoを使ったVSCode拡張機能実装 2024.11.8 Asakusa.go#4