---
title: Using wasm-bindgen
---

## インストール

```bash
cargo install wasm-bindgen-cli
```

## ビルド

はじめに、Wasm ファイルを生成するアプリをビルドしましょう。
[サンプルアプリをビルド](../build-a-sample-app.md)のアプリをビルドしたいとします。
生成されたファイルのパスは`target/wasm32-unknown-unknown/debug/yew-app.wasm`にあるはずです。
もしクレートに何か別の名前をつけた場合、Wasm ファイルの名前は`yew-app.wasm`ではなく、`Cargo.toml`ファイルに
`package.name`として名前をつけたものになるでしょう。

```bash
cargo build --target wasm32-unknown-unknown
```

次に、wasm-bindgen の CLI を動かしましょう。
このコマンドは`--out-dir`のディレクトリにいくつかのファイルを生成し、その中には Wasm バイナリを読み込んで動かすための
コンパイルされた WebAssembly と JavaScript のラッパーが入っています。
現在のブラウザは直接 WebAssembly ファイルを読み込むことができないため、代わりに JavaScript 経由で読み込まれるなければならず、
そのためにこれらのラッパーが必要となります。
[サンプルアプリを作る(../build-a-sample-app.md)の例では`static`フォルダにファイルが生成されるようにしており
(そのために`wasm-bindgen`へ`--out-dir static`と渡す必要があります)、
`wasm.js`と`wasm_bg.wasm`という名前になります(`wasm-bindgen`へ`--out-name wasm`と渡すことで実現できます)

```bash
wasm-bindgen --target web --out-dir static --out-name wasm target/wasm32-unknown-unknown/debug/appname.wasm --no-typescript
```

## アプリをサーブする

好きなサーバーを使ってください。
ここではシンプルな Python のサーバーを使います。

```bash
python -m http.server 8000
```

## サポートされているターゲット

-   `wasm32-unknown-unknown`

## 参考ドキュメント

-   [The `wasm-bindgen` docs](https://rustwasm.github.io/docs/wasm-bindgen/)
