Zenn
😎

SvelteKitでwasmを動かしてみる

2023/08/10に公開
Rust
WebAssembly
WebAssembly
Svelte
SvelteKit
tech

はじめに

特にどういった素敵な未来かわかりませんけど Rust + WebAssembly の未来を感じています。その先の wastime や wasmer で素敵な未来が来ると直感的に信じている。

OS依存しない / Linuxからの脱却への期待

SvelteKitもコンパイルツール(Vite)としてwasmとの相性良さを期待して軽く検証してみます。よくあるコピペでくだらない記事であリますのでご了承ください。

SvelteKit

https://kit.svelte.dev

$ npm init svelte SampleSvelteKitApp
$ cd SampleSvelteKitApp
$ npm install
$ npm run dev -- --open

Rust

SvelteKitプロジェクト内のsrc/libで wasmプロジェクト作成

$ cargo install wasm-pack
$ cd SampleSvelteKitApp/src/lib
$ cargo new --lib hello_wasm
$ cd hello_wasm
  • src/lib.rs
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}
  • Cargo.toml
[package]
name = "helo_wasm"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"

$ wasm-pack build --target web
  • App.svelte
import { onMount } from 'svelte';
import Counter from '$lib/Counter.svelte';
import init, { greet } from '$lib/hello_wasm/pkg';

onMount(async () => {
  await init();
  await greet('zenn')	
})

Hello zenn とアラートが出ればおk

所感

ソシャゲー業界でブラウザかネイティブかしのぎ合っていた頃で WebAssembly が出てきましたが、いまだにwasi などで何ができるのかとよくわかりません。

WebAssemblyでDockerと同じような環境構築できればとこれがサーバ身立ててクラウドに頼らない真のサーバレスの時代がくればいいなぁとだけぼんやり考えています。

Discussion