shibomb

年末年始で学ぶ！RustとWebAssemblyで作る超高速Webアプリ入門

こんにちは！プログラミングの世界へようこそ。フリーランスでシステム開発やゲーム開発、そしてプログラミング教育に情熱を注いでいる技術者です。今回は、年末年始のまとまった時間を使って新しい技術に挑戦したいあなたのために、Rustと**WebAssembly（WASM）**を使った高速なWebアプリケーション開発の世界にご案内します。

この記事を読み終える頃には、なぜこの技術が注目されているのかを理解し、実際にブラウザ上でRustのコードを動かす最初の小さな一歩を踏み出せるようになっているはずです。プログラミングは、小さな「できた！」の積み重ね。一緒に楽しみながら学んでいきましょう！

はじめに

このチュートリアルでは、Rustというパワフルな言語で書いたコードをWebAssemblyにコンパイルし、JavaScriptから呼び出してWebページに表示する、という一連の流れを体験します。最終的には、簡単な計算処理をWebブラウザ上で高速に実行する小さなアプリケーションを完成させます。

この経験を通して、あなたは以下のことを学び、成長できるでしょう。

  • WebAssemblyの基本概念: なぜWebの世界で注目されているのか、その仕組みを理解できます。
  • Rustの初歩: 安全で高速なプログラムを書くためのRustの基本的な文法に触れられます。
  • フロントエンド開発の新しい可能性: JavaScriptだけでは難しかったパフォーマンスが求められる処理を、どう実現するかのヒントを得られます。

さあ、未来のWeb技術の扉を一緒に開けてみましょう！

前提知識の確認

新しいことを学ぶ時、何を知っていて、何を知らなくても良いのかをはっきりさせると、安心して進めますよね。ここでは、このチュートリアルを進める上での前提知識を確認します。

必要な基礎知識

  • HTML/CSS/JavaScriptの基本: Webページがどのように作られているか、基本的なHTMLタグやJavaScriptの変数・関数の意味が分かる程度で十分です。
  • コマンドライン操作: ターミナル（WindowsならPowerShellやコマンドプロンプト、Mac/Linuxならターミナル）で、ディレクトリを移動したりコマンドを実行したりする基本的な操作に慣れているとスムーズです。

事前に理解しておきたい概念

  • Rustとは？: 安全性、速度、並行処理を重視して設計されたプログラミング言語です。「メモリ安全」という難しい問題を、コンパイル時に厳しくチェックすることで、実行時のエラーを未然に防いでくれます。少し厳しい先生のような言語ですが、その分、信頼性の高いプログラムが作れます。
  • WebAssembly (WASM) とは？: Webブラウザで実行できる、新しい形式のコードです。テキストベースのJavaScriptと違い、バイナリ形式なのでサイズが小さく、読み込みや実行が非常に高速です。まるで、JavaScriptという万能選手がいるチームに、計算専門の超高速な助っ人（WASM）が加わるようなイメージです。

「分からなくても大丈夫」な部分

  • Rustの高度な概念: 所有権、ライフタイム、トレイトといったRustの核心的な機能は、最初は難しく感じるかもしれません。このチュートリアルでは、これらの深い部分には触れません。まずは「お作法」としてコードを書き、動かす楽しさを優先しましょう。
  • 複雑なビルド設定: 今回は便利なツールが裏側の難しい設定をすべて肩代わりしてくれます。詳細な仕組みは、興味が湧いてからゆっくり学べば大丈夫です。

環境構築：最初の一歩

どんな冒険も準備から。ここでは、開発に必要な道具を揃えていきましょう。一つひとつ丁寧に進めれば、怖がることはありません。

開発環境の準備（初心者向け解説）

プログラミングには、コードを書くための「テキストエディタ」が必要です。特にこだわりがなければ、多くの開発者に愛用されている「Visual Studio Code（VS Code）」がおすすめです。拡張機能を入れることで、Rustのコードを書きやすくしてくれます。

