12,340 測定値

Rust と WebAssembly を使用したシンプルな Web アプリの構築: ステップバイステップガイド

に Max Zhuk8m2023/10/26

長すぎる; 読むには

Rust と WebAssembly を使用して高パフォーマンスの Web アプリケーションを構築する方法を学びます。

featured image - Rust と WebAssembly を使用したシンプルな Web アプリの構築: ステップバイステップガイド

導入

JavaScript のパフォーマンス制限に不満を感じたことはありますか?あなたは一人じゃない。 Web アプリケーションがより複雑になるにつれて、高性能ソリューションの必要性がより明らかになります。 Rust と WebAssembly をご紹介します。パフォーマンスだけでなく安全性と効率性も約束する 2 つのテクノロジです。この記事では、 Rustと WebAssembly を使用して単純な Web アプリケーションを構築するプロセスを説明します。

なぜ Rust と WebAssembly を使うのか?

錆とは何ですか？

Rust は、メモリの安全性、同時実行性、パフォーマンスを提供することを目的としたシステムプログラミング言語です。強力な型システムと所有権モデルのおかげで、null ポインター、バッファオーバーフロー、データ競合によって引き起こされる一般的なバグを排除するように設計されています。このため、Rust は信頼性が高く効率的なソフトウェアを構築するのに理想的な選択肢となります。

Rustの利点

メモリの安全性: Rust の所有権モデルにより、変数の所有者が 1 人になることが保証され、メモリリークや不正なデータアクセスが防止されます。
パフォーマンス: Rust は速度を重視して設計されており、C や C++ などの言語と緊密に競合します。
同時実行性: Rust の言語設計により、同時実行コードの記述が容易になり、拡張性が高くなります。
豊富なエコシステム: 成長を続けるパッケージリポジトリを備えた Cargo, Rust は、Web 開発、データ操作などのための幅広いライブラリとフレームワークを提供します。

WebAssemblyとは何ですか?

WebAssembly (wasm と略されることが多い) は、C、C++、Rust などの高水準言語のコンパイルターゲットとして機能するバイナリ命令形式です。これは、Web ブラウザ上でネイティブに近いパフォーマンスを可能にする、移植可能で効率的なコード形式になるように設計されています。

WebAssembly の利点

パフォーマンス: WebAssembly コードは、一般的なハードウェア機能を利用してネイティブに近い速度で実行されます。
セキュリティ: WebAssembly は安全かつサンドボックス化されるように設計されており、ホストシステムとは別の保護された環境内で実行されます。
移植性: WebAssembly はプラットフォームに依存しません。つまり、互換性のある Web ブラウザーを備えた任意のマシン上で実行できます。
相互運用性: WebAssembly モジュールは JavaScript アプリケーションに簡単に統合できるため、既存の Web テクノロジーを活用できます。

Rust と WebAssembly の相乗効果

Rust のパフォーマンスと安全性の機能を WebAssembly の速度と移植性と組み合わせることで、Web 開発のための強力な組み合わせが生まれます。これらが非常にうまく連携する理由は次のとおりです。

最適化されたパフォーマンス: Rust はゼロコストの抽象化に重点を置いているため、WebAssembly モジュールが無駄がなく高速であることが保証されます。
安全性とセキュリティ: Rust と WebAssembly はどちらも安全な実行を優先し、Web アプリケーションの信頼性を高めます。
統合の容易さ: Rust は WebAssembly に対する第一級のサポートを備えているため、Rust コードを wasm にコンパイルして Web アプリケーションに統合することが簡単になります。

Rust と WebAssembly を活用することで、最新の Web 開発トレンドに追いつくだけではありません。あなたは時代の先を行っています。

開発環境のセットアップ

コードに入る前に、Rust と WebAssembly に合わせた開発環境をセットアップすることが重要です。これにより、必要なツールとライブラリがすべて自由に使えるようになり、開発プロセスが合理化されます。

Rustのインストール

Rust インストーラーをダウンロードする:公式 Rust Web サイトにアクセスし、オペレーティングシステムに適したインストーラーをダウンロードします。
インストーラーを実行する: ターミナルを開き、次のコマンドを実行して Rust とそのパッケージマネージャーである Cargo をインストールします。
```
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
インストールの検証: Rust が正しくインストールされていることを確認するには、新しいターミナルウィンドウを開いて次のコマンドを実行します。
```
 rustc --version
```
Rust コンパイラのバージョンが出力として表示されるはずです。

wasm-packのインストール

wasm-pack WebAssembly をターゲットとする Rust クレートをアセンブルおよびパッケージ化するためのツールです。

wasm-pack をインストールします: ターミナルを開いて次のコマンドを実行します。
```
 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
```
インストールの確認: 次のコマンドを実行して、 wasm-packがインストールされていることを確認します。
```
 wasm-pack --version
```

Node.js と npm のインストール

Node.js と npm は、依存関係を管理し、Web サーバーを実行するために不可欠です。

Node.js をダウンロードする: Node.js の公式 Web サイトにアクセスし、オペレーティングシステム用のインストーラーをダウンロードします。
インストーラーを実行します。インストールプロンプトに従って、Node.js と npm の両方をインストールします。
インストールの確認: ターミナルを開き、次のコマンドを実行して、Node.js と npm がインストールされていることを確認します。
```
 node --version npm --version
