【React】HTMLにscriptタグでjsonデータを埋め込んでそれを取得して使う方法

2023年10月19日React

HTMLにscriptタグでjsonデータを埋め込んでそれを取得して使う方法を紹介します。
apiを叩いて取得するのではなく、phpなどであらかじめjsonデータをHTMLに落としてそれをJavaScriptで取得して使う方法を紹介します。
以下はReactの例ですが、別にReactでなくても利用できます。

htmlにscriptタグでjsonデータを埋め込んでそれを取得して使いたいとき

HTMLにscriptをタグを準備する

<!-- JSONデータを埋め込む -->
<script type="application/json" id="catalog-data">
[
  {
    "categoryId": 1,
    "categoryName": "総合カタログ",
    "items": [
      {
        "id": 1,
        "title": "総合カタログ",
        "imgSrc": "/assets/images/catalog/img01.jpg",
        "text": "カタログの内容を、説明する内容が入ります。"
      }
    ]
  },
  ...
]
</script>

上のように、type="application/json"をscriptタグにつけるのがポイントです。
これでjson形式で埋め込むことが可能になります。

Reactで取得(JavaScriptであればなんでも可)

import React, { useEffect, useState } from 'react';
import SearchForm from './SearchForm';
import CatalogCategory from './CatalogCategory';
import useCatalogData from './helpers/useCatalogData';

// カタログ一覧のコンポーネント
function Catalog({ cartItems, onAddToCart }) {
  const catalogData = useCatalogData();

  useEffect(() => {
    // カタログリンククリック時のイベントハンドラー
    const handleCatalogLinkClick = event => {
      event.preventDefault();
      const catalogId = event.currentTarget.getAttribute('data-catalog-id');

      // セッションストレージからカタログIDの配列を取得。存在しない場合は新しい空の配列を作成
      const catalogIds = JSON.parse(sessionStorage.getItem('catalogIds')) || [];

      // catalogId を数値に変換して一意か調べる
      const numericCatalogId = parseInt(catalogId, 10);

      if (!catalogIds.some(id => parseInt(id, 10) === numericCatalogId)) {
        // カートアイテムを更新
        onAddToCart(numericCatalogId);

        // catalogId を追加
        catalogIds.push(numericCatalogId);

        // カタログID一覧をセッションストレージに保存
        sessionStorage.setItem('catalogIds', JSON.stringify(catalogIds));
      }
    };
    // カタログリンク要素を取得
    const catalogLinks = document.querySelectorAll('.js-catalog-link');
    // カタログリンククリック時のイベントリスナーを設定
    catalogLinks.forEach(catalogLink => {
      catalogLink.addEventListener('click', handleCatalogLinkClick);
    });

    // コンポーネントがアンマウントされる際にイベントリスナーをクリーンアップ
    return () => {
      catalogLinks.forEach(catalogLink => {
        catalogLink.removeEventListener('click', handleCatalogLinkClick);
      });
    };
  }, []);

  return (
    <div className="contents__main">
     ...
    </div>
  );
}

export default Catalog;

こちらの例では、カタログの一覧データを取得したいときに、HTMLの中にそのデータをjson形式で落とします。
そして、それを取得するためのコードです。

helpers/useCatalogData.js

/**
 * カタログデータを取得するカスタムフック
 *
 * @returns {Object} カタログデータのオブジェクト
 */
function useCatalogData() {
  const catalogDataJSON = document.getElementById('catalog-data').textContent;
  const catalogData = JSON.parse(catalogDataJSON);

  return catalogData;
}

export default useCatalogData;

そして、helpersなどのディレクトリにデータを取得するカスタムフックを作成すればOKです。