コピー2023.03.22この記事は約5分で読めます。Webブラウザ上でネイティブコードを実行する仕組みにWebAssembly(wasm)という仕組みがあります。高度な画像処理などの計算をネイティブで高速に実行することでアプリケーションのパフォーマンスが向上しユーザー体験の向上が期待できます。現代のウェブブラウザーで実行できる新しい種類のコードです。ネイティブに近いパフォーマンスで動作する、コンパクトなバイナリー形式の低レベルなアセンブリー風言語です。言語のコンパイル先となり、それらの言語をウェブ上で実行することができます。WebA...developer.mozilla.orgNuxt3にはexperimental機能でありますがデフォルトでwasmをロードするための仕組みが用意されています。今回はこのwasmロード機能を使って、nuxtのプログラム内でwasmのプログラムを実行する方法を見ていきます。3.2.3Nuxt3でのwasmのロードNuxt3(nitro)内部ではrollupのwasmプラグインを使用しています。拡張子がwasmのファイルのimport宣言を検出するとrollupによりwasmファイルのloadが実行されコードがtransformされます。@rollup/plugin-wasmrollupのplugin-wasmは、wasmのロードをへルパーコードに置換します。4つのtargetがあり、それぞれ以下のようになっています。nodejs想定、Base64からのデコード。ブラウザ想定、fetchまたはBase64からのデコード。https://github.com/rollup/plugins/blob/master/packages/wasm/src/helper.tsNuxt3での設定nuxt.config.tsには、rollupのplugin-wasmのオプションを指定することができます。nuxt3の公式の例ではboolean型のtrueを指定しています。trueはwasmロードを有効化するだけでrollupには無害な値となっています。RollupWasmOptionsの指定が可能},},});実際に指定できるオプションには以下があります。https://github.com/rollup/plugins/tree/master/packages/wasm/#readmeNuxt3でWASMを実行してみる簡単な四則演算を実行するだけのプログラムを実行してみます。wasmのビルドまずは、Cのコードです。EMSCRIPTEN_KEEYALIVEマクロを指定するとwasmのexport対象と認識されます。b;}今回はemccコマンドでStandaloneモードでビルドします。--no-entry--no-entryがないと以下のようなエラーになります。メッセージを読むと、Standaloneモードのwasmでは--no-entryを使用するようにとあります。errors生成されたwasmフィアるをテキスト表現形式で表示してみます。emscriptenの補助関数はなくStandaloneモードになっているようです。サイズは292byteです。0))nuxt続いてnuxt側のコードです。configは以下のようにします。["@nuxt/ui"],});クライアントは計算に使用する2値をクエリで渡してfetch関数でapiを呼びます。サーバapiではクライアントから受け取った値を元に計算を行ない結果をjsonで返します。以下のnuxtのサンプルプログラムと同様な形です。参考:https://github.com/nuxt/framework/tree/main/examples/experimental/wasmserver/api/calc.tsimportでwasmファイルを呼んでいます。この結果はrollupによりtransformされます。instance;}.nuxt/dev/index.mjsを見ると以下のようなコンパイル後のコードを確認できます。wasmプログラムはbase64でエンコードされているようです。calc});app.vueapp.vueでは、fetchでapiを呼び計算結果を受け取り表示します。}}</code></p></NuxtExampleLayout></template>実際にページにアクセスしてみると、aとbの2値を用いた各計算結果を取得できるていることを確認できます。wasm機能は本執筆時点での公式ドキュメントを見るとexperimental機能となっていますが問題なく動作しているようです。次はもう少し複雑な計算も試してみたいと思います。webglを簡単に組み込みできるnpmモジュールを書いてみました。unityのwebglビルドを配置してコンポーネントを指定するだけです。windowのリサイズに合わせてcanvasタグのサイズも変わるようにしていま...NuxtJSNuxt3でExpressを使ってみるはじめにNuxt3には、nitro(+h3)というサーバエンジンが標準で備わっているため、server/apiやserver/routeディレクトリにハンドラファイルを置くだけでAPIが簡単に実装できます。馴染みのあるexpress...NuxtJSnuxt3のserver/apiで認証済みか否かをチェックするはじめに前回Nuxt3の@sidebase/nuxt-authで認証処理を作成しました。今回はserver/apiやmiddlewareで認証済みかチェックする処理を作ります。パターン以下3つのパターンで書いてみます。provideしたコンポーネントでinjectvee-validateを見ていて、なるほどこれは参考になると思ったのでメモ。provide/injectについて、provideで提供したオブジェクトは子ノードでinjectすることで子ノード内に依存関係を持ち込むことができる。provi...NuxtJSNuxt3でのビルド後の環境変数の適用(node-server)Nuxt3にはdotenvが組み込まれていて、プロジェクトトップにある.envファイルを読み込み環境変数として使用することができます。devモード時は気にしませんが、ビルド後に例えばnode-serverで実行するような場合、利用者側でno...NuxtJSNuxt3でページ遷移時にページトップにスクロールするNuxt3でページ遷移時にページトップにスクロールさせる方法についてです。rc.13版にアップグレードしてみるとスクロールトップのオプションが入っているようでした。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。名前:moritetuITエンジニア地方でITエンジニアをしています。Webやスマフォアプリ、Hadoopなどのビッグデータに関するシステムに関わり、現在は企画開発の業務をしています。(必須)サイトタイトルとURLをコピーしました。