# 🌐 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制御 ```nyash wasm = new WasmBox() console = wasm.getConsole() console.log("Hello from Nyash in Browser!") ``` ### 2. DOMBox - DOM操作 ```nyash dom = new DOMBox() button = dom.createElement("button") button.setText("Click me!") button.onClick(new MethodBox(me, "handleClick")) dom.body.appendChild(button) ``` ### 3. CanvasBox - 描画 ```nyash canvas = new CanvasBox(800, 600) ctx = canvas.getContext2D() ctx.fillStyle = "red" ctx.fillRect(100, 100, 50, 50) ``` ### 4. EventBox - イベント処理 ```nyash 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 // ブラウザ上で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ゲーム ```nyash canvas = new CanvasBox(400, 400) game = new SnakeGame(canvas) game.start() ``` ### 3. Nyashプレイグラウンド - コードエディタ - 実行結果表示 - サンプルコード集 - 共有機能 ## 🎉 メリット 1. **即座にデモ可能** - URL共有だけ 2. **ビジュアルフィードバック** - GUIアプリが作れる 3. **学習曲線なし** - ブラウザだけあればOK 4. **実用アプリ** - 本格的なWebアプリも可能 これ、本当にすぐできるにゃ!