このチュートリアルでは、WebブラウザーでRustアプリケーションを実行する方法を学びます。 Simple Rustパッケージを作成し、WebAssembly（WASM）にコンパイルし、HTMLページに統合します。

1。rust をインストールする

最初に、錆をインストールする必要があります。 Rustの公式インストールガイドを参照してください。インストールが完了したら、次のコマンドを実行して、インストールが成功したかどうかを確認します。

rustc -version

rustc --version

次に、新しい錆パッケージを作成します： 貨物new Rust-101-lib

これにより、次のフォルダー構造が生成されます。

cargo new rust-101 --lib

cargo.toml

：プロジェクトの構成ファイルは、javascriptの

package.json

├── Cargo.toml
└── src
    └── lib.rs

：Rust Codeを含むメインライブラリファイル。

• lib.rs ファイル。デフォルトでは、 add 関数の例が含まれています。私たちの目標は、この関数をWebアプリケーションから呼び出すことです。
• 3。さびをコンパイルしてWebAssembly にコンパイル
WebでRustコードを実行するには、WebAssembly（WASM）にコンパイルする必要があります。このため、

wasm-pack

ツールをインストールする： 貨物インストールwasm-pack

4。さびとjavascriptの間のコミュニケーションを作成します

錆とjavascriptを接続するために、

wasm-bindgen crateを使用します。更新 cargo.toml

ファイルは次のとおりです。

cargo install wasm-pack

ここ：

crate-type = ["cdylib"]

：パッケージを構成して、WebAssemblyと互換性のある動的ライブラリを生成します。

wasm-bindgen ：錆とjavascriptの間の通信を有効にします。

インストール依存関係：

[package]
name = "rust-101"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

5。rastコードを更新します

• src/lib.rs ファイル、 add
関数はjavascriptからアクセスできます：
• wasmm_bindgen :: prelude ::*; ＃[wasm_bindgen] pub fn add（左：u64、右：u64） - > u64 { 左右 }

＃[wasm_bindgen]

：

add

cargo build

次のコマンドを実行して、RustパッケージをWebAssemblyにコンパイルします：

wasm-pack build-target web

]このコマンドは次のようになります。 さびコードをWebAssemblyにコンパイルしました。 WebAssemblyファイルを処理するためにJavaScriptバインディングを生成します。

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
    left   right
}

• 6。ウェブページでバッグを使用します プロジェクトルートディレクトリに index.html
ファイルを作成します。