json-pretty：ReactでJSONを簡単にPretty Printする方法

2024-04-11

Pretty Printing JSON with React

このチュートリアルでは、React を使用して JSON データを Pretty Printing する方法を解説します。

前提条件

React の基本的な知識
JSON データ

手順

新しい React プロジェクトを作成します。
npm install json-pretty コマンドを実行して json-pretty ライブラリをインストールします。
以下のコードを App.js ファイルに追加します。

import React, { useState } from 'react';
import jsonPretty from 'json-pretty';

const App = () => {
  const [data, setData] = useState({
    name: 'John Doe',
    age: 30,
    address: {
      street: '123 Main Street',
      city: 'New York',
      state: 'NY',
      zip: '10001',
    },
  });

  const handlePrettyPrint = () => {
    const prettyData = jsonPretty(data);
    console.log(prettyData);
  };

  return (
    <div>
      <button onClick={handlePrettyPrint}>Pretty Print JSON</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default App;

アプリケーションを起動します。
"Pretty Print JSON" ボタンをクリックします。

コンソールには、Pretty Printed された JSON データが表示されます。

コード解説

jsonPretty ライブラリを使用して、JSON データを Pretty Printing しています。
JSON.stringify 関数を使用して、JSON データを文字列に変換しています。

Prettify した JSON データをコピーして、他のアプリケーションで使用することができます。

このチュートリアルでは、React を使用して JSON データを Pretty Printing する方法を解説しました。この技術は、JSON データをより読みやすく、理解しやすくするために役立ちます。

import React, { useState } from 'react';
import jsonPretty from 'json-pretty';

const App = () => {
  const [data, setData] = useState({
    name: 'John Doe',
    age: 30,
    address: {
      street: '123 Main Street',
      city: 'New York',
      state: 'NY',
      zip: '10001',
    },
  });

  const handlePrettyPrint = () => {
    const prettyData = jsonPretty(data);
    console.log(prettyData);
  };

  return (
    <div>
      <button onClick={handlePrettyPrint}>Pretty Print JSON</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default App;