必要なツールとインストール方法

  1. Rustのインストール Rustのバージョン管理ツールである rustup をインストールします。公式サイトの指示に従い、お使いのOSに合わせてターミナルで以下のコマンドを実行してください。

    # Mac / Linux の場合
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Windows の場合
# 公式サイトから rustup-init.exe をダウンロードして実行します。

    インストール後、ターミナルを再起動するか、source $HOME/.cargo/env を実行してパスを通します。

  2. WebAssemblyビルドツールのインストール 次に、RustのコードをWebAssemblyに変換してくれる wasm-pack というツールをインストールします。

    cargo install wasm-pack

  3. Node.jsとnpmの準備 JavaScript側で開発用サーバーを立てたり、パッケージを管理したりするために、Node.jsが必要です。公式サイトからLTS（推奨版）をダウンロードしてインストールしてください。Node.jsをインストールすると、パッケージ管理ツールである npm も一緒にインストールされます。

環境構築でつまずきやすいポイント

  • コマンドが見つからない (command not found): rustup や wasm-pack をインストールした後、ターミナルでコマンドが見つからないと言われることがあります。これは「パスが通っていない」のが原因です。ターミナルを再起動すると解決することがほとんどです。それでもダメな場合は、インストール時の指示を再度確認しましょう。
  • プロキシ環境でのエラー: 会社のネットワークなど、プロキシサーバーを経由している環境では、インストールが失敗することがあります。その場合は、cargo や npm のプロキシ設定が必要になります。少し高度な内容なので、まずはご自宅のネットワークなどで試すのがおすすめです。

基本概念の理解

道具が揃ったら、次は設計図の読み方を学びましょう。RustとWASMがどのように連携するのか、その中心的な考え方を掴みます。

核となる考え方

私たちがやろうとしていることは、大きく分けて3つのステップです。

  1. Rustでロジックを書く: パフォーマンスが求められる計算処理などを、Rustの関数として実装します。
  2. WASMにコンパイルする: wasm-pack を使って、Rustのコードをブラウザが理解できるWebAssemblyの形式に変換します。
  3. JavaScriptから呼び出す: 生成されたWASMモジュールをJavaScriptで読み込み、普通のJavaScript関数のように呼び出して、結果をWebページに表示します。

この「得意なことは得意な人に任せる」という分業が、高速なWebアプリケーションを実現する鍵です。

身近な例での説明

料理に例えてみましょう。Webページ全体を作るのが、レシピ全体（HTML/CSS/JS）を管理するシェフ（あなた）だとします。レシピの中に、非常に複雑で手間のかかるソース作り（重い計算処理）があったとします。

このソース作りを、専門のソース職人（Rustコード）に依頼します。そして、職人が作ったソース（WASMモジュール）を、シェフが料理の仕上げに使う（JavaScriptから呼び出す）。こうすることで、シェフは全体の調理に集中でき、ソースの品質も格段に上がりますよね。これがRustとWASMの関係です。

「なぜそうなるのか」の理解

なぜこの仕組みが高速なのでしょうか？ JavaScriptは「インタプリタ言語」と呼ばれ、コードを一行ずつ解釈しながら実行します。一方、Rustは「コンパイル言語」で、実行前にすべてのコードを機械が直接理解できる言葉（機械語）に近い形に翻訳します。WebAssemblyはこの翻訳された結果に近い形式なので、ブラウザは解釈の手間をかけずに、ほぼ直接実行できるのです。この違いが、圧倒的なパフォーマンスの差を生み出します。

シェフが料理をし、専門のソース職人がソースを作っているイラスト。連携して料理が完成する様子が描かれている。

実践編：手を動かして学ぶ

いよいよコーディングの時間です！理論だけでなく、実際に手を動かして「動いた！」という感動を味わいましょう。

ステップ1: 基本的な実装

まず、プロジェクトの雛形を作成します。ターミナルで好きな作業ディレクトリに移動し、以下のコマンドを実行してください。

wasm-pack new rust-wasm-add
cd rust-wasm-add

rust-wasm-add という名前のプロジェクトが作成されました。src/lib.rs というファイルを開き、中身を以下のように書き換えて、2つの数値を足し算する簡単な関数を作りましょう。

// src/lib.rs
use wasm_bindgen::prelude::*;

// この下の関数がJavaScriptから呼び出せるようになります
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

#[wasm_bindgen] という記述が、この add 関数をJavaScriptの世界に公開するための魔法の言葉です。

次に、このRustコードをWASMにビルドします。ターミナルで以下のコマンドを実行してください。

wasm-pack build --target web

成功すると、pkg というディレクトリが作られます。この中に、WASMファイルと、それをJavaScriptから簡単に使うためのファイルが生成されています。

ステップ2: 機能の拡張

