メモ

メモを入力してみよう!


Lesson2「JSONってなに?データの形式」

学習概要

Ajaxなどでもよく使われる「データ形式」。
その中でメジャーな、TEXT形式、CSV形式、XML形式、JSON形式といったデータ形式について学んでいきます!

補足

コメントはありません

この練習でわからない所を質問する※部活外の質問はできません

既に出ている同じ内容の質問やレッスン以外の質問には回答致しません。こちらから既出の質問・回答をワード検索できます。(仮入部部員は利用不可)

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson2「JSONってなに?データの形式」の内容※SEO用のため読めません


今回はJSONといったものや、データの形式について学んでいきたいと思います。



JSONと書いて「ジェイソン」というんですけど、JSONというのは、データを表現する形式の一つになります。データを保存する形式だと思ってください。



データの形式には、テキスト形式(.txt)と呼ばれるものや、xml形式(.xml)、htmlなんかもそうですね。html形式です。他にもcsv形式(.csv)なんていうものもあります。

そういったいろんな形式の中に、json形式と呼ばれる形式があります。ファイルを保存するには、「.json」という拡張子になります。



このJSONの形式では、「値」保存する値に、「型」ですね、変数の型といったものをやりましたけど、変数の「型」を持たせることができます。

数字だとか文字列、真偽値:true/falseですね、

あとは配列、オブジェクト、

他にもnullといったものですね、「値がない」といった意味の値、これがnullですね。

こういった「型」を、データとしてやりとり・保存できるものになります。



JSONの良いところは、保存する、記述する文字数ですね。これが少なくなります。データが軽くなるってことです。

なので、Ajax通信でやりとりするデータの形式として、一般的に普及しています。

前回HTMLの形式でデータをやりとりしていましたけど、一般的にAjaxで通信するには、このJSONの形式でやりとりする、というのが一般的になっています。





たとえばこういったデータがあったとします。

「名前」として「ウェブカツ 太郎」というものがあります。

そして「年齢」という情報に「30」といった値があります。

このデータの形式を、それぞれのデータ形式で表してみたいと思います。





たとえば「テキスト形式」。一般的なメモ帳とかに使われているものですね。

テキスト形式で保存する場合、先ほどのような情報を保存する場合には、こういった形で保存できますね。

普通に「ウェブカツ 太郎」とやって、さらに空白でスペースを空けて「30」というかたちで入力してあげます。

こうやってデータが保存できますね。



ただし、こういった形式で保存する場合には、入力する人によって、入力の仕方が違ってきちゃいますね。

たとえば「ウェブカツ 太郎」で改行して「30」を下に書いたりとか。

スペースを半角スペースにしたり。

全角スペースでスペースを空ける人もいます。

逆に全部繋げてしまう人もいるかもしれません。



こうなってしまうと、機械上で読み取るためには、規則性といったものが必要になってきます。空白が一個空いていたら違う情報なんだなあ、とか。



たとえば「ウェブカツ 太郎」・空白・「30」となっていたら、

空白が空いているので、「ウェブカツ 太郎」と「30」といったものは別の情報なんだな、こういった形で機械の方で判別できるんですけど、

規則性がバラバラになってしまうと、機械の方で自動的に判別できなくなってしまうわけですね。プログラムの方でも判別できません。





他にも「CSV形式」といった形式があります。



たとえば、保存するとすると、拡張子は「.csv」ですね。「sample.csv」といった形の形式で、ファイルが保存されます。



このCSV形式の場合には、カンマで区切るような形になります。データとデータの間には、カンマで区切るんですね。

そうすることで、別の情報だ、という形で分かりやすくなります。



先ほど、たとえば空白で区切っていたとすると、「ウェブカツ 太郎」という形で空白で区切られちゃってます。なので「ウェブカツ」と「太郎」という情報は、違う情報だ、という形に通常だとなっちゃいますね。

ですけどカンマで区切るようにすれば、途中に空白が入っていたとしても、ひとまとまりの情報だということがわかります。



こうすることでですね、カンマで区切られているので、機械の方で判別できるような形になります。

実際にこの情報を、データを読み取って、なにかプログラミングとして処理をしたい場合、そういった場合にも処理しやすくなります。



ただですね、このたとえばデータで保存されて、このデータを開いて、全く知らない人が見た場合、

