MENU
  1. ホーム
  2. React
  3. ReactでJSONから配列データをインポートして表示する方法を徹底解説

ReactでJSONから配列データをインポートして表示する方法を徹底解説

React

Reactは、近年フロントエンド開発の世界で最も人気のあるJavaScriptライブラリの一つです。その強力な機能の一つに、外部ファイルからのデータインポートがあります。これにより、アプリケーションで外部JSONファイルやAPIから配列データを簡単に取り込み、動的に表示することができます。本記事では、Reactを使ってJSONファイルから配列データをインポートし、それを画面上に効率よく表示する方法について、具体的な手順を追いながら解説します。このプロセスをマスターすることで、より柔軟でスケーラブルなアプリケーションを構築するスキルが身につくでしょう。

目次
  1. JSONファイルの準備と基本構造
    1. JSONファイルの基本構造
    2. JSONファイルの作成と保存
    3. データの形式と使用目的
  2. Reactアプリケーションの環境設定
    1. Reactプロジェクトの作成
    2. 必要なパッケージのインストール
    3. プロジェクトのディレクトリ構造
    4. プロジェクトの動作確認
  3. JSONファイルのインポート方法
    1. JSONファイルをReactにインポート
    2. JSONデータの表示
    3. コードの動作確認
    4. 注意点
  4. JSONデータの表示方法
    1. データをReactコンポーネントに渡す
    2. コードのポイント
    3. データを装飾する
    4. データの動的な変化
  5. 配列データの動的レンダリング
    1. 動的レンダリングの基本
    2. コードの解説
    3. データの動的フィルタリング
    4. フィルタリングとレンダリングの組み合わせ
    5. 注意点
  6. 配列データのスタイリング
    1. CSSファイルでのスタイリング
    2. スタイリングのポイント
    3. 動的クラスの適用
    4. CSSフレームワークの活用
    5. 注意点
  7. JSONデータに基づくユーザーインタラクション
    1. 検索機能の実装
    2. フィルタリングボタンの追加
    3. インタラクションのポイント
    4. 応用例
  8. 外部APIからのJSON取得と統合
    1. 外部APIからデータを取得
    2. コードの解説
    3. axiosを使ったデータ取得
    4. 注意点
    5. 応用例
  9. トラブルシューティング
    1. よくあるエラーと対策
    2. デバッグのコツ
    3. まとめ
  10. 応用例：リアルタイムデータの表示
    1. WebSocketを使ったリアルタイム更新
    2. データの定期更新
    3. リアルタイムデータの可視化
    4. 注意点
  11. まとめ

JSONファイルの準備と基本構造


Reactで外部データを扱う際には、JSONファイルの構造を正しく理解し、適切に準備することが重要です。JSON（JavaScript Object Notation）は、軽量で読みやすいデータ交換フォーマットとして広く利用されています。

JSONファイルの基本構造


JSONファイルは、キーと値のペアでデータを表現します。以下は配列データを含むシンプルなJSONファイルの例です:

[
  {
    "id": 1,
    "name": "Alice",
    "age": 25
  },
  {
    "id": 2,
    "name": "Bob",
    "age": 30
  },
  {
    "id": 3,
    "name": "Charlie",
    "age": 35
  }
]

この例では、id、name、ageの3つのキーを持つオブジェクトが配列として格納されています。

JSONファイルの作成と保存


以下の手順でJSONファイルを作成します：

  1. 任意のテキストエディタ（VSCodeやNotepad++など）を開きます。
  2. 上記のようなJSONデータを入力します。
  3. ファイル名をdata.jsonのようにし、プロジェクトフォルダに保存します。

データの形式と使用目的


JSONファイルに含めるデータ形式は、アプリケーションの目的に応じて選びます。例えば、ユーザー情報、商品リスト、タスク一覧などのデータに適しています。

これでJSONデータの準備が整いました。次のステップでは、このデータをReactアプリケーションで扱うための環境設定について説明します。

Reactアプリケーションの環境設定


JSONデータを扱うためにReactアプリケーションを準備するステップを解説します。Reactプロジェクトを適切に構築することで、JSONファイルの読み込みや表示をスムーズに行うことができます。

Reactプロジェクトの作成