では、このWASMモジュールをWebページから使ってみましょう。プロジェクトのルートディレクトリ（pkg と同じ階層）に、index.html と index.js の2つのファイルを作成します。

まず、index.html です。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Rust + WASM Demo</title>
</head>
<body>
    <h1>Rust + WASM Add Function</h1>
    <p id="result"></p>
    <script src="./index.js"></script>
</body>
</html>

次に、index.js です。ここでWASMモジュールを読み込み、add 関数を呼び出します。

// index.js
// モジュールをインポートします。パスの "rust_wasm_add" の部分は、
// Cargo.tomlの[package] nameの値に合わせる必要があります。
import init, { add } from './pkg/rust_wasm_add.js';

async function main() {
    // WASMモジュールを初期化
    await init();

    const num1 = 10;
    const num2 = 20;

    // Rustで定義したadd関数を呼び出す！
    const result = add(num1, num2);

    console.log(`Result from WASM: ${result}`);

    // 結果をHTMLに表示
    const resultElement = document.getElementById('result');
    resultElement.textContent = `Rust says: ${num1} + ${num2} = ${result}`;
}

main();

これをブラウザで表示するために、簡単なWebサーバーを立てます。ターミナルで以下のコマンドを実行してください。

npm init -y
npm install http-server
npx http-server .

ターミナルに表示されたアドレス（例: http://127.0.0.1:8080）をブラウザで開くと、「Rust says: 10 + 20 = 30」と表示されるはずです。おめでとうございます！これがあなたの最初のRust + WebAssemblyアプリケーションです！

ステップ3: 実用的な応用

足し算だけでは物足りないですよね。パフォーマンスの差が分かりやすい例として、フィボナッチ数列を計算する関数を追加してみましょう。src/lib.rs に追記します。

// src/lib.rs (追記)
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    if n <= 1 {
        return n;
    }
    fibonacci(n - 1) + fibonacci(n - 2)
}

再度 wasm-pack build --target web でビルドし、index.js を変更してこの新しい関数を呼び出してみましょう。大きな数（例えば40など）を計算させると、JavaScriptで同じ処理を書いた場合との速度差を体感できるかもしれません。

ステップ4: チーム開発を意識した改善

一人で作るだけでなく、チームで開発することも見据えてみましょう。Rustにはコードの品質を保つための素晴らしいツールが標準で備わっています。

  • コードフォーマット: cargo fmt コマンドを実行すると、コードが統一されたスタイルに自動で整形されます。これでコードの見た目に関する議論は不要になります。
  • 静的解析: cargo clippy コマンドは、コードを分析して、より良い書き方や潜在的なバグを指摘してくれます。まるで経験豊富な先輩がコードレビューしてくれるようです。

これらのツールを日常的に使うことで、保守しやすく、誰が読んでも分かりやすいコードを書く習慣が身につきます。

実際の開発現場での活用

この技術は、おもちゃではありません。すでに多くの現場で実用化されています。

業務での使用例

  • 画像・動画処理: ブラウザ上で画像のフィルター加工や動画のエンコードを行うサービスで、重い処理をWASMに任せることで高速化しています。
  • WebベースのCADやデザインツール: 複雑な3Dモデリングや物理シミュレーションを、デスクトップアプリ並みの速度で実現しています。
  • ブラウザゲーム: ゲームの描画エンジンや物理演算など、パフォーマンスが命となる部分で活用されています。

チーム開発でのベストプラクティス

JavaScript/TypeScriptのフロントエンドチームと、Rust/WASMのコアロジックチームが分業するケースが増えています。成功の鍵は、両者の「インターフェース」を明確に定義することです。

どの関数を、どのような引数で、どんな戻り値で提供するのかを事前にしっかり設計し、ドキュメント化することが、スムーズな連携を生み出します。

保守性を意識した書き方

アプリケーションが大きくなると、コードの管理が大変になります。Rustでは、mod キーワードを使ってコードを機能ごとにファイル分割し、モジュール化することができます。また、#[cfg(test)] を使ってテストコードを同じファイル内に書く文化があり、ロジックとテストを一緒に管理できるため、品質を保ちやすくなります。

よくあるつまずきポイントと解決策

学習の旅に、試行錯誤はつきものです。ここでは、初心者が陥りがちな壁とその乗り越え方を紹介します。

