💡
JS テキストファイルを静的にimportしてみる
概要
fetchで読み込むのではなく、ES2015のモジュールのimportと同じような書式でテキストデータを読み込む。
data.txt
The quick brown fox jumps over the lazy dog
<script type="module">
import module from "./module.js";
import text from "./data.txt"; // module.jsのような書き方でテキストをimportしたい
console.log(text); // output "The quick brown fox jumps over the lazy dog"
</script>
そのままで動かすと、data.txtをスクリプトとして扱おうとしてエラー。
テキストファイルを別モジュールで読み込んでみる
いきなり、それっぽくなった。モジュールのトップレベルでfetchで読み込み、応答を待機した後テキストデータを返す。
欠点としてテキストファイル毎にモジュールを作る必要がある。
data.txt.js
const response = await fetch("./data.txt");
const text = await response.text();
export default text;
<script type="module">
import text from "./data.txt.js";
console.log(text); // output "The quick brown fox jumps over the lazy dog"
</script>
import.metaを使おう
テキストファイルを読み込むモジュールのパスにパラメータを渡してテキストファイルを可変にする。
モジュール側でimport.meta.urlを利用してパラメータを取り出す。
importText.js
// path=テキストファイルのパス
const url = new URL(import.meta.url);
const path = url.searchParams.get("path");
const response = await fetch(path);
const text = await response.text();
export default text;
<script type="module">
import text from "./importText.js?path=data.txt";
console.log(text); // output "The quick brown fox jumps over the lazy dog"
</script>
モジュールのコード実行はロードされたとき1回のみだが、./importText.js?path=aaa.txtと./importText.js?path=bbb.txtは異なるモジュールと認識されるので、異なるファイルを読み込める。
JSONも読み込んじゃえ
テキストファイルを読み込むモジュールのawait response.text()をawait response.json()に変えれば、JSONも読み込める。
config.json
{"aaa":100}
importJson.js
// path=JSONファイルのパス
const url = new URL(import.meta.url);
const path = url.searchParams.get("path");
const response = await fetch(path);
const json = await response.json();
export default json;
<script type="module">
import config from "./importJson.js?path=config.json";
console.log(config); // output "{aaa:100}"
</script>
まとめ
読み込むモジュールが必要になるが、それっぽくできた。
Discussion