読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

ここらでJSONについておさらいしておく(coffee使用)

JavaScript CoffeeScript

chuckです。

JSONってあるじゃないですか。僕、仕事で2回くらいしか使ったことないんですよね。

いまさらですが、軽くおさらいしておこうと思います。

 

参考にするのは、「JSON 入門」でヒットしたこの記事。

www.webopixel.net

 

JSONとは

まあデータ形式の一種ですよね。拡張子json

 

まずはJSファイル内で。

普通は外部ファイルとしてJSONを使いますが、まずはファイル内で使ってみます。

f:id:chuck0523:20151009220718p:plain

ここぞとばかりに、習得したばかりのcoffee scriptを使う

 

nodeで実行した結果がこちら。

f:id:chuck0523:20151009220804p:plain

ちゃんと表示されてますね。

 

まあこれはまだ単なるオブジェクトですね。

 

複数データ

f:id:chuck0523:20151009222725p:plain

複数データもいけます。つまり、オブジェクトの配列です。

余談ですが、coffeeでオブジェクトの配列を定義する方法がわかりませんでした。調べた→【CoffeeScript】オブジェクトの配列を定義する - コンパイラかく語りき

 

子要素を持ったデータ

階層をつくります。

f:id:chuck0523:20151009223906p:plain

ここまで来るとJSで書いたほうがわかりやすいですね。

 

外部ファイル化

ついに外部ファイル化してみます。data.json的な感じで、拡張子jsonにします。

f:id:chuck0523:20151009224134p:plain

ポイントは2つ程あり、var data = のように変数に格納はしません。データそのものを記述します。そして、末尾にセミコロンは不要です。

 

これをjs側から読み込んでみます。

f:id:chuck0523:20151009225010p:plain

 

getJSON関数を使えば簡単にjsonデータを読み込んで使用することができます。
第一引数にjsonファイルのURLを指定して、第2引数にfunction(変数名)と書けば、jsonのデータをそのまま変数の中に入れることができます。

とのこと。便利ですね。

 

 

 というわけで、coffeeを使いつつ、JSONのおさらいをしてみました。