WebAssembly (WASM) for High Performance Apps · レッスン

WebAssembly向けRustのセットアップ

WebAssemblyターゲット向けにRust開発環境を設定し、新しいWASMプロジェクトを初期化します

「WebAssembly向けRustのセットアップ」はCoddyKit上の無料WebAssembly (WASM) for High Performance Appsレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはWebAssembly (WASM) for High Performance Apps学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 WebAssembly (WASM) for High Performance Appsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Rust & WebAssembly Setup

Welcome! Rust is a fantastic language for building high-performance WebAssembly (WASM) modules.

Its focus on speed, memory safety, and control makes it ideal for web applications needing native-like performance.

In this lesson, we'll configure your environment and create your first Rust-WASM project.

Verify Rust & Cargo

Before we dive into WASM, ensure you have the Rust toolchain installed. This includes Rustc (the compiler) and Cargo (the package manager).

You can check by typing rustc --version and cargo --version in your terminal.
If not installed, visit rustup.rs to get rustup, the official Rust installer.

First Rust Program

Let's confirm your Rust setup is working. Create a file named main.rs and add this code. Then run it using cargo run.

fn main() {
  println!("Hello from Rust!");
}

Install WASM Target

WebAssembly isn't a default target for Rust. You need to explicitly add it to your toolchain.

The wasm32-unknown-unknown target is a generic WASM target that doesn't assume any specific host environment (like a browser or Node.js).

Run this command in your terminal:

rustup target add wasm32-unknown-unknown

Meet wasm-pack

Building Rust code for WebAssembly can involve several steps. That's where wasm-pack comes in!

wasm-pack is a powerful command-line tool that streamlines the entire workflow: compiling your Rust code, generating JavaScript bindings, and packaging it for web usage.

Install wasm-pack Tool

Since wasm-pack is a Rust application, you can install it using Cargo, Rust's package manager.

Run this command in your terminal:

cargo install wasm-pack

This might take a moment as it compiles the tool.

Initialize WASM Project

Now let's create a new Rust project specifically for WebAssembly. wasm-pack can scaffold this for you.

Navigate to your desired projects directory and run:

wasm-pack new my-first-wasm-app

This command creates a new directory, my-first-wasm-app, with a basic Rust library structure ready for WASM.

Explore Project Files

Inside your new my-first-wasm-app directory, you'll find:

Cargo.toml: Rust's manifest file, defining project dependencies and metadata.
src/lib.rs: This is where your Rust code for the WASM module will live. Unlike traditional Rust applications, WASM modules are usually libraries.
.gitignore: Standard Git ignore file.

Simple WASM Function

Open src/lib.rs. You'll see some boilerplate. Let's add a simple function that can be called from JavaScript:

The #[wasm_bindgen] attribute tells wasm-bindgen (which wasm-pack uses) to generate JavaScript glue code for this function.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
  format!("Hello, {}!", name)
}

// You might also find a #[wasm_bindgen]
// macro for a `start` function or other
// initial setup in a new project.

Compile to WASM

With your Rust WASM code ready, it's time to compile it into a WebAssembly module and its JavaScript bindings.

Navigate into your project directory (my-first-wasm-app) and run:

wasm-pack build

This command compiles your Rust code, generates the necessary .wasm and .js files, and places them in a new pkg directory.

WASM Setup Quiz

You've learned about the essential tools for Rust WebAssembly development. Which of the following commands are crucial for setting up a Rust environment for WASM and creating a new project?

Recap: Rust WASM Setup

Great job! You've successfully set up your Rust environment for WebAssembly development.

We covered:

Verifying your Rust toolchain.
Adding the wasm32-unknown-unknown target.
Installing and using wasm-pack to initialize and build your first WASM project.
Understanding the basic project structure and a simple #[wasm_bindgen] function.

Next, you'll learn how to load and run your compiled WASM module in a web browser using JavaScript!

よくある質問

「WebAssembly向けRustのセットアップ」レッスンは無料ですか？

はい。「WebAssembly向けRustのセットアップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、WebAssembly (WASM) for High Performance Appsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 WebAssembly (WASM) for High Performance Appsコースには全4レッスンが含まれています。

「WebAssembly向けRustのセットアップ」で何を学びますか？

WebAssemblyターゲット向けにRust開発環境を設定し、新しいWASMプロジェクトを初期化しますブラウザで直接実行するハンズオンコードでWebAssembly (WASM) for High Performance Appsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

WebAssembly (WASM) for High Performance Appsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWebAssembly (WASM) for High Performance Appsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「WebAssembly向けRustのセットアップ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWebAssembly (WASM) for High Performance Appsレッスンでコードを書いて実行できますか？

はい。すべてのWebAssembly (WASM) for High Performance Appsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← WebAssembly (WASM) for High Performance Appsに戻る