yew/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0/getting-started/introduction.mdx

---
title: 'Project Setup'
sidebar_label: Introduction
description: 'Set yourself up for success'
---

# 始める

## Rust

まずはじめに Rust が必要です。Rust とビルドツールの`cargo`をインストールするために、以下の[公式サイト](https://www.rust-lang.org/tools/install)
を見てください。

## **Wasm ビルドツール**

WebAssembly と JavaScript の互換を持たせるために他にツールが必要です。さらに、選んだツールに応じてブラウザでアプリから`.wasm`ファイルを実行するのに
必要な JavaScript ラッパーのコードを生成し、これによってデプロイやパッケージ化での頭痛の種を軽減させるのに役立ちます。

### [**`wasm-pack`**](https://drager.github.io/wasm-pack/book/)

Rust / Wasm 活動チームによって開発されている CLI ツールで、WebAssembly をパッケージ化することができます。
Webpack には[`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin)が最もよく使われています。

[`wasm-pack`で始める](project-setup/using-wasm-pack.mdx)

### [**`cargo-web`**](https://github.com/koute/cargo-web)

`wasm-pack`と`wasm-bindgen`を導入する前は好まれた Web ワークフローツールです。
`wasm-pack`がサポートされていないサンプルを動かすのにインストールする価値があり、依然として**最もお手軽に**始められる方法です。

[`cargo web`で始める](project-setup/using-cargo-web.mdx)

### 比較

<table>
    <thead>
        <tr>
            <th style={{ textAlign: 'left' }}></th>
            <th style={{ textAlign: 'left' }}>
                <code>wasm-pack</code>
            </th>
            <th style={{ textAlign: 'left' }}>
                <code>cargo-web</code>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style={{ textAlign: 'left' }}>プロジェクトの進行状況</td>
            <td style={{ textAlign: 'left' }}>
                <a href="https://rustwasm.github.io/">Rust / Wasm活動チーム</a>
                により活発にメンテナンス
            </td>
            <td style={{ textAlign: 'left' }}>
                6ヶ月間GitHubでの活発な活動無し
            </td>
        </tr>
        <tr>
            <td style={{ textAlign: 'left' }}>開発体験</td>
            <td style={{ textAlign: 'left' }}>
                ほぼ大丈夫! <code>webpack</code>があればなお良い。
            </td>
            <td style={{ textAlign: 'left' }}>
                しっかり動く！完結していて、外部ライブラリに頼る必要無し。
            </td>
        </tr>
        <tr>
            <td style={{ textAlign: 'left' }}>ローカルサーバー</td>
            <td style={{ textAlign: 'left' }}>
                <code>webpack</code>プラグインによるサポートあり
            </td>
            <td style={{ textAlign: 'left' }}>サポートあり</td>
        </tr>
        <tr>
            <td style={{ textAlign: 'left' }}>
                ローカル環境での変更による自動再ビルド
            </td>
            <td style={{ textAlign: 'left' }}>
                <code>webpack</code>プラグインによるサポートあり
            </td>
            <td style={{ textAlign: 'left' }}>サポートあり</td>
        </tr>
        <tr>
            <td style={{ textAlign: 'left' }}>ヘッドレスブラウザテスト</td>
            <td style={{ textAlign: 'left' }}>
                <a href="https://drager.github.io/wasm-pack/book/commands/test.html">
                    サポートあり
                </a>
            </td>
            <td style={{ textAlign: 'left' }}>
                <a href="https://github.com/koute/cargo-web#features">
                    サポートあり
                </a>
            </td>
        </tr>
        <tr>
            <td style={{ textAlign: 'left' }}>サポートされているターゲット</td>
            <td style={{ textAlign: 'left' }}>
                <ul>
                    <li>
                        <code>wasm32-unknown-unknown</code>
                    </li>
                </ul>
            </td>
            <td style={{ textAlign: 'left' }}>
                <ul>
                    <li>
                        <code>wasm32-unknown-unknown</code>
                    </li>
                    <li>
                        <code>wasm32-unknown-emscripten</code>
                    </li>
                    <li>
                        <code>asmjs-unknown-emscripten</code>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td style={{ textAlign: 'left' }}>
                <code>web-sys</code>
            </td>
            <td style={{ textAlign: 'left' }}>互換性あり</td>
            <td style={{ textAlign: 'left' }}>互換性無し</td>
        </tr>
        <tr>
            <td style={{ textAlign: 'left' }}>
                <code>stdweb</code>
            </td>
            <td style={{ textAlign: 'left' }}>互換性あり</td>
            <td style={{ textAlign: 'left' }}>互換性あり</td>
        </tr>
        <tr>
            <td style={{ textAlign: 'left' }}>使用例</td>
            <td style={{ textAlign: 'left' }}>
                <a href="https://github.com/yewstack/yew-wasm-pack-minimal">
                    入門用テンプレート
                </a>
            </td>
            <td style={{ textAlign: 'left' }}>
                Yewで
                <a href="https://www.github.com/yewstack/yew/tree/master/packages/yew-stdweb/examples">
                    作る例
                </a>
            </td>
        </tr>
    </tbody>
</table>