😳

SvelteKitでwasmを動かしてみる

2022/05/15に公開約1,500字

はじめに

特にどういった素敵な未来かわからんけど Rust + WebAssembly の未来を感じている。その先の wasi and 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/libwasmプロジェクト作成

$ cargo install wasm-pack
$ cd SampleSvelteKitApp/src/lib
$ cd hello_wasm
$ 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 などで何ができるのかとよくわからん。

個人的におっちゃん(オワコンエンジニア)はDocker嫌いだしオワコンだと考えているので、WebAssemblyで同じような環境構築できればとこれがサーバ身立ててクラウドに頼らない真のサーバレスの時代がくればいいなぁとだけぼんやり考えてもいる。

Discussion

ログインするとコメントできます