JSONという仕組みを簡単に

まずJSON(読み：ジェイソン)とはJavaScript Object Notationの略称で、頭文字をとって略してあります。正式名称はJavaScript Object Notationです。

名前からするとJavaScriptというプログラム言語に関係することがわかりますが、まずJavaScriptとは何かということから確認します。

JavaScriptを簡単に解説

JavaScriptとは1995年ごろNetscape社のBrendan Eichという人によって開発されたWebプログラミング言語で、あまりWebに詳しくない人でも“ジャバ”や“ジャバスクリプト”という名称は聞いたことがある人も多いかもしれません。 厳密にはJavaとJavaScriptは全く別のプログラム言語ですが、混同する方もわりと多いようです。

ホームページはおもにHTMLとCSS、このJavaScriptの3つの仕組みで表示されています。
ほとんどのWebコンテンツで見た目の表示はHTMLとCSSという二つの記述のみで表示されています。
ただ、すこし動きやユーザー操作ごとに表示内容を変更したい場合に使われるのが、このJavaScriptというプログラム言語になるわけです。

またJavaScriptはほとんどのプログラムが安全面等々の観点からサーバー側でしか動作しないのですが、ローカル(見ている人のスマホやパソコン側のブラウザ)で動作可能な便利なプログラムです。 Webサイト閲覧者操作による動きや表示内容が変更される処理は、ほぼJavaScriptが関係しているといってもよいでしょう。

JavaScriptをわかりやすく理解した上で、JSONの理解を進めます。

JSONという仕組みについて

• 結論からいうとJSONとはデータをやり取りするための書式

です。

JSON自体はプログラミング言語ではなく、JSONは独立したデータ形式言語の規格で、主に

• Webプログラム間でデータをやり取りする際に使用されるデータフォーマット

です。

同じWeb用のデータ交換用の形式にXMLという規格がありますが、こちらは書式や構造がやや難解で記述文字数が大きくなりやすいため、XML形式でやり取りされていたデータは、よほどの理由がない限り近年はほぼJSONに移行しているといっても良いでしょう。

• JSONはXMLと比較すると、軽量でとても扱いやすいデータ形式

プログラミング言語では、それぞれ独自の書式で記述しないとデータの参照や編集、交換ができませんが、JSONというフォーマット形式だと、プログラミング間のデータのやり取りが、スムーズにより簡単に交換や参照が可能になります。

JSONは軽量かつテキスト形式でのデータを取り扱える仕組みとなっているので、共用できる参照データのため、どのようなプログラムからも取り扱いしやすいために、使用されることが多い仕組みです。

書式自体がJavaScript由来のため、JavaScript用データ形式にも解釈されやすいかもしれませんが、多くのプログラミング用のデータ形式の仕組みとなります。

拡張子は.jsonで、各プログラムはこの.jsonファイルに記載されている独自書式で構造化されたデータを参照して情報を出力するような仕組みの一端となります。

JSONはJavaScript由来の独立した汎用データ形式

JSONデータ形式の用途

では実際にJSONはどのような利用のされ方をしているかを学びます。

• JSONの用途はWebアプリケーション

Webアプリケーションというとかなり大きなくくりとなりますが、WebアプリとかSNSとかAPI(アプリケーションプログラムインターフェース)など、データベースからデータを参照する仕組みやプログラムはほぼ、JSONが使用されているといっても良いかもしれません。

わかりやすいサービスで言えば、InstagramやTwitterやFacebook、Google系アプリやYoutube、Slackなどのチャット系コミュニケーションツールなどでJSONのデータ形式は利用されています。

見えないところでいつも参照されているJSONデータ

JSONデータ取得を学習する

実際にJSONデータを取得する方法について学んでみます。 JSONのデータ参照や取得はPHPやJava、Pythonなど代表的なプログラム言語で可能ですが今回はJavaScriptでのデータ参照とJSONのデータ形式の基本を学習します。

JSONの基本書式

• {“key”: “value”}

波括弧(ブレイス、中括弧)でキーとなる値と含まれる値をコロンをつなぐ組み合わせを囲んむのが、基本的なJSONのデータ形式になります。 キーと値はクォーテーションかダブルクォーテーションで記述可能ですが、ダブルクォーテーションを推奨します。複数のキーと値が連続する場合はカンマで区切っていき、複数の値を格納します。

