【JavaScript】FirefoxとSafariでJsonファイルを読み込まなかった話

# はじめに

こんにちは、プログラミングを始めて約3年のエンジニアのkeitaMaxです。

今回はJavaScriptを実装しているうえで困ったことを書きます。

JavascriptでJsonファイルを読み込むという実装を行っていたのですが、FirefoxとSafariでエラーになってしまって困ったときの話です。

# どんな実装をしたか

以下のようにHtmlファイルととJsonファイルを実装しました。

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      import data from "./data.json" assert { type: "json" };
      console.log(data);
    </script>
  </body>
</html>

```

```json:data.json
{
  "id": "1",
  "name": "aaa"
}
```

Chromeで見てみると以下のようにdata.jsonの中身が見れるのですが、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/8ed35aba-19a7-a84a-5c68-60f957529a79.png)


Firefoxで見たときに以下のように`Uncaught SyntaxError: unexpected token: 'assert'`になってしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/5e430c6c-3795-d42c-e9f1-c69c08b0b56d.png)



# 原因

` assert { type: "json" }`これがFirefoxとSafariで対応していないことが原因でした。

![スクリーンショット 2024-03-26 112850.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/cd83080f-a1a3-fe4d-53ff-71edcdf4d3a8.png)

(引用元：https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)


# 解決策①

jsonファイルをjsファイルにして、exportしてみました。

```js:data.js
const data = {
  id: "1",
  name: "aaa",
};

export { data };
```
```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      import { data } from "./data.js";
      console.log(data);
    </script>
  </body>
</html>
```
こうするとしっかりとFirefoxでも見ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/1aba4e38-7cfc-1579-9755-8454688b6668.png)

# 解決策②

fetchを使用してJsonファイルの中身をとってみようと思います。

以下の記事を参考にしました。

https://qiita.com/Molly95554907/items/730220dfc1178e78d7ce

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      fetch("./data.json")
        .then((response) => {
          return response.json();
        })
        .then((result) => {
          console.log(result);
        });
    </script>
  </body>
</html>
```

```json:data.json
{
  "id": "1",
  "name": "aaa"
}
```

これをFirefoxで見てみると、以下のように値が取れているのがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/78502148-dd93-98e1-7f81-d4a5a45f84e8.png)




# おわりに

ブラウザの自動テストを行わないとなかなか気が付けないなと感じました。

以前Next.jsでやったPlaywrightを使用したテストなどを導入したらこのような不具合は抑えられそうなので、今後自動テストを入れていきたいと思います。

https://qiita.com/keitaMax/items/28a414855c81b4c72536

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！


# 参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules

https://qiita.com/Molly95554907/items/730220dfc1178e78d7ce