【初級編6】JavaScriptのjsonについて学習しよう

JavaScript入門

本記事では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のライブラリの使い方、をみていきましょう。

手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

CANIT
タイトルとURLをコピーしました