それが名前なのか、たとえばその情報が年齢なのか、こういった情報の意味までは判別できないんですね。

今回のように、「ウェブカツ 太郎」「30」と書いてあれば、こっちが名前だな、こっちが年齢だな、といったのが分かりやすいですけれども、

通常いろんな情報を保存するわけなので、この値がどの情報なのか、といったものが分からなくなってしまうんですね。





他にも「XML形式」というものがあります。

ファイルとしては、拡張子「.xml」というものが付いて保存されます。



書き方としては、それぞれHTMLの形式と似てますね。タグを付けてあげます。

名前であれば「name」といったタグを作ってあげて、それぞれ囲ってあげるんですね。タグ付けをしてあげる。

そうすることで、その情報が何の情報なのか、といったものも、相手に伝えることができます。



こういったように、情報の意味も伝えることができるんですけれども、ただ、このデータ自体が「数値」なのか「数字」なのか?

たとえば「age」というものですね、年齢ですけど、これ「30」と書いてあります。

この「30」というのが、数字なのか? 文字としての「数字」なのか、それとも計算できる値としての「数値」なのか。

こういった情報、値のですね、「型」までは判別できません。



しかも書く文字数が多いわけなので、保存するデータ量自体も多くなってしまいます。



なのでこういったものを通信する場合には、通信するデータ量自体が多くなってしまうんですね。そのぶん送信・受信に時間も掛かってしまいます。





そこで今主流になっているのが、JSON形式と呼ばれるものですね。

保存される形式は、「.json」という拡張子がついたファイルになります。



どんな感じで保存するかというと、オブジェクトの形式ですね。javascriptと同じ書き方になります。連想配列のような形式です。



keyを "name" と指定してあげて、"ウェブカツ 太郎" という値ですね。value、情報を入れてあげます。

で、カンマで区切って、さらに"age" という形でkeyを指定してあげて、値として「30」という形で入れてあげます。

こうすることで、データ量自体、文字自体も少なくなりますね。



さらにですね、情報の意味も伝わります。名前が "ウェブカツ 太郎" なんだな、"age"=年齢が30なんだな、という形ですね。



さらには、XML形式では表現できなかった、データ、値の「型」ですね。これも判別できるようになります。

たとえば "age" の「30」のところを見てください。これ、ダブルクォーテーションで囲まれてないですよね。

ダブルクォーテーションで囲まずに「30」という形で書くと、「数値」といった意味になります。数値型ですね。

逆に、この「30」をダブルクォーテーションで囲んでしまうと、「文字列」「文字型」「文字列型」といったものになります。



こういった形で、データ自体の「型」といったものも、きちんと相手に伝えることができます。





そのJSONの書き方なんですけれども、こういった書き方になります。

今回真ん中に例を出してますけど、下の方を見てください。



書き方のルール1、まずオブジェクトのキー。

キーには必ず" (ダブルクォーテーション)で囲います。javascriptでは' (クォーテーション)を使うこともできましたけど、" (ダブルクォーテーション)で必ず囲む必要があります。

さらには、キーと値、この間には: (コロン)を付けます。これはjavascriptでも同じですね。

で、キーと値ですね、この組み合わせを複数書く場合には、, (カンマ)を付けてあげます。



書き方のルール2としては、

数値、あとは真偽値と呼ばれるものですね。trueまたはfalseです。他にもnullといったもの。値として何もありませんよ、といったものを示すものです。

こういったものは、" (ダブルクォーテーション)で囲わずに、そのまま書きます。

そうすることで、これが数値なんだな、trueとかfalseと書いてあればそれは真偽値(真偽値型)なんだな、単純にnullと書いてあればnull型なんだな、ということが分かるようになります。



書き方のルール3としては、JSONで配列を指定することもできます。これはjavascriptでも同じでしたね。

値として、配列で、複数指定することもできます。

その場合には、カッコですね、[] で囲ってあげて、そのそれぞれの値の中にはカンマを付けてあげます。

配列の中での値にも、数値とか真偽値、nullといったものも使うこともできます。



これがJSONの書き方になります。





こういったように、データというものには、いろんな保存の形式というものがあります。

そして、Ajaxで通信・やりとりをするときには、主にこのJSONといった形式を使ってやりとりしてるんだ、ということを覚えておきましょう。