WASM境界をまたぐエラー処理
wasm-bindgenを使い、RustのResult、Option、panicがJavaScript側へ渡る際に適切に処理します。
「WASM境界をまたぐエラー処理」はCoddyKit上の無料WebAssembly (WASM) for High Performance Appsレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWebAssembly (WASM) for High Performance Apps学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 WebAssembly (WASM) for High Performance Appsコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Errors Need a Bridge
Rust uses Result and Option for errors; JavaScript uses exceptions and null/undefined.
wasm-bindgen bridges these two worlds so failures surface naturally on each side.
Returning Result to JS
A Rust function returning Result<T, JsValue> becomes a JS function that either returns the value or throws.
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn parse(input: &str) -> Result<i32, JsValue> {
input.parse::<i32>()
.map_err(|e| JsValue::from_str(&e.to_string()))
}Catching It in JavaScript
On the JS side, an Err arrives as a thrown exception, so wrap calls in try/catch.
try {
const n = parse('abc');
} catch (e) {
console.error('Parse failed:', e);
}Mapping Custom Errors
Convert your own error types into a JsValue so JS gets a useful message. The ? operator plus map_err keeps this clean.
#[wasm_bindgen]
pub fn divide(a: i32, b: i32) -> Result<i32, JsValue> {
if b == 0 {
return Err(JsValue::from_str('division by zero'));
}
Ok(a / b)
}Returning Option
Rust's Option<T> maps to a value or undefined in JS, perfect for nullable results.
#[wasm_bindgen]
pub fn first_char(s: &str) -> Option<char> {
s.chars().next()
}What Happens on Panic
A Rust panic in WASM aborts the module and is hard to debug, by default you get an unhelpful 'unreachable' error.
Panics should be rare; prefer Result for expected failures.
Better Panic Messages
The console_error_panic_hook crate forwards panic messages to the browser console, making debugging far easier.
#[wasm_bindgen(start)]
pub fn main() {
console_error_panic_hook::set_once();
}Result vs Panic
Choose deliberately:
- Result, expected, recoverable errors (bad input, not found)
- Panic, programmer bugs and invariants that should never break
Never use panics for normal control flow across the boundary.
Using a Custom Error Type
For richer errors, define a struct exported to JS, so JS can read fields instead of just a string.
#[wasm_bindgen]
pub struct AppError { pub code: i32 }
#[wasm_bindgen]
impl AppError {
#[wasm_bindgen(getter)]
pub fn code(&self) -> i32 { self.code }
}Propagating with ?
Inside a function returning Result<_, JsValue>, the ? operator propagates errors cleanly when types convert.
#[wasm_bindgen]
pub fn run(input: &str) -> Result<i32, JsValue> {
let n: i32 = input.parse().map_err(|_| JsValue::from_str('bad'))?;
Ok(n * 2)
}Best Practices Summary
For robust error handling:
- Return
Result<T, JsValue>so errors become JS exceptions - Return
Optionfor nullable values - Install
console_error_panic_hookfor debuggable panics - Reserve panics for true bugs, use Result for expected failures
Quick Check
How does a Rust function returning Result<T, JsValue> behave when it returns Err and is called from JavaScript?
Recap
You now handle errors cleanly across the boundary:
- Result becomes a JS throw; Option becomes value-or-undefined
- Map custom errors into JsValue
- Use console_error_panic_hook to debug panics
- Prefer Result over panic for expected failures
Clear error semantics make Rust+WASM libraries pleasant and safe to consume from JS.
AI チューターと学ぶ WebAssembly (WASM) for High Performance Apps — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 12
- レッスン
- 48
よくある質問
「WASM境界をまたぐエラー処理」レッスンは無料ですか？
はい。「WASM境界をまたぐエラー処理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、WebAssembly (WASM) for High Performance Appsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 WebAssembly (WASM) for High Performance Appsコースには全4レッスンが含まれています。
「WASM境界をまたぐエラー処理」で何を学びますか？
wasm-bindgenを使い、RustのResult、Option、panicがJavaScript側へ渡る際に適切に処理します。 ブラウザで直接実行するハンズオンコードでWebAssembly (WASM) for High Performance Appsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
WebAssembly (WASM) for High Performance Appsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWebAssembly (WASM) for High Performance Appsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「WASM境界をまたぐエラー処理」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWebAssembly (WASM) for High Performance Appsレッスンでコードを書いて実行できますか？
はい。すべてのWebAssembly (WASM) for High Performance Appsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。