0Pricing
Learn Rust Coding · レッスン

RustからWebAssembly（WASM）へ

RustコードをWebAssemblyへコンパイルし、Webブラウザやその他のWASMランタイムで高性能なモジュールを実行できるようにします。

「RustからWebAssembly（WASM）へ」はCoddyKit上の無料Learn Rust Codingレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはLearn Rust Coding学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Learn Rust Codingコースには全3レッスンが含まれています。

WebAssembly（WASM）とは

WebAssembly（WASM）は、スタックベースの仮想マシン向けのバイナリー命令形式です。Rust、C/C++、Goなどの高水準言語向けに、移植性の高いコンパイルターゲットとして設計されています。

低レベルのアセンブリーに似た言語で、Webブラウザーなどの環境で効率的に実行できるものと考えてください。性能が重要なコードを、ネイティブに近い速度で実行できます。

WASMにおけるRustの利点

Rustには独自の強みがあるため、WebAssemblyの開発に適しています。

  • パフォーマンス：RustはC/C++に近い速度で知られています。
  • メモリ安全性：Rustの所有権システムは、ガベージコレクターなしで一般的なバグを防ぎます。
  • 小さなバイナリー：Rustの最小限のランタイムにより、WASMモジュールをコンパクトにできます。
  • ツール：wasm-packやwasm-bindgenなどのツールによる優れたサポートがあります。

WASMツールのセットアップ

RustをWebAssemblyにコンパイルするには、主にwasm-packを使用します。これはビルドプロセス全体を処理するコマンドラインツールです。

また、WASMモジュールとJavaScriptの間の高水準な連携を可能にするRustクレート兼CLIツール、wasm-bindgenも使用します。

wasm-packをインストールするには、ターミナルを開いて次のコマンドを実行します。

cargo install wasm-pack

初めてのWASMプロジェクト

WebAssembly向けに調整した新しいRustプロジェクトを作成しましょう。専用のテンプレートとcargo generateを使用します。

cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template

プロンプトに従ってプロジェクト名を入力してください。これにより、WASMコード用のlib.rsファイルと、シンプルなWebインターフェース用のwwwディレクトリが設定されます。

JavaScript向けのRust関数

Rustの関数をJavaScriptから呼び出せるようにするには、wasm-bindgenクレートの#[wasm_bindgen]属性を使用します。

この属性により、wasm-bindgenはJavaScriptからRust関数を操作するために必要な接着コードを生成します。

use wasm_bindgen::prelude::*;

// This attribute makes the `greet` function available to JavaScript.
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// In a WASM library, `main` is not used. This code is compiled to a .wasm module.

WASMをJavaScriptと統合する

Rustコードを記述したら、wasm-pack buildを使ってWASMモジュールにビルドします。このコマンドにより、.wasmファイルとJavaScript用の接着コードを含むpkgディレクトリが作成されます。

その後、JavaScriptでエクスポートされたRust関数を簡単にインポートして使用できます。

// www/index.js (simplified)
import { greet } from "../pkg/your_project_name"; // Adjust path

// Call the Rust function
const message = greet("CoddyKit Learner");
console.log(message); // Outputs: "Hello, CoddyKit Learner!"

// You'd typically connect this to HTML elements.

RustからJavaScriptを呼び出す

RustからJavaScriptの関数を呼び出すこともできます。extern "C"ブロックで宣言し、#[wasm_bindgen]を使ってJavaScriptのグローバルオブジェクトや関数にマッピングします。

js_namespace引数を使うと、consoleオブジェクトのように、JavaScript環境内で関数を探す場所を指定できます。

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Import JS console.log as a Rust function named 'log'
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // You can import other JS functions too
    #[wasm_bindgen(js_name = alert)]
    fn js_alert(s: &str);
}

#[wasm_bindgen]
pub fn log_and_alert_from_rust(message: &str) {
    log(&format!("Rust log: {}", message));
    js_alert(&format!("Rust alert: {}", message));
}

RustとJSの間で文字列を渡す

wasm-bindgenは、数値やブール値などの一般的なデータ型を適切に処理します。文字列にはUTF-8エンコーディングを使用します。

Rustから&strまたはStringを渡すと、wasm-bindgenがそれをJavaScriptのStringに変換します。逆方向も同様です。この抽象化により、スムーズに相互運用できます。

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn uppercase_and_reverse(s: String) -> String {
    s.to_uppercase().chars().rev().collect()
}

// This function takes a String, processes it, and returns a new String.
// wasm-bindgen handles the conversion to/from JS strings.

ブラウザーの外でWASMを使う

WebAssemblyはWebブラウザーと結び付けて考えられることが多いですが、ブラウザーに限定されません。WASMランタイムはさまざまな環境に存在し、新たな可能性を広げています。

  • サーバーレス関数：高速で分離された関数をデプロイできます。
  • ブロックチェーン：スマートコントラクトを実行できます。
  • プラグイン／拡張機能：アプリケーションを安全に拡張できます。
  • デスクトップアプリ：高性能なモジュールを組み込めます。

これにより、Rustの活躍の場は従来のシステムプログラミングをはるかに超えて広がります。

WebAssemblyの重要な概念

RustとWebAssemblyについての理解度を確認しましょう。

復習：RustからWASMへ

Rustのパフォーマンスと安全性をWebAssemblyに活かす方法を学びました。

  • WASMは、コンパイルされたコード向けに高速で移植性の高いランタイムを提供します。
  • Rustは、パフォーマンス、小さなバイナリー、安全性によってWASMに適しています。
  • wasm-packやwasm-bindgenなどのツールが開発プロセスを簡単にします。
  • Rustの関数をJavaScriptに簡単にエクスポートし、JavaScriptの関数をRustにインポートできます。
  • WASMの用途はWebブラウザーだけにとどまりません。

さらに学習を続け、Rustで高性能なWebアプリケーションや、それ以外の強力なアプリケーションを構築しましょう。

よくある質問

「RustからWebAssembly（WASM）へ」レッスンは無料ですか？

はい。「RustからWebAssembly（WASM）へ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Learn Rust Codingコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Learn Rust Codingコースには全3レッスンが含まれています。

「RustからWebAssembly（WASM）へ」で何を学びますか？

RustコードをWebAssemblyへコンパイルし、Webブラウザやその他のWASMランタイムで高性能なモジュールを実行できるようにします。 ブラウザで直接実行するハンズオンコードでLearn Rust Codingを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Learn Rust Codingを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのLearn Rust Codingは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。

「RustからWebAssembly（WASM）へ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このLearn Rust Codingレッスンでコードを書いて実行できますか？

はい。すべてのLearn Rust Codingレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 外部関数インターフェース（FFI）
  2. RustからWebAssembly（WASM）へ
  3. ベンチマークとパフォーマンスチューニング
← Learn Rust Codingに戻る