Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

asuka
November 08, 2024

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

asuka

November 08, 2024
Tweet

More Decks by asuka

Other Decks in Technology

Transcript

  1. 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:モニクル開発部
  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オンラインストアからどうぞ! (本日紙の本もあります)
  3. 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を使った話をします
  4. WITとは WebAssembly Interface Type = WIT • Wasmのコンポーネントモデルで提供されるIDL • stringやenum,listなどの高級型を定義できる

    14 GraphQLやProtocol Bufferのスキーマ定義のWasm版 インターフェースの定義 実装内容の定義 WITで扱える型 : WIT - The WebAssembly Component Model / Built-in types
  5. 詳しくは著書の第3章で紹介しています. Wasmコンポーネントモデルについて 15 著書 : WebAssembly System Interface入門 買ってね❤ WASI

    0.1,0.2の仕様,Wasmレジストリについて最新の情 報をまとめた本. WASI 0.2がコンポーネントモデルをベースに策定されてい るため,コンポーネントモデルについても紹介. 最新のWasmの動向を知りたい方にもおすすめです.
  6. 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
  7. 生成されたコードを使って実装すると... 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
  8. 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
  9. 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