ReactでJSONファイルのエクスポート、インポート機能の作成

JSONデータをJSONファイルでエクスポート

全体のコードは以下になります。

const fileName = 'jsonファイル'
const jsonData = { a: 1, b: 2 }

const fileNameWithJson = `${fileName}.json`
const blobData = new Blob([JSON.stringify(jsonData)], {
　type: 'text/json',
})
const jsonURL = URL.createObjectURL(blobData)

return (
　<a href={jsonURL} download={fileNameWithJson}>
　　エクスポート
　</a>
)

実際に動かしてみます

解説

まずBlobクラスのコンストラクタを使い、JSON形式のデータを含むBlobオブジェクト（生のJSONデータ）を作成します。

const blobData = new Blob([JSON.stringify(jsonData)], {
  type: 'text/json',
})

次にURL.createObjectURLメソッドを使い、BlobデータのURLオブジェクトを作成します。

const jsonURL = URL.createObjectURL(blobData)

最後に<a>タグを使い、以下の引数を渡すことでURLオブジェクトを保存できるようにします。

• hrefにURLオブジェクト
• downloadに保存するファイル名

<a href={jsonURL} download={fileNameWithJson}>
  エクスポート
</a>

JSONファイルのインポート

全体のコードは以下になります。

import { ChangeEvent, FC, useCallback, useMemo, useState } from 'react'

const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
  if (!e.target.files || e.target.files.length === 0) {
    console.error('ファイルを選択して下さい')
    return
  }

  const file = e.target.files[0]

  const reader = new FileReader()
  reader.onload = event => {
    const content = event.target?.result
      try {
        const jsonData = JSON.parse(content as string)
        console.log(jsonData)
      } catch (error) {
        console.error('JSONファイルを解析できませんでした。', error)
      }
    }
    reader.readAsText(file)
  }

return <input type='file' accept='.json' onChange={handleFileChange} />

実際に動かしてみます

解説

<input type='file'/>はファイルを選択することが出来ます。また、accept='.json'を付けることでJSON形式のファイルのみを選択することが出来ます。onChangeはファイルが選択される時にイベントを発生させることが出来ます。

<input type='file' accept='.json' onChange={handleFileChange} />

ファイルの中身はe.target.files[0]にあるので取り出します。

const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
  if (!e.target.files || e.target.files.length === 0) {
    console.error('JSONファイルを選択して下さい')
    return
  }

  const file = e.target.files[0]
}

FileReaderオブジェクトを作成します。FileReaderオブジェクトは非同期でファイルの中身を確認することが出来ます。

const reader = new FileReader()

reader.onloadは、ファイルの読み込みが完了した時に発生するイベントです。event.target.resultには読み取られた内容が格納されています。

reader.onload = event => {
  const content = event.target?.result
}

reader.readAsTextは、引数のファイルを文字列として読み込むメソッドです。読み込みが完了すると.onloadイベントが発生します。

reader.readAsText(file)

JSON.parseを使いファイルの内容をJSONデータにパースしています。ここでファイルの内容がJSON形式の文字列でない場合、エラーを投げるのでtry catchで囲います。

try {
  const jsonData = JSON.parse(content as string)
  console.log(jsonData)
} catch (error) {
  console.error('JSONファイルを解析できませんでした。', error)
}