【JavaScript】JSONをJavaScriptで試してみます【実験】
どうも！LSSです！！
昨日の記事…
JSON→ジェイソン、から安易に「13日の金曜日」に繋ぎましたが、JSON自体が正体不明で怖かったですねｗ
とりあえず「JSONってなんぞや」というのを自分は分かったつもりになったところですが、プログラミングを覚えるのには「読んで分かったつもりになるのではなく、自分で書いてみる事が重要」という基本に立ち返り、今回ちょっと書いてみました！
JSONを試してみる！
試しに、こんなコードを書いてみました。
<script>
jtxt='{"name":"まるいの","shinchou":1,"shuzoku":"まるいの"}';
maruino=JSON.parse(jtxt);
document.write('名前 '+maruino.name+'<br/>種族名 '+maruino.shuzoku+'<br/>身長 '+maruino.shinchou+'m');
</script>
↓実行結果
どこがJSONかというと
{"name":"まるいの","shinchou":1,"shuzoku":"まるいの"}
この「文字列」が「JSON」の形式に従って書いたデータの形式なんですね。
- 最初と最後を{と}で囲む
- キー:値 のセットでデータを表現する
- キーはダブルクォーテーションで囲む
今回は値として「文字列」と「数値」にしましたが、他に真偽値（trueかfalse）や配列、オブジェクトも書き込めるようです。
パース（展開）
JSON文字列をオブジェクトデータとして展開する、「JSON.parse」というのが用意されています。
今回のコードでいうと
maruino=JSON.parse(jtxt);
↑この部分ですね。（ maruino と jtxt は任意の変数名）
この一行で「maruino」というオブジェクト変数に、jtxtをJSON文字列として解釈・展開した内容が入ります。
このパースを行っておくだけで、JSON文字列内で
"name":"まるいの"
と「name」というキーに「まるいの」という文字列を設定しておいたモノを、
maruino.name
と書く事で取り出せるようになります。
今回は実行結果の確認のために、
document.write('名前 '+maruino.name+'<br/>種族名 '+maruino.shuzoku+'<br/>身長 '+maruino.shinchou+'m');
としましたが、取り出した名前を当てはめると
document.write('名前 まるいの<br/>種族名 まるいの<br/>身長 1m');
って書いたのと同じ事になるんですね。
JSONを使わずに同様のオブジェクトを作成する場合
…そもそも、JavaScriptでオブジェクトを作った事もろくになかったので、同様のものを直接作る事も試してみますｗ
別ものにするために、オブジェクト名を「maruino2」にしておきますが、こんなコードになります。
<script>
maruino2={name:"まるいの",shinchou:1,shuzoku:"まるいの"};
document.write('名前 '+maruino2.name+'<br/>種族名 '+maruino2.shuzoku+'<br/>身長 '+maruino2.shinchou+'m');
</script>
↓実行結果
はい、同様のものを作ったので同様の結果になりましたねｗ
直接オブジェクトを作る場合は、
- { }の外側を' 'で括らなくていい
- キー名をダブルクォーテーションで括らなくていい
- もちろんパースしなくていい
と、お手軽でしたｗ
ただ、JSON文字列は「パースするまではただの文字列」なのが強みで、例えば「文字やら数値やら配列やら色々混在するものがひとまとめになったオブジェクトを、気軽にやり取りしたい」時に効果を発揮するもので、その利点を活かした使い方をしたいところですね^^
で触ってみたWebStorageにデータを保存する時などに役に立ちそう！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
