🐷

.js と同じフォルダにある wasm ファイルを読みたい

2025/06/27に公開

tinysudz.js
tinyusdz.wasm

と同じフォルダにある .wasm を tinyusdz.js 内から読みたいとする

const path = "./tinyusdz.wasm";
const data = fetch(path);

だと状況によってはうまくいくケースもあるが, 基本

src/
  tinysudz.js
  tinyusdz.wasm

みたいになっている場合は "./" は URL の基点(?)と解釈されるため, うまくいかない.

ちなみに fetch は存在しないファイルに対しても response 200 を返すので, 実際にファイルが読めているかはファイルサイズや magic number をチェックで判定しないといけなくてめんどくさい.

解決

import.meta.url で今動いている js (module)の絶対パスが取れるので,

const path = new URL("tinyusdz.wasm", import.meta.url).href;
const data = fetch(path);

こんな感じにする.

import.meta は ES6 ではなく ES2020 の仕様とのことだが...

2025/06 時点では主要ブラウザで全対応されているのでヨシ!

より詳しくは ChatGPT なり Claude に聞いて.