まず、Reactプロジェクトを作成します。以下のコマンドを使用して、新しいReactアプリをセットアップします。

npx create-react-app json-data-example
  • json-data-exampleはプロジェクト名です。任意の名前に変更可能です。
  • セットアップが完了したら、以下のコマンドでプロジェクトディレクトリに移動します。
cd json-data-example

必要なパッケージのインストール


通常、JSONファイルを操作するために特別なパッケージは必要ありません。しかし、外部APIからデータを取得する場合はaxiosやfetchを使用することが一般的です。

以下のコマンドでaxiosをインストールできます：

npm install axios

プロジェクトのディレクトリ構造


作成されたプロジェクトには、以下のようなディレクトリ構造があります：

json-data-example/
├── public/
├── src/
│   ├── App.css
│   ├── App.js
│   ├── index.js
│   ├── components/
│   └── data/
└── package.json
  • components/: コンポーネントファイルを格納するディレクトリです。
  • data/: JSONファイルを格納するディレクトリを作成します。

保存したJSONファイルをsrc/data/ディレクトリ内に配置します（例: data.json）。

プロジェクトの動作確認


Reactアプリを起動し、プロジェクトが正しく作成されたことを確認します。以下のコマンドを実行します：

npm start

ブラウザでhttp://localhost:3000にアクセスし、Reactのデフォルトページが表示されれば成功です。

これでReactプロジェクトの環境が整いました。次のステップでは、この環境を活用してJSONデータをインポートする方法を解説します。

JSONファイルのインポート方法


Reactでは、JSONファイルを簡単にインポートして利用することができます。このステップでは、ローカルのJSONファイルをReactコンポーネントに取り込む方法を解説します。

JSONファイルをReactにインポート


ReactアプリケーションでJSONデータを利用するには、以下の手順を実行します。

  1. JSONファイルをsrc/data/フォルダに保存します。
    例: src/data/data.json
  2. App.jsや任意のコンポーネントでJSONファイルをインポートします。

以下のコードは、data.jsonをインポートする例です。

import React from 'react';
import data from './data/data.json';

