# JSONとは？ こんばんは、エンジニアのお家でまったり 青少無粧ラジオのニューブルです。 この番組は、エンジニアだからお伝えできることや、 響きになったことなど、楽しくITを学べるチャンネルです。 聞きに来てくださってありがとうございます。 今日は、今こそ知りたいIT用語シリーズになります。 今さら聞けないIT用語シリーズを聞いていただいて、 ITって意外と面白いかもとか、 もっと詳しく知りたいなと感じてくれた、 あなたのための一歩進んだシリーズになっております。 本シリーズではハッシュタグがありますので、 そちらからこのシリーズの放送も聞いていただければと思っております。 それでは、今回はJSONを取り上げたいと思います。 JSONです。JSONではありません。 発音でイントネーションで違うかもしれないですけど、 JSONを取り上げたいと思います。 これ、JSONって何なのかっていうお話を ちょっとやっていこうかなと思うんですけど、 今まで、今さら聞けないとか、今こそ知りたいで、 APIですとか、リクエストとレスポンス っていうのをお話しさせていただいたと思います。 そのときに、APIでデータをやり取りする、 その形式としてJSONっていうのが、 ほぼ使われているっていうお話を しようかなと思ってます。 ですので、JSONっていうのはどういう形を、 どういう書式というか、フォーマットというか、 そういうのを持っているのかっていうお話を、 ちょっとサンプルをこのチャプターと 次のチャプターにも画像を貼っているので、 その辺りをちょっと見比べながら、 JSONっていうのはどんな形になっているのか っていうのを聞いていただければと思います。 まず、JSONっていうのは、 これもまた略称になるんですけど、 Javascript Object Notationっていう形になります。 その感じで、以前やったJavascript っていう言葉が出てきたと思うんですけど、 もともとはJavascriptのオブジェクトの表式、 ノーテーションって表式とか書式かな、 そういう形のものに英語になるんですけど、 なのでJavascriptでオブジェクトを表現する 書式のことをJavascript Object Notation 略してJSONっていう形に定義されていました。 これが結構というか、 本当にこの後紹介するんですけど、 シンプルな形のフォーマットになっているがゆえに、 結構人気になって、今ではJavascriptに限らず、 いろんな言語、PythonですとかRubyですとか、 いろんな言語でこのJSONを扱えるようになりました。 なので、本当に事実上も世界標準というか、 スタンダードになってきています。 これを使ってAPIで呼び出したときに、 そのリクエストとして、 リクエストじゃないですね。 間違いは逆ですね。レスポンスですね。 APIのレスポンスにこのJSONを採用して、 画面とサーバーとのデータのやり取りを 簡単にするっていうのが今の主流というか。 これ多分JSON本当にシンプルなので、 今後新しいフォーマットは、これを超える シンプルなフォーマットって無理だと思うので、 何かあるかな、考えたら分からないですけど、 ないと思うので、 今後ずっとこのJSONは普及というか、 ずっと使い続けられるのかなとは思います。 ちょっと変わるときあるかもしれないですけどね。 JSONのまず基本の構造をお話ししたいと思います。 このチャプターにJSONのサンプルを上げて、 画像を添付しているので、 そちらを見ていただければと思うんですけど、 まずJSONは、ナミ括弧、中括弧とか言いますけど、 これでまず括弧を言います。 その中に、見ていただければ分かるんですけど、 プログラムネームで聖書武将ラジオという形で、 キーイコール値まで、日本語にすると項目名と 内容かなという形でずっとあると思います。 なので、プログラムネームがキーになって、 聖書武将ラジオというのが値です。 これで本当にすぐ分かったと思うんですけど、 キーイコール値の形になって、 緩膜切りで次のキーに入っていくような形になります。 なので、次のホストというところは、 ニューブルって書いてあるんですけど、 ホスト、パーソナリティってやったほうがよかったかな。 ホストでやってるのがニューブルですよとか、 イズライブという形で、 フォルストか、これもボリューアンという形なんですけど、 フォルストとトゥルー、 トゥルーとフォルストか、なんていう形のイエスの、 それを表現するのをボリューアンって言うんですけど、 こういう文字列だけじゃなくて、 いろんな形を格納することもできます。 その次に、トピックスという形で、 かっこですね。 ちゅかげかっことかいうのを言いますけど、 この中で、Git API DNSという形で、 いろんな、これ配列なんですけど、 なので、トピックスっていうキーに対して、 値としては、配列の三つ、Git API DNS、 この三つの配列、文字列の配列を格納すると。 という形で、最初の文字列で、 ボリューアンというトゥルー、フォルストの形で、 あとは配列とか、いろんな数値まで入りますし、 そういうのがキーイコール値で表現できるというか、 格納することができます。 という感じで、本当にキーイコール値なので、 誰が見てもシンプルですよね。 なので、これ以上シンプルというか、 これの先に良くなるものって、 ちょっと私、今のところ想像つかないんですけど、 なので、今後も変わらないんじゃないかなとは思ってます。 これが、何回か前に、F12ですね。 ブラウザーで見るときに、F12キーを押すことによって、 開発者ツールっていう、 エンジニアがよく使うツールがあるんですけど、 そちらでいろんなものが見れますよって 言ったと思うんですけど、 そのときに、今回もF12、 パソコンでブラウザーを使われてる方は、 F12キーを押していただくと、どこでも大体、 このAPIとJSONの形はあると思うので、 どのサイトでも見れるとは思うんですけど、 またまた、例えばdevoicyさんのトップページとか、 開いてみようかな。 トップページよりかは、もしかしたら、あれかもですね。 皆さんの、私のチャンネルのトップページを 開いてもらった方がいいかもしれないですね。 それを開いてもらって、F12キーを押して、 開発者ツールを開きますと。 今回必要になってくるのが、ネットワークタブですね。 ネットワークのところを押すと、 その画面を構成するいろんなリクエストですね。 それが一覧で左側に表示されて、 それに対するレスポンスを右側で見れるっていうのが、 じゃあありましたかね。 そういう形になるんですけど。 例えばChromeの場合、Chromeでしか 今確認できないので、Chromeをやるんですけど、 リクエストの中に、中括弧、並括弧で囲まれて、 真ん中にセミコロンですね。 点と下がカマンになってるやつ。 これのマークが付いてるものが、 何個かあると思います。 これがリクエストのレスポンスで、 JSONが返ってきたっていう、 このChromeの開発ツールの表示になるんですけど、 その部分をどれでもいいので、 クリックしていただくと、 先ほど説明したJSONの形ですね。 中括弧になって、キーイコーラー体 っていう形になってると思います。 いろんなたくさんリクエストがあるので、 その中で多分、ボイシーさんの場合は、 どこかにリストっていうリクエストが あると思うんですよね。 このリストっていうリクエストを見ていただければ、 日本語で多分分かると思うんですが、 私の放送のタイトルですとか、 中身とか、いろいろ多分しか、 あとコメント欄も確かリストで取ってたのかな。 ちょっと名前、JSONのAPIのリクエストのやつを 忘れちゃいましたが、 どこかにまたコメント一覧の情報を取る 別のAPIを呼んでたりとか、 そういうのがあったりするので、 そんな感じで、開発者ツールで ネットワークタグを開いていただいて、 リクエストJSONのを調べて、 レスポンスを見たらJSONが返ってきてる っていうのが分かる方かなと思います。 レイテストかな、っていうリクエストで、 最新の放送一覧取ってる、 返ってきてもるっぽいですね。 その辺りをストーリーズとか、 チャプターでチャプター一覧が 入ってんのかなっていうふうに、 いろんなウェブサイトAPIがあって、 どんなリクエストが返ってきてるのか、 みたいなのを見るのも楽しいのかなと思います。 ということで、またこのチャプターでは JSONのお話をちょっとさせていただきました。 # なぜJSONが人気なの？ この次のチャプターでは、なぜJSONが人気になったのかというのをちょっとお話ししようかなと思います。 JSON、先ほどのチャプターでサンプルとか見ていただいて、分かるとおり、キーイコール値っていうめっちゃシンプルな形で書かれていると思います。 これが以前はJSONが出てくる前は、XMLっていう別の形式がよく使われていました。 先ほどの1個前のチャプターに貼り付けているJSONの形式です。 それと全く同じデータをXMLの形式で書いたらどうなるかっていうのが、この2つ目のチャプターに画像で貼っておきます。 これを見比べていただくと分かるんですけど、XMLも、これHTMLのタグのような書き方をするんですけど、 大なり小なりで囲った各タグ人に真ん中に値が入っているという形の書き方をします。 なので、先ほどのキーイコール値とはちょっとだけ違うんですね。 キー、値、また閉じるキーみたいな感じで、ちょっとキーの分が1個余計というか多いですよね。 なので、これをどっちかっていうと、まだJSONのほうがシンプルだなというか、 ウェブの業界では1個のリクエストに対して、 どれだけレスポンスの量を少なくするかっていうのも結構重要になっていて、 本当にデータ量が少なければ少ないほど、 ユーザーさんが何かをしてっていうリクエストを投げてから、 レスポンスを返すまでの時間が、レスポンスが届くまでですね。 ユーザーさんにレスポンスが届くまでの時間をいかに短くするか。 それによって、ユーザーさんが待てるというか、 それのほうがやっぱりいいですよね。 早いほうがいいので、JSON形式のシンプルな形、 ちょっとでも文字数を少なくっていう、 データ量を少なくっていう形のJSONが、 今ではもう主流になってきてるのかなとは思います。 という感じで、JSONについては、 データをやり取りするキーとイコール、 キーイコールじゃないですね。 コロンか、点々という形を使うので、 キー点々、値という形なので、キーコロン、 値っていう、そういう簡単に本当にシンプルな ペアの表示というか、そんな感じで データを分かりやすく表現しています。 これをAPIが呼ばれたときに返すことによって、 いろんな画面の情報でJavaScriptで操作されて、 そのデータをいろいろ画面に表示したりだとか、 っていうのは後のプログラムの話になってくるんですけど、 そのAPIでやり取りするときのデータは JSONを扱われていますよっていうのを 開発者ツールで実際にいろんなサイトを見ていただいて、 どんなレクエストが返ってきているのか っていうのを見ていただくのも 面白いのかなと思います。 ということで、今回はJSONについて お話しさせていただきました。 ということで、いろいろありましたが、 JSON、いろんなところに今後も出てくると思うので、 データのやり取りはほぼほぼJSONなので、 いろんなパターンを説明のときにも JSON使ってますみたいなお話を しようかなとは思っております。 ということで、最後まで聞いていただき ありがとうございました。 それでは今日も適当にまったりお過ごしください。 ありがとうございました。