本記事ではJavaScriptのjsonについて解説します。
jsonはJavaScriptで扱うことができるデータ形式のことです。
外部から情報を取り込みJavaScript内で使いたい場合に、jsonは便利です。
本記事ではjsonファイルの書き方や、JavaScript内でjsonファイルを読む込む方法についてご紹介しましょう。
jsonとは？
jsonはJavaScript Object Notationの略です。
JavaScript内で様々な情報をやり取りするために生まれたデータ形式です。
jsonは軽量で単純でテキストデータとなっています。
サーバー間での通信にも用いられ、PHPファイルでjsonファイルを作成し、それをJavaScriptで読むことも多くあります。
また、jsonはJavaScriptのオブジェクト形式のような、プロパティとデータが組み合わさった構造をしています。
そのため、JavaScriptと特に親和性が高いデータと言えるでしょう。
jsonの書き方
jsonの書き方は、オブジェクト構造とだいたい同じです。
ただ、プロパティと値をそれぞれ「””」で囲まなくてはいけません。
○コード例
<script> var json = { "name": "太郎", "gender": "男", "age": "18" } </script>以上のような書き方をするのが一般的です。
jsonは「○○○.json」というファイル名で保存します。
オブジェクトをjsonに変換する
サーバー側と通信する際、データをjsonにして送る必要があることもあります。
そんなときのために、オブジェクトをjsonに変換する方法をみていきましょう。
jsonに変換する場合は、JSONオブジェクトのstringifyメソッドを使います。
このメソッドを使えば自動的に変換してくれます。
○コード例
<!DOCTYPE html> <head> <title>テスト画面</title> </head> <script> var data = { name: "太郎", gender: "男", age: "18" } var json = JSON.stringify(data); console.log(json); console.log(json.name); </script> </body> </html>○実行結果
stringifyメソッドを使うことでjson形式に変換できます。
各プロパティが「””」で囲まれているのがお分かり頂けるかと思います。
json形式にするとオブジェクトのように個別のデータを取り出すことができません。
そのため、「json.name」のように記入するとundefinedになってしまいます。
jsonをオブジェクトに変換する
今後は逆にjsonをオブジェクトに変換する方法をみていきましょう。
オブジェクトに変換する場合は、parseメソッドを使います。
○コード例
<!DOCTYPE html> <head> <title>テスト画面</title> </head> <script> var data = { name: "太郎", gender: "男", age: "18" } var json = JSON.stringify(data); obj = JSON.parse(json); console.log(obj.name); </script> </body> </html>○実行結果
上記のコードでは、一度json形式にしたものを、parseメソッドによって再びオブジェクトになおしています。
オブジェクトにしたことによって、個別のデータを取り出すことが可能になりました。
obj.nameを指定すると「太郎」が表示されていますね。
オブジェクトに修正すれば、後は自由にJavaScript内で使うことが可能です。
データを追加する場合はpushメソッド、削除したい場合はdelete文を使います。
オブジェクトの操作方法について詳しく知りたい方は【入門編7】JavaScriptの連想配列を使いこなそうや【入門編8】JavaScriptのオブジェクトについて理解しようをお読みください。
JavaScriptでjsonファイルを読み込む
最後に、JavaScriptでjsonファイルを読み込む方法を紹介しましょう。
○コード例
<!DOCTYPE html> <head> <title>テスト画面</title> </head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $.getJSON("test.json", (data) => { // jsonを読み込んだ後の処理 }); </script> </body> </html>jsonファイルを読み込む場合、jQuaryを使うのが一般的です。
jQuaryを使う場合は、公式サイトからインストールするか、上記のようにHTML内で読み込むようにします。
jQuaryでjsonを読み込む場合$.getJSONを使います。
$.getJSONで読み込みたいjsonファイル名を指定します。
このようにすることで、JavaScript内でjsonファイルが利用可能です。
後はjson形式を、parseメソッドによってオブジェクトに変換すれば良いだけです。
まとめ
本記事では、jsonをJavaScriptで扱う方法、について解説しました。
JavaScriptでjsonファイルを扱う場面は多くあるので、操作方法を覚えておきましょう。
次回はJavaScriptのライブラリの使い方、をみていきましょう。
コメント