Lesson2「JSONってなに?データの形式」メモメモを入力してみよう!Lesson2「JSONってなに?データの形式」ツイート無料仮入部して進捗を管理する学習概要Ajaxなどでもよく使われる「データ形式」。その中でメジャーな、TEXT形式、CSV形式、XML形式、JSON形式といったデータ形式について学んでいきます!補足コメントはありませんこの練習でわからない所を質問する※部活外の質問はできません既に出ている同じ内容の質問やレッスン以外の質問には回答致しません。こちらから既出の質問・回答をワード検索できます。(仮入部部員は利用不可)ログインが必要ですこの練習への質問一覧ログインが必要ですLesson2「JSONってなに?データの形式」の内容※SEO用のため読めません今回はJSONといったものや、データの形式について学んでいきたいと思います。JSONと書いて「ジェイソン」というんですけど、JSONというのは、データを表現する形式の一つになります。データを保存する形式だと思ってください。データの形式には、テキスト形式(.txt)と呼ばれるものや、xml形式(.xml)、htmlなんかもそうですね。他にもcsv形式(.csv)なんていうものもあります。いったいろんな形式の中に、json形式と呼ばれる形式があります。ファイルを保存するには、「.json」という拡張子になります。このJSONの形式では、「値」保存する値に、「型」ですね、変数の型といったものをやりましたけど、変数の「型」を持たせることができます。他にもnullといったものですね、「値がない」といった意味の値、これがnullですね。いった「型」を、データとしてやりとり・保存できるものになります。JSONの良いところは、保存する、記述する文字数ですね。これが少なくなります。データが軽くなるってことです。Ajax通信でやりとりするデータの形式として、一般的に普及しています。前回HTMLの形式でデータをやりとりしていましたけど、一般的にAjaxで通信するには、このJSONの形式でやりとりする、というのが一般的になっています。いったデータがあったとします。太郎」というものがあります。「年齢」という情報に「30」といった値があります。このデータの形式を、それぞれのデータ形式で表してみたいと思います。一般的なメモ帳とかに使われているものですね。テキスト形式で保存する場合、先ほどのような情報を保存する場合には、こういった形で保存できますね。太郎」とやって、さらに空白でスペースを空けて「30」というかたちで入力してあげます。やってデータが保存できますね。いった形式で保存する場合には、入力する人によって、入力の仕方が違ってきちゃいますね。太郎」で改行して「30」を下に書いたりとか。スペースを半角スペースにしたり。全角スペースでスペースを空ける人もいます。逆に全部繋げてしまう人もいるかもしれません。なってしまうと、機械上で読み取るためには、規則性といったものが必要になってきます。空白が一個空いていたら違う情報なんだなあ、とか。規則性がバラバラになってしまうと、機械の方で自動的に判別できなくなってしまうわけですね。プログラムの方でも判別できません。他にも「CSV形式」といった形式があります。保存するとすると、拡張子は「.csv」ですね。「sample.csv」といった形の形式で、ファイルが保存されます。このCSV形式の場合には、カンマで区切るような形になります。データとデータの間には、カンマで区切るんですね。することで、別の情報だ、という形で分かりやすくなります。太郎」という形で空白で区切られちゃってます。「ウェブカツ」と「太郎」という情報は、違う情報だ、という形に通常だとなっちゃいますね。カンマで区切るようにすれば、途中に空白が入っていたとしても、ひとまとまりの情報だということがわかります。することでですね、カンマで区切られているので、機械の方で判別できるような形になります。実際にこの情報を、データを読み取って、なにかプログラミングとして処理をしたい場合、そういった場合にも処理しやすくなります。このたとえばデータで保存されて、このデータを開いて、全く知らない人が見た場合、それが名前なのか、たとえばその情報が年齢なのか、こういった情報の意味までは判別できないんですね。通常いろんな情報を保存するわけなので、この値がどの情報なのか、といったものが分からなくなってしまうんですね。他にも「XML形式」というものがあります。ファイルとしては、拡張子「.xml」というものが付いて保存されます。書き方としては、それぞれHTMLの形式と似てますね。タグを付けてあげます。名前であれば「name」といったタグを作ってあげて、それぞれ囲ってあげるんですね。タグ付けをしてあげる。することで、その情報が何の情報なのか、といったものも、相手に伝えることができます。いったように、情報の意味も伝えることができるんですけれども、ただ、このデータ自体が「数値」なのか「数字」なのか?たとえば「age」というものですね、年齢ですけど、これ「30」と書いてあります。文字としての「数字」なのか、それとも計算できる値としての「数値」なのか。いった情報、値のですね、「型」までは判別できません。書く文字数が多いわけなので、保存するデータ量自体も多くなってしまいます。いったものを通信する場合には、通信するデータ量自体が多くなってしまうんですね。そのぶん送信・受信に時間も掛かってしまいます。そこで今主流になっているのが、JSON形式と呼ばれるものですね。保存される形式は、「.json」という拡張子がついたファイルになります。どんな感じで保存するかというと、オブジェクトの形式ですね。javascriptと同じ書き方になります。連想配列のような形式です。value、情報を入れてあげます。いう形でkeyを指定してあげて、値として「30」という形で入れてあげます。することで、データ量自体、文字自体も少なくなりますね。情報の意味も伝わります。なんだな、"age"=年齢が30なんだな、という形ですね。XML形式では表現できなかった、データ、値の「型」ですね。これも判別できるようになります。「30」のところを見てください。これ、ダブルクォーテーションで囲まれてないですよね。ダブルクォーテーションで囲まずに「30」という形で書くと、「数値」といった意味になります。いったものになります。いった形で、データ自体の「型」といったものも、きちんと相手に伝えることができます。そのJSONの書き方なんですけれども、こういった書き方になります。今回真ん中に例を出してますけど、下の方を見てください。書き方のルール1、まずオブジェクトのキー。(ダブルクォーテーション)で囲います。(ダブルクォーテーション)で必ず囲む必要があります。(コロン)を付けます。これはjavascriptでも同じですね。(カンマ)を付けてあげます。数値、あとは真偽値と呼ばれるものですね。trueまたはfalseです。他にもnullといったもの。値として何もありませんよ、といったものを示すものです。(ダブルクォーテーション)で囲わずに、そのまま書きます。することで、これが数値なんだな、trueとかfalseと書いてあればそれは真偽値(真偽値型)なんだな、単純にnullと書いてあればnull型なんだな、ということが分かるようになります。書き方のルール3としては、JSONで配列を指定することもできます。これはjavascriptでも同じでしたね。値として、配列で、複数指定することもできます。囲ってあげて、そのそれぞれの値の中にはカンマを付けてあげます。配列の中での値にも、数値とか真偽値、nullといったものも使うこともできます。これがJSONの書き方になります。いったように、データというものには、いろんな保存の形式というものがあります。Ajaxで通信・やりとりをするときには、主にこのJSONといった形式を使ってやりとりしてるんだ、ということを覚えておきましょう。※こちらのフォームで送信された内容はユーザーの特定、ご返信ができません。返信希望の場合は、サイト一番下にある「お問合せ」からご連絡ください。alert('学習時間の更新に失敗しました。再度やり直してください。alert('学習時間の更新に失敗しました。再度やり直してください。alert('操作に失敗しました。画面を再読み込みの上やり直してください。p').text('送信しました。ご意見頂きありがとうございます。p').text('送信出来ませんでした。p').text('送信出来ませんでした。