2022.03.11 Fri 
2022.03.14
わかりやすい-JSONを簡単に学習する
JSONをわかりやすく学ぶ
Webサイトの制作やWebアプリケーション開発に関わったことがある人なら一度は聞いたことがあるかもしれません。
- JSON(読み：ジェイソン)
ホラー映画愛好家の方だと別のキャラクターが想起されるかもしれませんが、某アイスホッケーマスクマンとは全然関係ありません。 この記事でJSONを学習することで、ジェイソンと聞いてすぐ連想されるのがシンプルで軽量なWebデータ形式に関することになればうれしい限りです。
今回はWeb制作やWebプログラミングで必ず関わる可能性が高いJSONに関して学習していきます。できるだけわかりやすく、専門事業者でもなくても理解できるように、専門用語なども控えて学習記事にしてみました。
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は軽量かつテキスト形式でのデータを取り扱える仕組みとなっているので、共用できる参照データのため、どのようなプログラムからも取り扱いしやすいために、使用されることが多い仕組みです。
書式自体がJavaScript由来のため、JavaScript用データ形式にも解釈されやすいかもしれませんが、多くのプログラミング用のデータ形式の仕組みとなります。拡張子は.jsonで、各プログラムはこの.jsonファイルに記載されている独自書式で構造化されたデータを参照して情報を出力するような仕組みの一端となります。
JSONはJavaScript由来の独立した汎用データ形式
JSONデータ形式の用途
では実際にJSONはどのような利用のされ方をしているかを学びます。
- JSONの用途はWebアプリケーション
わかりやすいサービスで言えば、InstagramやTwitterやFacebook、Google系アプリやYoutube、Slackなどのチャット系コミュニケーションツールなどでJSONのデータ形式は利用されています。
見えないところでいつも参照されているJSONデータ
JSONデータ取得を学習する
実際にJSONデータを取得する方法について学んでみます。 JSONのデータ参照や取得はPHPやJava、Pythonなど代表的なプログラム言語で可能ですが今回はJavaScriptでのデータ参照とJSONのデータ形式の基本を学習します。
JSONの基本書式
- {“key”: “value”}
書式はJavaScriptを知っている方であれば、ほとんど同じような書式となり、CSSなどの記述にもやや似ているので、データ形式だけでいえば、かなり人間に理解しやすくわかりやすい構造になっています。
JSONデータをJavaScriptで取得
JSONデータからJavaScriptにデータを引き渡すには、特定の記述が必要になります。
同一サーバー上でのみ動作します。 クロスドメイン(別々のドメインでやり取り)する方法はJSONPという仕組みで可能ですが、基本的には安全面など諸々の事由から非推奨です。
ローカルで試す場合は、以下の関数を使用します。
- JSON.parse (変数名);
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データの確認
for文を利用することで、取得したJSONデータの連想配列としても取得することが可能になります。
複数のプログラミング言語でJSONデータ形式は参照されている
JSONに関する考察
さてJSONについてですがいかがでしたでしょうか。データ形式としては
- 出力されたシンプルなデータベーステキスト
簡単なデータ構造なら波括弧{}でkeyとvalueの組み合わせでオブジェクトデータが設置でき、配列にする場合は角括弧[]とカンマ区切りで、オブジェクトを配列化することができます。
JavaScriptが得意な人であれば、かなり複雑なデータ構造生成が比較的手軽に取り扱えそうです。多くのAJAXやプログラミング言語で利用され、SNSやAPIで採用されるのも頷けます。今回はJSONの基本的な情報やデータ形式、データ取得やカスタマイズ方法までについて学んでみました。
普段あまりデータ操作しない人でもある程度基礎知識を得ることで、APIで取得したJSONがどういうデータなのかについて仕組みをある程度理解しながら業務を進めることも可能になるので、この機会に概要だけでも知っておくことがお薦めです。
JSONのデータ取得とカスタマイズでプログラム記述を覚えるのもアリ
掲載情報につきましては当社が独自に調査、検証および収集した情報です。
情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。
掲載情報の修正・変更等をご希望の場合はお知らせください。
