71c15a4c9b97dd413d9d.md (2160B)
1 --- 2 title: Next(TypeScript) + WASM(Rust) + Vite をお試し 3 tags: 4 - Rust 5 - Next.js 6 - wasm 7 private: false 8 updated_at: '2026-06-17T07:15:19+09:00' 9 id: 71c15a4c9b97dd413d9d 10 organization_url_name: null 11 slide: false 12 ignorePublish: false 13 --- 14 # はじめに 15 最近何かと話題のRustをWebで使う手法として、WASMというものを知りました。 16 正確にはWASMはブラウザで実行されるバイナリファイルであり、その規格でありますが、RustをそちらにコンパイルしてWeb側(Next.js)から呼び出せるようにしてみたいと思います。 17 Rustでフロントをいじるactix-webのようなものとは違うという趣旨だけ、ご了承ください。 18 19 # 下準備 20 PCを初期化したばかりだったので、いくつか入っていないツールがありました。入れときます。 21 `winget install Oven-sh.bun` 22 またnode.jsを入れておきましょう(わたしはこれは入ってた) 23 WASMをRustで書くためにはRustのパッケージマネージャーとしてcargoやその他ツールチェーンを入れます。 24 公式ページからインストールスクリプトを取ってきます。 25 クイックインストール(Visual Studio経由)でやろうとするとWindows11 SDKを入れられそうだったので、マニュアルインストールにしました。Ubuntuに入れたときみたいな入り方で安心しました。 26 ですが、次の手順にてエラーが出たので追加のダウンロードをしました。Visual Studio Build Toolsです。`C++デスクトップ開発`にチェックを入れて入れます。 27 あとは`cargo install wasm-pack`もしてWASMに関係するツールも入れておきます。 28 # init 29 ## リポジトリ作成 30 `npx create-next-app@latest` 31 を実行します。私はTypeScriptが好きなのでTypeScriptを選択します。 32 また、見た目を工夫するような余力はないので余裕があればBootStrapでも導入しようかなと思っています。 33 ## Rust系のインストール 34 WASM系のものを作るコマンド`cargo new --lib wasm` 35 ビルドは`wasm-pack build --target web`