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