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

1. React で外部ファイルから JSON データを読み取る
2. import ステートメントを使用して、React で外部ファイルから JSON データを読み取る
3. require() 関数を使用して、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 で確認してください。