書式はJavaScriptを知っている方であれば、ほとんど同じような書式となり、CSSなどの記述にもやや似ているので、データ形式だけでいえば、かなり人間に理解しやすくわかりやすい構造になっています。

JSONデータをJavaScriptで取得

JSONデータからJavaScriptにデータを引き渡すには、特定の記述が必要になります。

上記の記述は***.jsonファイルを読み込むと、“実行する関数”で指定したJavaScriptの関数が実行されます。

同一サーバー上でのみ動作します。 クロスドメイン(別々のドメインでやり取り)する方法はJSONPという仕組みで可能ですが、基本的には安全面など諸々の事由から非推奨です。

ローカルで試す場合は、以下の関数を使用します。

• JSON.parse (変数名);

JavaScriptにJSONデータを取り込むには上の関数を使用します。

JSONデータ書式のデータをJavaScript内で準備して一度変数に代入し、変数の値をJSON.parseでパース(引き渡し)して再度JavaScript用の変数に代入することで、JavaScript内で使用できるようになります。

• const JSONデータ取得した変数 = ‘{“key1”: “key1Value”, “key2”:”key2Value”}’;
• const JavaScript用変数 = JSON.parse (JSONデータ取得した変数); console.log(JavaScript用変数);

という記述で、ジェイソンデータをJavaScriptで取り扱える形式にパースしてオブジェクトを取得できます。

配列の場合

配列の場合は、基本的にJavaScriptの書式に似た扱いになり、形式も参照もかなりわかりやすくシンプルです。

• const JSONデータ取得した変数 = ‘[{“key1-1″:”key1-1Value”,”key1-2 “: “key1-2Value”},{ “key2”:”key2Value”}]’;
• const JavaScript用変数 = JSON.parse (JSONデータ取得した変数); console.log(JavaScript用変数.[0][1]);

上記の場合はコンソールログに「{“key1-2”: “key1-2Value”}」が出力されます。
[]角括弧で中括弧のkeyとvalueをカンマで区切り、配列データとしてJSONデータを取得しています。

JSONデータはJavaScript形式に変換して取得する

データのカスタマイズ方法

JSONデータをプログラム側で取得して、プログラムで編集可能な状態になったら、今度は個別のプログラム言語で抽出していきます。

今回はJavaScriptで取り扱い例で学習していますので、JavaScriptでのデータ取得方法になり、JSONとは別の内容になりますが、覚えておいても色々役に立つことがあるので、参考例をもとにデータのカスタマイズを学びます。

JSON.parceで変換して、constに再代入したデータはオブジェクトであっても配列であっても、JavaScriptで編集可能なデータになっています。

取得しパースしたJSONデータの確認

配列内オブジェクトはlengthではそのまま取得できないので、Object.keys でオブジェクト内のkey数を計算しています。当然、配列内のオブジェクト数が異なる場合は、個別に配列の総数を取得しなければならない。

for文を利用することで、取得したJSONデータの連想配列としても取得することが可能になります。

複数のプログラミング言語でJSONデータ形式は参照されている

JSONに関する考察

さてJSONについてですがいかがでしたでしょうか。

データ形式としては

• 出力されたシンプルなデータベーステキスト

のような印象です。

簡単なデータ構造なら波括弧{}でkeyとvalueの組み合わせでオブジェクトデータが設置でき、配列にする場合は角括弧[]とカンマ区切りで、オブジェクトを配列化することができます。

JavaScriptが得意な人であれば、かなり複雑なデータ構造生成が比較的手軽に取り扱えそうです。多くのAJAXやプログラミング言語で利用され、SNSやAPIで採用されるのも頷けます。

今回はJSONの基本的な情報やデータ形式、データ取得やカスタマイズ方法までについて学んでみました。

普段あまりデータ操作しない人でもある程度基礎知識を得ることで、APIで取得したJSONがどういうデータなのかについて仕組みをある程度理解しながら業務を進めることも可能になるので、この機会に概要だけでも知っておくことがお薦めです。

JSONのデータ取得とカスタマイズでプログラム記述を覚えるのもアリ