「WebAssembly」に今来た私が試したこと（ChatGPT先生と共に）

# はじめに
この記事は、WebAssembly / Wasm Advent Calendar 2024 の3日目の記事となります。

アドベントカレンダのリストを見ていて、今、WebAssemblyに初めて来た者の記録です。

基本事項
WebAssemblyってなに？　というわけでChatGPT先生に聞いてみる。

![スクリーンショット 2024-12-15 19.33.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/6e35437f-1359-98b0-33e7-23021fb2fa3f.png)
![スクリーンショット 2024-12-15 19.33.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/5a363f32-fbe0-2083-2016-e3806ff3a55f.png)

おー、素晴らしいものですね！。

# インストール
この辺りに書いてあるとおりに準備した。

https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_Wasm

![スクリーンショット 2024-12-15 19.38.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/917ed224-6052-0e65-2c9b-4fcb061ec699.png)

. "$HOME/.cargo/env"
なるほど、これ大事ね。

https://www.rust-lang.org/tools/install

![スクリーンショット 2024-12-15 19.46.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/f10d580e-5e1c-78f1-2ee9-d907b944c832.png)


# ChatGPTに何か作ってもらおう

![スクリーンショット 2024-12-15 19.39.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/419deb17-639a-5b3f-511d-14a977e19c17.png)

![スクリーンショット 2024-12-15 19.40.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/c8c50bb2-fc1e-80ec-76f6-affc734c1c9f.png)

```rust:lib.rs
use wasm_bindgen::prelude::*;

// WebAssemblyで使うための宣言
#[wasm_bindgen]
pub fn mandelbrot(x: f64, y: f64, max_iter: u32) -> u32 {
    let mut real = x;
    let mut imag = y;
    let mut iter = 0;

    while iter < max_iter {
        let real2 = real * real;
        let imag2 = imag * imag;
        if real2 + imag2 > 4.0 {
            return iter;
        }
        imag = 2.0 * real * imag + y;
        real = real2 - imag2 + x;
        iter += 1;
    }

    max_iter
}

```

https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_Wasm

cargo new --lib mandelbrot 
して、src/lib.rsをChatGPTが出してきた上記lib.rsに置き換える。

ChatGPT先生が続きに出してきた以下の操作を行う。


![スクリーンショット 2024-12-15 20.07.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/c58de76a-ca1d-62e4-2736-69838b9cdb74.png)

wasm-pack build --target webを実行。

![スクリーンショット 2024-12-15 20.01.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/934b3e22-93b5-43f1-1a2f-ddf1a7c050ba.png)

エラー内容通りにCargo.tomlを修正し、もう一度wasm-pack build --target webを実行。

![スクリーンショット 2024-12-15 20.11.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/0209a946-7a3a-cece-7aa1-0d9c3835ec73.png)

エラー内容通りにCargo.tomlを修正し、もう一度wasm-pack build --target webを実行。

おお！すごい勢いでコンパイル始まった。コンパイル通った！やったね。

ChatGPT先生が続きに出してきた以下のhtmlを作成。
![スクリーンショット 2024-12-15 20.14.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/1d987943-fc93-4a4e-b136-1ada19aed959.png)

```html:mandelbrot.html
<!DOCTYPE html>
<html>
<head>
    <title>Mandelbrot with WebAssembly</title>
</head>
<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script type="module">
        import init, { mandelbrot } from './mandelbrot.js';

        async function drawMandelbrot() {
            await init(); // WebAssembly初期化

            const canvas = document.getElementById("canvas");
            const ctx = canvas.getContext("2d");
            const imageData = ctx.createImageData(canvas.width, canvas.height);

            const maxIter = 100;
            const width = canvas.width;
            const height = canvas.height;

            for (let px = 0; px < width; px++) {
                for (let py = 0; py < height; py++) {
                    const x0 = (px / width) * 3.5 - 2.5;
                    const y0 = (py / height) * 2.0 - 1.0;

                    const iter = mandelbrot(x0, y0, maxIter);
                    const color = (iter / maxIter) * 255;

                    const index = (py * width + px) * 4;
                    imageData.data[index] = color;     // Red
                    imageData.data[index + 1] = color; // Green
                    imageData.data[index + 2] = color; // Blue
                    imageData.data[index + 3] = 255;   // Alpha
                }
            }

            ctx.putImageData(imageData, 0, 0);
        }

        drawMandelbrot();
    </script>
</body>
</html>

```

ChatGPT先生が続きに出してきた以下を実行。

![スクリーンショット 2024-12-15 20.28.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/126c502f-91ac-4482-377a-c0c67f27b639.png)

ディレクトリ構造はこんな感じ
![スクリーンショット 2024-12-15 21.05.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/a5f36617-32c6-e952-89ae-5ac52b962f7d.png)


ブラウザでアクセス
![スクリーンショット 2024-12-15 21.03.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032713/8d00ba49-ceaa-b46b-e2fd-3571139cea5f.png)

うむ。表示できた。速いのかは分からない例ではありましたが。ここでタイムアップ。

以上、簡単ですが、「WebAssembly」に今来た私が試したこと（ChatGPT先生と共に）、でした。