```

IDE のセットアップ

Rust や WebAssembly の開発には任意のテキストエディタを使用できますが、 Visual Studio Codeなどの IDE には、コード補完、リンティング、デバッグなどの機能を提供する Rust 用の拡張機能が用意されています。

Visual Studio Code のインストール:公式 Web サイトからダウンロードしてインストールします。
Rust 拡張機能をインストールします。 Visual Studio Code を開き、拡張機能マーケットプレイスに移動し、rust-lang で「Rust」拡張機能を検索します。 Rust のサポートを強化するには、インストールしてください。

macOS ユーザー向けの注意: このガイドで提供されるインストールコマンドは macOS と互換性があります。問題が発生した場合は、プラットフォーム固有の手順については、それぞれの公式ドキュメントを参照してください。

簡単なRustプログラムの作成

このセクションでは、指定された数値の階乗を計算する Rust プログラムを作成します。これにより、計算負荷の高いプログラムを作成しながら、関数、ループ、条件文などの Rust の機能の一部を探索する機会が得られます。

Rustプロジェクトを初期化する

新しい Rust ライブラリを作成する: ターミナルを開き、次のコマンドを実行して新しい Rust ライブラリプロジェクトを作成します。
```
 cargo new --lib factorial_calculator
```
プロジェクトディレクトリに移動します。
```
 cd factorial_calculator
```

階乗関数の作成

lib.rsファイルを開く: テキストエディタまたは IDE でsrc/lib.rsファイルに移動します。
階乗関数を実装する: 次の Rust コードを追加して階乗関数を実装します。
```
 #[no_mangle] pub extern "C" fn factorial(n: u32) -> u32 { if n == 0 { 1 } else { n * factorial(n - 1) } }
```
ここでは、引数としてu32 (符号なし 32 ビットfactorial ) を受け取り、 u32を返す、factorial という関数を定義します。この関数は再帰を使用して、指定された数値の階乗を計算します。

WebAssembly にコンパイルする

Rust コードをコンパイルする:階乗関数が完成したので、それを WebAssembly モジュールにコンパイルしましょう。ターミナルで次のコマンドを実行します。
```
 wasm-pack build
```
ビルドを確認する: コマンドを実行すると、プロジェクトフォルダーにpkgディレクトリが表示されるはずです。その中には、WebAssembly モジュール ( factorial_calculator_bg.wasm ) と生成された JavaScript バインディング ( factorial_calculator.js ) があります。

そして、それができました！数値の階乗を計算する Rust プログラムを作成し、それを WebAssembly モジュールにコンパイルしました。これは Rust の機能を実証するだけでなく、このロジックを Web アプリケーションに統合するための準備も整えます。

WebAssembly を Web アプリに統合する

階乗を計算するための WebAssembly モジュールができたので、それを単純な Web アプリケーションに統合しましょう。ユーザーが数値を入力し、Rust で生成された WebAssembly モジュールを使用してその数値の階乗を表示できる基本的な HTML インターフェイスを作成します。

HTML と JavaScript のセットアップ

HTML ファイルの作成: プロジェクトディレクトリにindex.htmlという名前の新しいファイルを作成し、次の HTML コードを追加します。
```
 <!DOCTYPE html> <html> <head> <title>Factorial Calculator</title> </head> <body> <h1>Factorial Calculator</h1> <input type="number" id="numberInput" placeholder="Enter a number"> <button onclick="calculateFactorial()">Calculate</button> <p>Result: <span id="result"></span></p> <script src="./bootstrap.js"></script> </body> </html>
```
ここでは、数値の入力フィールド、計算をトリガーするボタン、結果を表示する段落を備えたシンプルなインターフェイスを作成します。
JavaScript ファイルの作成: bootstrap.jsという名前の新しいファイルを作成し、次の JavaScript コードを追加します。
```
 import('./factorial_calculator').then(module => { window.calculateFactorial = () => { const input = document.getElementById('numberInput').value; const result = module.factorial(parseInt(input)); document.getElementById('result').innerText = result; }; }).catch(console.error);
```
このスクリプトでは、WebAssembly モジュールを動的にインポートし、 calculateFactorialという関数を定義します。この関数は、入力フィールドから数値を読み取り、WebAssembly モジュールからfactorial関数を呼び出し、結果を表示します。

Web アプリの実行

Web サーバーをインストールする: ローカル Web サーバーがない場合は、npm を使用してインストールできます。
```
 npm install -g http-server
```
Web サーバーを実行します。ターミナルでプロジェクトディレクトリに移動し、次を実行します。
```
 http-server .
```
Web アプリを開く: Web ブラウザを開いてhttp://localhost:8080に移動します。 Factorial Calculator Web アプリが表示されるはずです。数値を入力して「計算」をクリックすると、数値の階乗が表示されます。

以上です！ Rust で生成された WebAssembly モジュールを単純な Web アプリケーションに統合することに成功しました。これは、Rust と WebAssembly を組み合わせて高パフォーマンスの Web アプリを作成する能力と柔軟性を示しています。

結論

この記事では、Web 開発のための Rust と WebAssembly の強力な組み合わせについて説明しました。私たちは開発環境をセットアップすることから始め、次に数値の階乗を計算する Rust プログラムの作成に進みました。最後に、このプログラムを単純な Web アプリケーションに統合しました。

Rust と WebAssembly の相乗効果により、高性能、安全、効率的な Web アプリケーションを構築する機会が数多く提供されます。既存のプロジェクトを最適化しようとしている場合でも、新しいプロジェクトを開始しようとしている場合でも、これらのテクノロジーは検討する価値のある堅牢なソリューションを提供します。

Web テクノロジーは進化し続けるため、時代の先を行くことが重要です。 Rust と WebAssembly は単なる現代のトレンドではありません。これらは、次世代の Web アプリケーションの構成要素です。

この旅にご参加いただきありがとうございます。Rust と WebAssembly の世界にさらに深く飛び込んでいただくことをお勧めします。今後の記事にご期待ください。そこでは、より複雑な機能の構築と現実世界のアプリケーションの探索について詳しく説明します。