JavaScriptでJSONファイルを扱う方法

JavaScriptでJSONファイルを扱う方法

JavaScriptでJSONファイルを扱う方法について説明します。

■JSONとは
JSON(JavaScript Object Notation)は、データ交換フォーマットの一つで、
JavaScriptのオブジェクトリテラルの構文に基づいています。

■JSONファイルの読み込み
今回の説明ではJSONファイルを読み込む方法として、Fetch APIを使用します。
Fetch APIは、ネットワークリクエストを行うためのモダンなインターフェースを提供しています。

fetch('data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

このコードは、data.jsonという名前のJSONファイルを非同期に読込んでいます。
fetch関数はPromiseを返し、そのPromiseはResponseオブジェクトを解決します。
response.json()でデータを取得してコンソールに出力しています。

■JSONデータの操作
読み込んだJSONデータは、通常のJavaScriptオブジェクトとして操作できます。

fetch('data.json')
.then(response => response.json())
.then(data => {
console.log(data.name); // JSONデータの"name"プロパティを出力
})
.catch(error => console.error('Error:', error));

■JSONデータの書き出し
JavaScriptオブジェクトをJSON形式の文字列に変換するには、JSON.stringifyメソッドを使用します。

let obj = {name: 'John Doe', age: 30};
let json = JSON.stringify(obj);
console.log(json); // '{"name":"John Doe","age":30}'

以上がJavaScriptでJSONファイルを扱う基本的な方法になります。
この知識が使えるようになると、JavaScriptでJSONデータの読み込み、操作、書き出しが可能になります。