React で外部ファイルから JSON データを読み取る

JSON は、Web 上でデータを交換するための最も実用的な形式です。 React で構築された Web アプリケーションは通常、外部データを JSON 形式で取得します。

外部データがなければ、アプリケーションはあまり役に立たず、動的でもありません。 通常、データ ソースは API ですが、外部ファイルの場合もあります。

この記事では、React で JSON ファイルからデータを読み取る方法について説明します。

React で外部ファイルから JSON データを読み取る

React で JSON ファイルからデータにアクセスするのはかなり簡単です。 JSX では、.map() メソッドを使用して配列を調べ、配列内のすべてのオブジェクトからの情報を表示できます。

そのためには、中括弧 {} が必要になります。これにより、JavaScript 式を使用して <h1> などの要素を生成できるようになります。

React でそれを行う 2つの方法を見てみましょう。

import ステートメントを使用して、React で外部ファイルから JSON データを読み取る

シンプルな import ステートメントを使用して、外部の JSON データを React コンポーネントで利用できるようにすることができます。

import ステートメントはライブ バインディングを作成します。 つまり、元のファイルのデータの一部を変更すると、アプリケーションの値も更新されます。

例：

import { stockData } from "./data";

export default function App() {
    return (
    <div className="App">
            {stockData.map((data, key) => {
                return <h1 key={key}>{data.company}</h1>;
            })}
        </div>
    );
}

JSON 形式のオブジェクトを含む data.json ファイルから stockData 変数をインポートしました。

次に、中括弧を使用して stockData 配列の .map() メソッドを呼び出し、配列内の各項目の値を <h1> 要素として表示しました。

CodeSandbox で このライブ デモ をチェックしてください。 ソース データの何かを変更してみて、React アプリで何か変更があるかどうかを確認してください。

require() 関数を使用して、React で外部ファイルから JSON データを読み取る

require() 関数を使用して、React コンポーネントで外部 JSON データを読み取る別の方法があります。

例：

var data = require("./moredata.json");

export default function App() {
    return (
        <div className="App">
            {stockData.map((data, key) => {
                return <h1 key={key}>{data.company}</h1>;
            })}
            <h2>The name is: {data[0].name}</h2>
        </div>
    );
}

この場合、moredata.json ファイルからデータを読み取り、data 変数に保存します。

次に、<h2> 要素を作成しました。 開始タグと終了タグの間に、ロードしたデータへの参照を配置しました。

配列の最初のオブジェクトの name プロパティを読み取ります。 ライブ デモ でわかるように、動作します。

考えられるエラー

最近のバージョンの Webpack はこの機能をサポートしています。 エラーが発生した場合は、json-loader などの外部ローダーのインストールを検討してください。

npm で確認してください。