初心者が陥りやすい問題

  • 所有権エラー: Rustコンパイラからの最も有名なエラーです。「値の所有権が移動しました」といったメッセージに最初は戸惑うでしょう。これはRustの安全性を支える重要な仕組みですが、今は「コンパイラが言う通りに直してみる」という姿勢で大丈夫です。
  • JavaScriptとのデータ型のやりとり: 数値の受け渡しは簡単ですが、文字列やオブジェクト（構造体）をやりとりしようとすると、少し複雑になります。wasm-bindgen がこの変換を助けてくれますが、その仕組みを学ぶのが次のステップになります。

エラーメッセージの読み方

迷路のようなイラストで、エラーメッセージを手がかりにゴール（解決策）を目指す様子を表している。

Rustのコンパイラエラーは、非常に親切で丁寧です。エラーメッセージを怖がらずに、じっくり読んでみましょう。

error[E0382]: borrow of moved value: `s`
 --> src/main.rs:4:20
  |
2 |     let s1 = String::from("hello");
  |         -- move occurs because `s1` has type `String`, which does not implement the `Copy` trait
3 |     let s2 = s1;
  |              -- value moved here
4 |     println!("{}", s1); // ここでエラー！
  |                    ^^ value borrowed here after move

上記のように、どこで問題が起き、なぜ起きたのか、どうすれば解決できるかのヒントまで教えてくれることがよくあります。メッセージをよく読むことが、最速の解決策です。

デバッグの基本的な考え方

console.log のように、Rustのコードの途中経過を確認したい場合があります。その場合は web_sys というクレート（ライブラリ）を使って、ブラウザのコンソールにログを出力できます。

extern crate web_sys;

// A function to use `log` function from `web_sys`.
#[wasm_bindgen]
pub fn log_to_console(message: &str) {
    web_sys::console::log_1(&message.into());
}

このようにして、デバッグの足がかりを作ることができます。

継続的な学習のために

今日の小さな一歩は、大きな冒険の始まりです。ここからさらに学びを深めていくための道しるべをいくつか紹介します。

次に学ぶべきこと

  • DOM操作: Rustから直接Webページの要素を操作してみましょう。web-sys クレートを使えば、JavaScriptでできるほとんどのDOM操作が可能です。
  • ライフサイクルと非同期処理: JavaScriptの Promise と連携するなど、より実践的な非同期処理を学ぶことで、作れるアプリケーションの幅が広がります。
  • Rustの言語仕様: 所有権やライフタイムについて少しずつ学んでいくと、なぜRustが安全だと言われるのか、その理由が深く理解できるようになります。

おすすめの学習リソース

公式ドキュメントが非常に充実しています。「The Rust Programming Language」（通称 The Book）や「The wasm-bindgen Guide」は、あなたの学習を力強くサポートしてくれるでしょう。これらはWeb上で無料で読むことができます。

コミュニティとの関わり方

一人で学び続けるのは大変です。オンラインのフォーラムやSNSのコミュニティに参加して、質問したり、他の人が作ったものを見たりするのも素晴らしい学習方法です。アウトプットとして、自分の学んだことをブログに書いたり、小さな作品を公開したりするのもおすすめです。誰かに教えることで、自分の理解が一番深まります。

まとめ：成長のための次のステップ

今回は、RustとWebAssemblyを使って、ブラウザ上で高速に動作するアプリケーションの第一歩を踏み出しました。環境構築からコードを書き、実際に動かすまでの一連の流れを体験したことで、この技術が単なる空論ではなく、現実的な選択肢であることが実感できたのではないでしょうか。

プログラミング学習で最も大切なのは、今日経験したような「小さな成功体験」を積み重ね、それを楽しむことです。技術は、それ自体が目的ではありません。あなたが何か素晴らしいものを作り出すための、強力な「手段」です。

このチュートリアルが、あなたの新しい冒険のきっかけになれば、これほど嬉しいことはありません。さあ、次にあなたは何を作りますか？あなたの創造力が、Webの世界をさらに面白くするのを楽しみにしています！

#Rust #WebAssembly #WASM #チュートリアル #Web開発 #パフォーマンス #初心者

関連記事

WebAssembly入門：Rustで作る！ブラウザの限界を超える高速処理を体験しよう

Astro 4.0入門：爆速サイトを体験！初心者でもわかる静的サイト構築ガイド

Rust入門チュートリアル：なぜ今学ぶべき？メモリ安全性の基礎から実践的なCLIアプリ開発まで