hakorune/docs/guides/wasm-guide/wasm_browser_plan.md

🌐 Nyash WebAssembly ブラウザデビュー計画（アーカイブ）

注意: 本ドキュメントはアーカイブ目的で残置しています。WASM/ブラウザ経路は現在メンテ停止中で、記載の計画は最新のNyashとは一致しない可能性があります。

🎯 なぜこれが天才的か

1. extern box不要 - Rust側でWASM対応Boxを実装すればOK
2. GUI即実現 - Canvas/DOM使って即座にビジュアルアプリ
3. 配布超簡単 - URLアクセスだけで動く
4. 既存資産活用 - 現在のNyashインタープリターをそのままWASM化

🏗️ アーキテクチャ

ブラウザ
  ↓
Nyashコード（テキストエリア）
  ↓
NyashインタープリターWASM
  ↓
WasmBox / DOMBox / CanvasBox
  ↓
ブラウザAPI（DOM/Canvas/Event）

📦 新しいBox実装案

1. WasmBox - WebAssembly制御

wasm = new WasmBox()
console = wasm.getConsole()
console.log("Hello from Nyash in Browser!")

2. DOMBox - DOM操作

dom = new DOMBox()
button = dom.createElement("button")
button.setText("Click me!")
button.onClick(new MethodBox(me, "handleClick"))
dom.body.appendChild(button)

3. CanvasBox - 描画

canvas = new CanvasBox(800, 600)
ctx = canvas.getContext2D()
ctx.fillStyle = "red"
ctx.fillRect(100, 100, 50, 50)

4. EventBox - イベント処理

events = new EventBox()
events.onKeyDown(new MethodBox(me, "handleKey"))
events.onMouseMove(new MethodBox(me, "handleMouse"))

🚀 実装手順

Phase 1: 基本WASM化

1. Cargo.tomlにwasm-bindgen追加
2. lib.rsでWASM用エクスポート作成
3. 簡単なeval関数を公開
4. HTMLページで動作確認

Phase 2: ブラウザBox実装

1. ConsoleBox - console.log対応
2. DOMBox - 基本的なDOM操作
3. AlertBox - alert/confirm/prompt

Phase 3: ビジュアルアプリ

1. CanvasBox実装
2. Snakeゲーム移植
3. お絵かきアプリ
4. 簡単なIDE

💡 サンプルアプリ

1. インタラクティブREPL

// ブラウザ上でNyashコード実行
input = dom.getElementById("code-input")
output = dom.getElementById("output")
button = dom.getElementById("run-button")

button.onClick(new MethodBox(me, "runCode"))

runCode() {
    code = input.getValue()
    result = eval(code)
    output.setText(result.toString())
}

2. ビジュアルSnakeゲーム

canvas = new CanvasBox(400, 400)
game = new SnakeGame(canvas)
game.start()

3. Nyashプレイグラウンド

• コードエディタ
• 実行結果表示
• サンプルコード集
• 共有機能

🎉 メリット

1. 即座にデモ可能 - URL共有だけ
2. ビジュアルフィードバック - GUIアプリが作れる
3. 学習曲線なし - ブラウザだけあればOK
4. 実用アプリ - 本格的なWebアプリも可能

これ、本当にすぐできるにゃ！