RustとWebAssemblyでReactを強化する：包括的ガイド

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

rustup target add wasm32-unknown-unknown

cargo install wasm-pack

cargo new --lib rust-compute
cd rust-compute

[package]
name = "rust-compute"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2.84"

use wasm_bindgen::prelude::*;

// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
// allocator to keep the WebAssembly binary small.
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

/// A computationally expensive recursive Fibonacci calculator.
/// We expose this to JavaScript using the #[wasm_bindgen] attribute.
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    if n <= 1 {
        return n;
    }
    fibonacci(n - 1) + fibonacci(n - 2)
}

/// A more complex example: calculating prime numbers up to a given limit.
#[wasm_bindgen]
pub fn count_primes(limit: u32) -> u32 {
    let mut count = 0;
    for i in 2..=limit {
        if is_prime(i) {
            count += 1;
        }
    }
    count
}

fn is_prime(n: u32) -> bool {
    if n <= 1 {
        return false;
    }
    for i in 2..=(n as f64).sqrt() as u32 {
        if n % i == 0 {
            return false;
        }
    }
    true
}

wasm-pack build --target web

npm create vite@latest react-wasm-app -- --template react-ts
cd react-wasm-app
npm install

npm install ../rust-compute/pkg

import React, { useState, useEffect } from 'react';
// Import the default initialization function and our specific functions
import init, { fibonacci, count_primes } from 'rust-compute';
import './App.css';

function App() {
  const [isWasmLoaded, setIsWasmLoaded] = useState(false);
  const [fibInput, setFibInput] = useState<number>(40);
  const [primeInput, setPrimeInput] = useState<number>(100000);
  const [result, setResult] = useState<string | null>(null);
  const [executionTime, setExecutionTime] = useState<number | null>(null);

  // Initialize the WebAssembly module when the component mounts
  useEffect(() => {
    const loadWasm = async () => {
      try {
        // init() fetches and instantiates the .wasm file
        await init();
        setIsWasmLoaded(true);
        console.log("WebAssembly module loaded successfully.");
      } catch (error) {
        console.error("Failed to load WebAssembly module:", error);
      }
    };

    loadWasm();
  }, []);

  const handleCalculateFibonacci = () => {
    if (!isWasmLoaded) return;
    
    const startTime = performance.now();
    const answer = fibonacci(fibInput);
    const endTime = performance.now();
    
    setResult(`Fibonacci(${fibInput}) = ${answer}`);
    setExecutionTime(endTime - startTime);
  };

  const handleCalculatePrimes = () => {
    if (!isWasmLoaded) return;
    
    const startTime = performance.now();
    const answer = count_primes(primeInput);
    const endTime = performance.now();
    
    setResult(`Total primes up to ${primeInput} = ${answer}`);
    setExecutionTime(endTime - startTime);
  };

  return (
    <div className="App">
      <h1>React + Rust WebAssembly</h1>
      <p>High-performance computing in the browser.</p>
      
      {!isWasmLoaded ? (
        <p>Loading WebAssembly...</p>
      ) : (
        <div className="compute-section">
          <div className="card">
            <h2>Fibonacci Calculator</h2>
            <input 
              type="number" 
              value={fibInput} 
              onChange={(e) => setFibInput(Number(e.target.value))} 
            />
            <button onClick={handleCalculateFibonacci}>Calculate (Rust)</button>
          </div>

          <div className="card">
            <h2>Prime Counter</h2>
            <input 
              type="number" 
              value={primeInput} 
              onChange={(e) => setPrimeInput(Number(e.target.value))} 
            />
            <button onClick={handleCalculatePrimes}>Count Primes (Rust)</button>
          </div>

          {result && (
            <div className="results">
              <h3>Result: {result}</h3>
              {executionTime !== null && (
                <p>Execution Time: <strong>{executionTime.toFixed(2)} ms</strong></p>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

export default App;