function App() {
  console.log(data); // コンソールでJSONデータを確認
  return (
    <div>
      <h1>JSONデータの表示</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

JSONデータの表示


上記のコードでは、<pre>タグを使用してJSONデータを整形して表示しています。
この方法はデバッグに便利ですが、実際のアプリケーションでは次のステップで解説するmap関数を使用してリストとして表示するのが一般的です。

コードの動作確認


Reactアプリを起動して、ブラウザ上でデータが正しく表示されていることを確認します。

npm start

ブラウザでhttp://localhost:3000を開くと、インポートされたJSONデータが画面に表示されます。

注意点

  • JSONファイルのパスは、Reactプロジェクト内の相対パスを指定する必要があります。
  • ファイル名やパスが正確であることを確認してください。ファイルが見つからない場合はエラーが発生します。

これでJSONファイルをReactアプリケーションにインポートする準備が完了しました。次のステップでは、インポートしたデータを使って画面に表示する方法について解説します。

JSONデータの表示方法


インポートしたJSONデータをReactコンポーネントで表示する方法を解説します。ここでは、基本的なデータの表示方法を学び、次の段階でより動的なレンダリングへと進めます。

データをReactコンポーネントに渡す


まず、インポートしたJSONデータをReactコンポーネントの状態やプロパティで扱えるようにします。以下は、データを簡単に表示する例です。

import React from 'react';
import data from './data/data.json';

function App() {
  return (
    <div>
      <h1>ユーザーデータ一覧</h1>
      {data.map((user) => (
        <div key={user.id}>
          <p><strong>名前:</strong> {user.name}</p>
          <p><strong>年齢:</strong> {user.age}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

コードのポイント

  1. data.mapの利用
    配列のmapメソッドを使用して、各データをReact要素として表示しています。
  2. ユニークなキーの指定
    各要素には一意のキー（key属性）を指定します。この場合、JSONデータのidを使用しています。Reactのレンダリング効率を高めるために重要な役割を果たします。
  3. データの分離
    各データ項目（nameやageなど）を適切に表示するため、タグで囲んで構造化しています。

データを装飾する


表示が見やすくなるようにCSSを追加します。以下は簡単なスタイリングの例です。

App.css:

div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

CSSを適用することで、各データの表示が整い、視覚的にわかりやすくなります。

データの動的な変化


上記のコードは静的なデータを表示する例ですが、次のステップでは動的レンダリングを学び、ユーザーの操作に応じたデータの表示方法を探ります。

配列データの動的レンダリング


JSONデータを動的にレンダリングすることで、Reactアプリケーションの柔軟性が向上します。このセクションでは、配列データをmap関数を使用して効率的にレンダリングする方法を詳細に解説します。

動的レンダリングの基本


Reactでは、map関数を利用して配列内のデータを動的に表示できます。以下のコードは、ユーザーデータを動的にレンダリングする例です。

import React from 'react';
import data from './data/data.json';

function App() {
  return (
    <div>
      <h1>ユーザーデータ一覧</h1>
      {data.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

function UserCard({ user }) {
  return (
    <div style={cardStyle}>
      <p><strong>名前:</strong> {user.name}</p>
      <p><strong>年齢:</strong> {user.age}</p>
    </div>
  );
}

const cardStyle = {
  margin: '10px 0',
  padding: '10px',
  border: '1px solid #ccc',
  borderRadius: '5px',
  backgroundColor: '#f9f9f9',
};

export default App;

コードの解説

  1. map関数の利用
    data.mapを使用し、配列内のデータをReactコンポーネントとして動的に生成しています。
  2. UserCardコンポーネントの作成
    個々のユーザーデータを表示するための再利用可能なコンポーネントを作成しました。これにより、コードの可読性と拡張性が向上します。
  3. インラインスタイルの使用
    cardStyleをインラインスタイルとして利用し、簡単なデザインを適用しています。

データの動的フィルタリング


データを動的にフィルタリングすることで、特定の条件に一致する要素のみを表示できます。以下は、30歳以上のユーザーのみを表示する例です。

function App() {
  const filteredData = data.filter((user) => user.age >= 30);

  return (
    <div>
      <h1>30歳以上のユーザー</h1>
      {filteredData.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

フィルタリングとレンダリングの組み合わせ

  • 条件に基づく表示
    filterメソッドを使用して条件に一致するデータを抽出し、その結果をmapでレンダリングします。
  • 動的な表示変更
    ユーザーの入力や選択に応じて条件を変更することで、動的に表示内容を切り替えることができます。

注意点

  • key属性の指定
    動的レンダリングでは、key属性が必須です。ユニークなキーを指定することで、Reactの仮想DOMの効率が向上します。
  • レンダリングの最適化
    データが膨大な場合、表示のパフォーマンスに注意が必要です。この場合、仮想スクロールやページネーションの実装を検討します。

これで、配列データを効率的に動的レンダリングする方法を学びました。次のステップでは、このデータにスタイリングを追加して、さらに見栄えの良い表示方法を紹介します。

配列データのスタイリング


データの動的レンダリングが成功したら、視覚的に魅力的なスタイリングを追加することで、アプリケーションの見やすさと使いやすさを向上させます。このセクションでは、CSSを使用したデータのスタイリング方法を解説します。

CSSファイルでのスタイリング


スタイルを管理する最も基本的な方法は、外部CSSファイルを使用することです。以下に、スタイリングを適用したコードとCSSの例を示します。

App.css:

.container {
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

.user-card {
  margin: 10px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-card h3 {
  margin: 0;
  font-size: 1.2em;
}

.user-card p {
  margin: 5px 0;
  color: #555;
}

App.js:

import React from 'react';
import './App.css';
import data from './data/data.json';

function App() {
  return (
    <div className="container">
      <h1>ユーザーデータ一覧</h1>
      {data.map((user) => (
        <div className="user-card" key={user.id}>
          <h3>{user.name}</h3>
          <p>年齢: {user.age}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

スタイリングのポイント

  1. コンテナの設計
    .containerクラスを用いて全体のレイアウトを整えています。背景色や余白を追加し、データ表示部分を視覚的に際立たせます。
  2. カードデザイン
    .user-cardクラスでデータをカード形式に整え、見やすさを向上させています。ボックスシャドウを加えることで、立体感を演出します。
  3. テキストの階層化
    名前はh3タグ、年齢はpタグで表示し、情報の重要度に応じてフォントサイズや色を変更しています。

動的クラスの適用


動的にスタイルを切り替えたい場合は、条件付きクラスを適用します。たとえば、30歳以上のユーザーに特別な背景色を付ける例です。

function App() {
  return (
    <div className="container">
      <h1>ユーザーデータ一覧</h1>
      {data.map((user) => (
        <div
          className={`user-card ${user.age >= 30 ? 'highlight' : ''}`}
          key={user.id}
        >
          <h3>{user.name}</h3>
          <p>年齢: {user.age}</p>
        </div>
      ))}
    </div>
  );
}

App.css:

.user-card.highlight {
  background-color: #ffefc6;
}

CSSフレームワークの活用


BootstrapやTailwind CSSのようなCSSフレームワークを利用すると、スタイリングが簡単になり、レスポンシブデザインも容易に実現できます。以下はBootstrapを使用した例です。

import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="container mt-4">
      <h1 className="text-center mb-4">ユーザーデータ一覧</h1>
      {data.map((user) => (
        <div className="card mb-3" key={user.id}>
          <div className="card-body">
            <h3 className="card-title">{user.name}</h3>
            <p className="card-text">年齢: {user.age}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

注意点

  • スタイリングはシンプルに保ち、過剰な装飾を避けることで、データの見やすさを確保します。
  • レスポンシブデザインを意識し、画面サイズに応じたスタイルを適用することを検討してください。

これで、JSONデータのスタイリングが完了しました。次のセクションでは、データ表示にインタラクションを追加する方法を解説します。

JSONデータに基づくユーザーインタラクション


データのスタイリングが完成したら、次はユーザーインタラクションを追加して、より動的で使いやすいReactアプリケーションを作成します。このセクションでは、ボタンやフィルタリング機能を活用したインタラクティブなデータ表示方法を解説します。

検索機能の実装


ユーザーがデータを検索できるようにすることで、大量の情報の中から必要なデータを見つけやすくします。

import React, { useState } from 'react';
import data from './data/data.json';
import './App.css';

function App() {
  const [search, setSearch] = useState('');

  const filteredData = data.filter((user) =>
    user.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="container">
      <h1>ユーザーデータ検索</h1>
      <input
        type="text"
        placeholder="名前で検索"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        className="search-input"
      />
      {filteredData.map((user) => (
        <div className="user-card" key={user.id}>
          <h3>{user.name}</h3>
          <p>年齢: {user.age}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

コード解説

  1. useStateの利用
    ユーザーの入力値を管理するためにuseStateを使用します。
  2. filterメソッド
    入力値に一致する名前を持つユーザーのみを表示します。
  3. リアルタイム検索
    入力フィールドのonChangeイベントでsearchの値を更新し、即座に検索結果を反映します。

CSS例:

.search-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

フィルタリングボタンの追加


ユーザーがボタンを使ってデータをフィルタリングできるようにします。

function App() {
  const [filter, setFilter] = useState('all');

  const filteredData = data.filter((user) => {
    if (filter === 'all') return true;
    if (filter === 'under30') return user.age < 30;
    if (filter === 'over30') return user.age >= 30;
    return true;
  });

  return (
    <div className="container">
      <h1>ユーザーデータのフィルタリング</h1>
      <div>
        <button onClick={() => setFilter('all')}>すべて</button>
        <button onClick={() => setFilter('under30')}>30歳未満</button>
        <button onClick={() => setFilter('over30')}>30歳以上</button>
      </div>
      {filteredData.map((user) => (
        <div className="user-card" key={user.id}>
          <h3>{user.name}</h3>
          <p>年齢: {user.age}</p>
        </div>
      ))}
    </div>
  );
}

CSS例:

button {
  margin: 5px;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

インタラクションのポイント

  1. ユーザビリティの向上
    シンプルなUIとわかりやすい操作で、ユーザーが必要な情報に素早くアクセスできるようにします。
  2. パフォーマンスへの配慮
    filterやmapの操作が多い場合でも、Reactの再レンダリングを効率的に行えるようにコードを最適化します。
  3. 視覚的フィードバック
    ボタンの色やホバー効果など、操作が反映されていることを視覚的に示します。

応用例

  • チェックボックスを使用した複数条件のフィルタリング。
  • ドロップダウンメニューでのソート（例: 年齢順）。

これで、Reactアプリにインタラクションを追加する方法がわかりました。次のステップでは、外部APIからJSONデータを取得して統合する方法を解説します。

外部APIからのJSON取得と統合


Reactでは、外部APIからリアルタイムでデータを取得し、それをアプリケーションに統合することで、動的で実用的なアプリを作成できます。このセクションでは、fetchやaxiosを使用したデータ取得方法を解説します。

外部APIからデータを取得


以下は、外部APIからJSONデータを取得して表示する例です。

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => {
        console.error('データ取得中にエラーが発生しました:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>データを読み込み中...</div>;
  }

  return (
    <div className="container">
      <h1>外部APIからのユーザーデータ</h1>
      {data.map((user) => (
        <div className="user-card" key={user.id}>
          <h3>{user.name}</h3>
          <p>メール: {user.email}</p>
          <p>住所: {user.address.city}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

コードの解説

  1. useEffectの使用
    ReactのuseEffectフックを利用して、コンポーネントが初回レンダリングされたタイミングでデータを取得します。
  2. APIエンドポイント
    この例では、JSONPlaceholderの/usersエンドポイントを使用しています。適切なAPIエンドポイントを設定することで、任意のデータを取得可能です。
  3. ローディング状態の管理
    loading状態を使用して、データ取得中にユーザーへローディングメッセージを表示します。
  4. エラーハンドリング
    データ取得中にエラーが発生した場合、コンソールにエラーメッセージを表示するようにしています。

axiosを使ったデータ取得


fetchの代わりにaxiosを使用することで、コードを簡潔にすることもできます。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        console.error('データ取得中にエラーが発生しました:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>データを読み込み中...</div>;
  }

  return (
    <div className="container">
      <h1>外部APIからのユーザーデータ</h1>
      {data.map((user) => (
        <div className="user-card" key={user.id}>
          <h3>{user.name}</h3>
          <p>メール: {user.email}</p>
          <p>住所: {user.address.city}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

注意点

  1. CORSの問題
    一部のAPIでは、CORS（クロスオリジンリソース共有）の設定が必要です。ローカル開発環境では、proxy設定を利用するか、適切なヘッダーを設定してください。
  2. APIキーの管理
    認証が必要なAPIでは、APIキーを安全に管理する必要があります。環境変数を利用するのが一般的です。
  3. データ形式の確認
    APIから返されるデータの形式が想定通りであることを確認してください。データ構造が異なるとエラーの原因になります。

応用例

  • ページネーションを導入して大量データを効率的に表示。
  • フォームを使ってユーザー入力をAPIに送信し、結果を取得。
  • WebSocketを利用してリアルタイムで更新されるデータを取得。

外部APIからのデータ取得を統合することで、Reactアプリケーションはさらに強力で柔軟なものになります。次のセクションでは、よくあるエラーとその解決方法について解説します。

トラブルシューティング


外部JSONデータのインポートやAPI統合を行う際、予期しないエラーが発生することがあります。このセクションでは、Reactでよくあるエラーとその解決方法を解説します。

よくあるエラーと対策

1. **JSONファイルの読み込みエラー**


エラー内容:
Module not found: Can't resolve './data.json'

原因:
JSONファイルのパスが間違っている、またはファイル名が正しくない。

解決方法:

  • ファイルパスを確認し、正しい相対パスを指定してください。
  • ファイル名や拡張子が正しいことを確認してください。例: data.json

2. **CORSエラー**


エラー内容:
Access to fetch at 'https://example.com' from origin 'http://localhost:3000' has been blocked by CORS policy.

原因:
APIがCORS（クロスオリジンリソース共有）をサポートしていない。

解決方法:

  • 開発中の場合、APIリクエストにproxyを使用します。
    package.jsonに以下を追加します:
  "proxy": "https://example.com"
  • 本番環境では、CORS対応のサーバー設定やリバースプロキシを使用してください。

3. **無効なJSON形式エラー**


エラー内容:
Unexpected token

原因:
JSONデータが正しい形式ではない。たとえば、カンマの欠落や不適切な文字列が原因。

解決方法:

  • JSONファイルをJSON Linter（オンラインツール）で検証して、形式の誤りを修正します。

4. **データが正しく表示されない**


エラー内容:
TypeError: Cannot read property 'name' of undefined

原因:
JSONデータの構造が想定と異なる。

解決方法:

  • APIレスポンスやJSONファイルのデータ構造をconsole.logで確認します。
  • 想定と異なる場合、データのパスを修正します。例:
  <p>{user?.name || 'データがありません'}</p>

5. **APIキーの公開**


エラー内容:
APIキーがGitHubや公開リポジトリに含まれている。

原因:
ソースコード内にハードコードされたAPIキーが誤って公開された。

解決方法:

  • .envファイルを使用してAPIキーを環境変数として管理します。
    .envファイル例:
  REACT_APP_API_KEY=your_api_key


コード内での使用例:

  const apiKey = process.env.REACT_APP_API_KEY;

デバッグのコツ

  1. console.logを活用
    取得したデータやエラー内容をコンソールに出力して状況を把握します。
  2. ブラウザのデベロッパーツールを利用
    ネットワークタブでAPIリクエストやレスポンスを確認します。
  3. スタックトレースを確認
    エラーメッセージのスタックトレースを読むことで、エラー発生箇所を特定します。

まとめ


トラブルシューティングのスキルを身につけることで、予期しないエラーにも迅速に対応できるようになります。正確なエラーメッセージの読み取りと適切な修正方法を学び、Reactアプリケーションの信頼性を向上させましょう。次のセクションでは、リアルタイムデータの応用例について解説します。

応用例：リアルタイムデータの表示


Reactを使用してリアルタイムで更新されるデータを表示するアプリケーションを作成する方法を解説します。これは、チャットアプリやダッシュボード、ライブデータの視覚化に役立つスキルです。

WebSocketを使ったリアルタイム更新


リアルタイムデータを扱うには、WebSocketを利用するのが一般的です。以下の例では、WebSocketを使用してサーバーからのライブデータを取得し、Reactで表示します。

import React, { useState, useEffect } from 'react';

function App() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = new WebSocket('wss://example.com/live-data');

    socket.onmessage = (event) => {
      const newMessage = JSON.parse(event.data);
      setMessages((prevMessages) => [...prevMessages, newMessage]);
    };

    socket.onerror = (error) => {
      console.error('WebSocketエラー:', error);
    };

    return () => {
      socket.close();
    };
  }, []);

  return (
    <div className="container">
      <h1>リアルタイムメッセージ</h1>
      <div className="message-list">
        {messages.map((message, index) => (
          <div key={index} className="message">
            <p>{message.text}</p>
            <small>{new Date(message.timestamp).toLocaleTimeString()}</small>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

コード解説

  1. WebSocket接続の初期化
    new WebSocket('wss://example.com/live-data')でサーバーに接続します。
  2. メッセージの受信
    サーバーから受信したデータをパースしてmessages配列に追加します。
  3. クリーンアップ
    コンポーネントがアンマウントされる際にsocket.close()で接続を閉じます。

データの定期更新


WebSocketが不要な場合でも、setIntervalを使って定期的にデータを更新できます。以下の例では、APIから新しいデータを5秒ごとに取得します。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setData(response.data);
      } catch (error) {
        console.error('データ取得中にエラーが発生しました:', error);
      }
    };

    fetchData();
    const interval = setInterval(fetchData, 5000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="container">
      <h1>定期更新データ</h1>
      <ul>
        {data.slice(0, 5).map((item) => (
          <li key={item.id}>
            <strong>{item.title}</strong>
            <p>{item.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

コード解説

  1. setIntervalでデータを更新
    setIntervalを使用して5秒ごとにAPIからデータを取得します。
  2. クリーンアップ
    clearIntervalを使い、不要なデータ取得を防ぎます。

リアルタイムデータの可視化


リアルタイムデータをグラフやチャートで表示することで、より効果的に情報を伝えることができます。以下は、react-chartjs-2を使用した例です。

インストール:

npm install react-chartjs-2 chart.js

コード例:

import React, { useState, useEffect } from 'react';
import { Line } from 'react-chartjs-2';

function App() {
  const [chartData, setChartData] = useState({
    labels: [],
    datasets: [
      {
        label: 'リアルタイムデータ',
        data: [],
        borderColor: 'rgba(75,192,192,1)',
        fill: false,
      },
    ],
  });

  useEffect(() => {
    const interval = setInterval(() => {
      const now = new Date();
      setChartData((prevState) => ({
        ...prevState,
        labels: [...prevState.labels, now.toLocaleTimeString()],
        datasets: [
          {
            ...prevState.datasets[0],
            data: [...prevState.datasets[0].data, Math.random() * 100],
          },
        ],
      }));
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="container">
      <h1>リアルタイムチャート</h1>
      <Line data={chartData} />
    </div>
  );
}

export default App;

コード解説

  1. リアルタイムデータの更新
    ランダムなデータポイントを1秒ごとに追加しています。
  2. チャートライブラリの活用
    react-chartjs-2を使用して折れ線グラフを描画しています。

注意点

  • データ量が増えすぎるとパフォーマンスが低下するため、古いデータを削除する仕組みを検討してください。
  • リアルタイム処理にはネットワークの安定性が重要です。

これでリアルタイムデータの表示方法を学びました。次のセクションでは記事全体のまとめを行います。

まとめ


本記事では、Reactを使ったJSONデータのインポートと表示方法から、動的レンダリング、スタイリング、ユーザーインタラクションの追加、外部APIとの統合、そしてリアルタイムデータの活用まで幅広く解説しました。以下が主要なポイントです：

  1. 基本的なデータインポートと表示
    JSONファイルをReactプロジェクトに取り込み、map関数を用いて動的にデータを表示する手法を学びました。
  2. データのスタイリングとユーザーインタラクション
    CSSや条件付きクラスで視覚的な魅力を高め、検索やフィルタリング機能を実装して操作性を向上させました。
  3. 外部APIの統合
    fetchやaxiosを用いてリアルタイムにデータを取得し、Reactアプリに統合する方法を解説しました。
  4. リアルタイムデータの表示
    WebSocketや定期更新機能を使用して、チャートやリストにライブデータを表示する方法を学びました。

これらのスキルを組み合わせることで、柔軟で高度なReactアプリケーションを構築する能力が身につきます。ぜひ実際のプロジェクトでこれらの技術を活用してみてください！

React
JSON React フロントエンド開発 配列データ

コメント

コメントする

目次
  1. JSONファイルの準備と基本構造
    1. JSONファイルの基本構造
    2. JSONファイルの作成と保存
    3. データの形式と使用目的
  2. Reactアプリケーションの環境設定
    1. Reactプロジェクトの作成
    2. 必要なパッケージのインストール
    3. プロジェクトのディレクトリ構造
    4. プロジェクトの動作確認
  3. JSONファイルのインポート方法
    1. JSONファイルをReactにインポート
    2. JSONデータの表示
    3. コードの動作確認
    4. 注意点
  4. JSONデータの表示方法
    1. データをReactコンポーネントに渡す
    2. コードのポイント
    3. データを装飾する
    4. データの動的な変化
  5. 配列データの動的レンダリング
    1. 動的レンダリングの基本
    2. コードの解説
    3. データの動的フィルタリング
    4. フィルタリングとレンダリングの組み合わせ
    5. 注意点
  6. 配列データのスタイリング
    1. CSSファイルでのスタイリング
    2. スタイリングのポイント
    3. 動的クラスの適用
    4. CSSフレームワークの活用
    5. 注意点
  7. JSONデータに基づくユーザーインタラクション
    1. 検索機能の実装
    2. フィルタリングボタンの追加
    3. インタラクションのポイント
    4. 応用例
  8. 外部APIからのJSON取得と統合
    1. 外部APIからデータを取得
    2. コードの解説
    3. axiosを使ったデータ取得
    4. 注意点
    5. 応用例
  9. トラブルシューティング
    1. よくあるエラーと対策
    2. デバッグのコツ
    3. まとめ
  10. 応用例：リアルタイムデータの表示
    1. WebSocketを使ったリアルタイム更新
    2. データの定期更新
    3. リアルタイムデータの可視化
    4. 注意点
  11. まとめ