日本語

WebAssembly チュートリアル

WebAssembly - Rustで働く

WebAssemblyとRustの紹介

こんにちは、未来のプログラマーたち！今日は、ウェブブラウザが高パフォーマンスアプリケーションを実行する強力なプラットフォームになる素晴らしい世界に飛び込みます。複雑な3Dゲームをブラウザでプレイしたり、高度なデータ分析ツールを実行したりできることを想像してみてください。それがWebAssemblyの魔法であり、Rustプログラミング言語を使ってこの力を引き出す方法を学びましょう。

WebAssembly - Working with Rust

私が初めてWebAssemblyに出会ったとき、ウェブ開発の隠されたスーパーパワーを見つけたような気持ちになりました。信頼のバイクが突然ロケットに変身するようなものです！一緒にこの興奮の旅に出発しましょう。

WebAssemblyとは？

WebAssembly、略してWasmは、ウェブブラウザで効率的に実行されるためのバイナリ命令書式です。ブラウザが非常に高速に理解して実行できる秘密のコードのようなものです。ウェブアプリケーションのturboブーストだと思ってください！

なぜRustがWebAssemblyに適しているのか？

Rustは強力で安全なプログラミング言語です。最新の安全機能を備えたスポーツカーのようなものです。Rustのユニークな特性がWebAssembly開発に最適な選択をしています：

  1. ガベージコレクションなしのメモリセキュリティ
  2. 高パフォーマンス
  3. 小さなバイナリサイズ
  4. JavaScriptとの簡単な統合

開発環境の設定

コードを書き始める前に、ワークスペースを準備する必要があります。meisterのアートスタジオを painting する前に準備するようなものです。

Rustのインストール

まず、Rustをインストールしましょう。ターミナルを開き、以下のコマンドを実行します：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

このコマンドはRustをダウンロードしてインストールします。種を植え、強力なコードの木が成長するようなものです！

wasm-packのインストール

次に、wasm-packをインストールします。wasm-packは、WebAssemblyビルドとワークフローを支援するツールです：

cargo install wasm-pack

wasm-packは、あなたの信頼のアシスタントであり、いつでもRustコードをウェブ用にパッケージ化する手助けをしてくれます。

最初のRustとWebAssemblyプロジェクト

さあ、初めてのプロジェクトを作成しましょう。まずは、二つの数を足すシンプルな関数から始めます。

プロジェクトの作成

ターミナルで以下のコマンドを実行します：

cargo new --lib wasm-add
cd wasm-add

これで新しいRustライブラリプロジェクトが作成されます。新しいノートブックを開き、コ딩の冒険の準備ができたようなものです！

Rustコードの記述

src/lib.rsを開き、以下の内容に置き換えます：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}

これを分解すると：

  • use wasm_bindgen::prelude::*;は、WebAssemblyのための必要なバインディングをインポートします。
  • #[wasm_bindgen]は、私たちの関数をJavaScriptからアクセス可能にする魔法の呪文です。
  • pub fn add(a: i32, b: i32) -> i32は、二つの整数を受け取り、その和を返す関数を定義します。

WebAssemblyへのビルド

今、RustコードをWebAssemblyに変換しましょう。以下のコマンドを実行します：

wasm-pack build --target web

このコマンドは、私たちのRustコードをブラウザが楽しむことができるWebAssemblyの甜いお菓子に変換します！

ウェブページでのWebAssemblyモジュールの使用

さあ、楽しみな部分です – ウェブページで私たちのWebAssemblyモジュールを使う！

HTMLファイルの作成

プロジェクトのルートにindex.htmlというファイルを作成し、以下の内容を入力します：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wasm Add</title>
</head>
<body>
<script type="module">
import init, { add } from './pkg/wasm_add.js';

async function run() {
await init();
const result = add(5, 7);
document.body.textContent = `5 + 7 = ${result}`;
}

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

このHTMLファイルは、私たちのWebAssemblyスターが演技する舞台のようなものです！

ウェブページの実行

あなたの創造物を実行するために、ローカルなウェブサーバーが必要です。Pythonがインストールされている場合、以下のコマンドを使って簡単にサーバーを立ち上げることができます：

python -m http.server

次に、ブラウザを開き、http://localhost:8000にアクセスします。ページ上に「5 + 7 = 12」と表示されるはずです。おめでとうございます！あなたは刚刚ブラウザでRustコードを実行しました！

高度なトピック

足を濡らしてみたところ、ウェブAssemblyとRustの海に少し深く潜りましょう。

文字列の処理

文字列はWebAssemblyでは少し難しい場合があります。ユーザーに挨拶する関数を作成してみましょう：

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}

JavaScriptでは以下のように使います：

const greeting = greet("WebAssembly");
console.log(greeting); // 出力: Hello, WebAssembly!

メモリ管理

Rustのスーパーパワーの一つはメモリ管理です。WebAssemblyで動作する際には特に注意が必要です。以下は、配列を作成して返す関数です：

#[wasm_bindgen]
pub fn create_array(size: usize) -> Vec<i32> {
let mut v = Vec::with_capacity(size);
for i in 0..size {
v.push(i as i32);
}
v
}

この関数は安全です。Rustの所有権システムがメモリを適切に管理するからです。

結論

Rustを使用してWebAssemblyの世界に初めて踏み出されたことをおめでとうございます！私たちは多くのことをカバーしました。環境の設定から、WebAssemblyモジュールの作成と使用までです。新しいスキルを学ぶことは練習と共に達成されます。 therefore、コードを書き続け、実験を続け、そして最も重要なのは楽しむことです！

最後に、有名なコンピュータサイエンティスト、グレース・ホッパーの言葉を思い出します：「言語の中で最も有害なフレーズは『私たちはいつもこのようにしてきました』です。」WebAssemblyとRustは、ウェブ開発に関する新しい考え方を代表しています。この変化を受け入れれば、プログラミングの旅で新しい可能性が開かれます。

ハッピーコーディングを、そしてWebAssemblyの冒険が興奮と発見で満たされることを願っています！

Credits: Image by storyset

前のチュートリアル:
WebAssembly - C++との連携
次のチュートリアル:
WebAssembly - Goでの動作