レッスン
Rust + WebAssembly をステップバイステップでマスター
WebAssemblyとは？
WebAssemblyとは何か、なぜ存在するのか、Rustがどう関わるのかを理解しましょう。コードを書く前に全体像を把握します。
Wasm向けRust基礎
WebAssemblyに必要なRustの基本構文を学びます — 関数、型、構造体、エラーハンドリング。Rustの経験は不要です。
はじめてのWebAssembly
初めてのRust + WebAssemblyプロジェクト。wasm-bindgenがRustとJavaScriptをどう繋ぐかを学びます。
wasm-bindgenの仕組み
RustとJavaScriptの橋渡し — wasm-bindgenが型変換、関数エクスポート、グルーコード生成をどう行うかを理解します。
DOM操作
web-sysバインディングを使って、RustからブラウザのDOMに直接アクセス・操作する方法を学びます。
Fetch APIコール
ブラウザのFetch APIとasync/awaitを使って、Rust/WasmからHTTPリクエストを行う方法を学びます。
暗号学的ハッシュ
Rust/WasmでSHA-256ハッシュを実装し、クライアントサイドのデータ整合性検証を行います。
パーティクルシミュレーション
Rust/Wasmで駆動する高性能パーティクルシステムをHTML Canvas上にレンダリングします。
初めてのプロジェクトセットアップ
wasm-packを使ってRust/Wasmプロジェクトをゼロから作成し、Cargo.tomlを設定して、JavaScriptバンドラーと統合します。
Wasmのデバッグ
コンソールログ、パニックフック、ブラウザDevTools、エラーハンドリングのベストプラクティスを使ってRust/Wasmアプリケーションをデバッグします。
Canvas と 2Dグラフィックス
Rust/Wasmから制御するHTML Canvasを使って、図形の描画、スプライトのアニメーション、インタラクティブなグラフィックスを構築します。
状態管理
構造体、共有メモリ、メッセージパッシングパターンを使って、Rust/WasmとJavaScript間で状態を共有・同期します。
ファイル処理
Rust/Wasmを使ってクライアントサイドでファイルの読み込み、処理、生成を行います — CSVパース、画像操作、ファイルダウンロード。
WebSocket
Rust/WasmからWebSocketを使ったリアルタイム通信を構築します — 接続、送信、受信、イベントハンドリング。
Wasm + フロントエンドフレームワーク
Rust/WasmモジュールをReact、Svelte、Vueと統合します — お気に入りのUIフレームワークを使いながら、パフォーマンスが重要なロジックにWasmを活用します。
本番環境へのデプロイ
Rust/Wasmアプリケーションをバンドル、最適化し、Cloudflare Pages、Vercel、Netlifyなどのプラットフォームにデプロイします。
Wasmにおけるエラーハンドリング
Result、JsValue、カスタムエラー、パニックフックを使用して、Rust/JavaScript境界でエラーを適切に処理する方法を学びます。
Wasmのテスト
wasm-pack test、ヘッドレスブラウザ、ネイティブとブラウザの両方で動作するユニットテストを使ってRust/Wasmコードをテストする方法を学びます。
Wasm + Web Workers
Web Workersを使ってWasmを並列実行し、メインスレッドをブロックせずにブラウザでマルチスレッドパフォーマンスを実現します。
画像処理
Rust/Wasmを使ってクライアントサイドで画像を処理します — グレースケール、ぼかし、明るさ、コントラスト、ピクセル操作をネイティブに近い速度で実行します。
Wasmメモリモデル
WebAssemblyのリニアメモリの仕組みを理解する — メモリの確保、拡張、ビュー、そしてRustとJavaScript間の効率的なデータ共有。
文字列処理の詳細
RustとJavaScript間の文字列受け渡しをマスターする — UTF-8とUTF-16エンコーディング、パフォーマンスコスト、最適化戦略。
オーディオ処理
Rust/WasmとWeb Audio APIでリアルタイムにオーディオを処理・合成する — フィルター、エフェクト、波形生成。
Wasmゲームの構築
Rust/Wasmで完全なブラウザゲームを構築する — ゲームループ、入力処理、衝突判定、Canvas描画。
ブラウザ外のWasm（WASI）
WASIでWebAssemblyをブラウザ外で実行する — サーバーサイドWasm、エッジコンピューティング、ポータブルバイナリ。
Wasmパフォーマンスプロファイリング
Wasmのパフォーマンスを測定、プロファイル、最適化する — バイナリサイズの削減、ランタイムプロファイリング、ベンチマーク手法。
Wasmバイナリフォーマット
.wasmバイナリフォーマットを理解する — モジュール、セクション、WATテキストフォーマット、ブラウザがWasmをロード・インスタンス化する仕組み。
Wasmコンポーネントモデル
WebAssemblyの未来 — 合成可能なモジュール、型付きインターフェース、言語に依存しない連携可能なコンポーネント。
クロージャとコールバック：JSとRust間の連携
Wasm境界を越えたRustクロージャの仕組みを学ぶ — Closure::wrap、Closure::once、'staticライフタイム要件、JSとRust間の関数受け渡し、forget()とinto_js_value()によるクロージャのメモリ管理。
Wasmストリームと非同期イテレータ
RustからReadableStream、WritableStream、TransformStreamを操作する — 大容量ファイルのストリーミング、バックプレッシャーの処理、wasm-streamsクレートによる非同期イテレータパイプラインの構築。
WasmにおけるRustの列挙型
Wasm境界を越えたRust列挙型の使い方 — C言語スタイルの列挙型を数値として扱う方法、serdeによる複雑な列挙型、wasm_bindgenの制限、serde-wasm-bindgenの回避策、TypeScript型生成。
Wasm + IndexedDB
web-sysを通じてRustからIndexedDBにアクセスする — データベースの作成、CRUD操作、トランザクション管理、インデックスの構築、非同期データベース呼び出しのためのJsFutureの使用。
WebGLによる3Dグラフィックス
RustでWebGLを使った3Dグラフィックスを構築する — レンダリングパイプライン、頂点シェーダとフラグメントシェーダ、回転と投影の行列演算、カメラとライティングによる回転キューブのレンダリング。
Wasmバイナリサイズの最適化
Wasmバイナリを縮小するテクニックを学びます — Cargo.tomlの調整、wasm-opt、ツリーシェイキング、肥大化の回避、twiggyによる計測まで。
Wasmのカスタムアロケータ
Wasmのメモリアロケーションの仕組みを理解し、独自のバンプアロケータ、アリーナアロケータ、GlobalAlloc実装をRustで構築します。
Wasm + WebRTC
RustとWebAssemblyを使って、WebRTCによるピアツーピア通信を構築します — ピア接続、データチャネル、シグナリング、ICE候補。
Wasm向けSerdeシリアライゼーション
Wasmにおけるserdeシリアライゼーションをマスターします — serde-wasm-bindgenとJsValueの比較、複雑な型のシリアライズ、パフォーマンスの最適化。
Wasmプラグインシステムの構築
WebAssemblyを使ったプラグインアーキテクチャを設計します — サンドボックス化、ポータブル、言語非依存 — トレイトベースのホスト-ゲスト通信とリソース制限付き。
Wasm + TypeScript 統合
RustとTypeScriptを強力な型で橋渡し — wasm-bindgenが.d.tsファイルを生成する仕組み、tsifyを使った複雑な型の扱い、TypeScriptユーザーにネイティブに感じられる型安全なWasm APIの構築方法を学びます。
Wasmでのマルチスレッド
ブラウザで並列計算を実現 — SharedArrayBuffer、Web Workers、wasm-bindgen-rayonがWebAssemblyにマルチスレッドをもたらし、実際の高速化を実現する方法を学びます。
Wasm + 機械学習
Wasmを使ってブラウザで機械学習推論を実行 — 行列演算の構築、ニューラルネットワークのフォワードパス実装、Rust WasmとTensorFlow.jsの比較を学びます。
Wasmでの正規表現とテキスト処理
RustのWebAssemblyで超高速な正規表現エンジンを活用 — 入力検証、テキスト検索、ログ解析、CSVデータ処理、Unicode正規処理の方法を学びます。
Wasm + SVG操作
Rustからのグラフィクスの生成と操作 — ベジェ曲線の計算、チャートパスの構築、SVG出力の最適化、Wasmで動かす動的ビジュアライゼーションの作成方法を学びます。
WasmでMarkdownパーサーを構築する
Rust/WasmでMarkdownトークナイザーとHTMLコンバーターを構築 — パース処理、AST表現、そしてWasmがテキスト処理に優れる理由を学びます。
Wasm + 圧縮
Rust/Wasmでクライアントサイドのデータ圧縮アルゴリズムを実装 — ランレングス符号化、LZ77、ハフマン符号化の基礎。
Wasmでの高度な暗号技術
Rust/WasmでXOR暗号、シーザー暗号、Feistelネットワークブロック暗号を実装 — 現代の暗号化の構成要素を学びます。
Wasm + PDF生成
Rust/Wasmでクライアントサイドのファイル生成 — PDFファイルフォーマットの内部構造を学び、最小限のPDFジェネレーターをゼロから構築します。
Wasm経由でブラウザ内SQLite
Rust/WasmでシンプルなインメモリSQLエンジンを構築 — SQLパース、クエリ実行、インデックス作成、そしてブラウザで完全なデータベースが動作する理由を学びます。