JSONとは？仕組みと基本的な使い方を初心者向けに解説

JSONは「JavaScript Object Notation（JavaScriptオブジェクト表記法）」の略称で、データをキーと値のペアで整理するためのデータ形式です。この形式でデータを保存することで、オブジェクトは軽量かつ言語非依存になります。つまり、ほとんどのプログラミング言語でJSONを読み書きできるということです。

JSONは軽量でありながら、人間にも機械にも読みやすいという特徴があるため、サーバーからクライアント側へデータを取得する際によく利用されています。APIを活用するのが当たり前となった現代の開発において、JSONは柔軟性が高く、サーバーから必要なデータだけを抽出してユーザーに届けることができます。

JSONの使い方

JSONは、サーバーからアプリのフロントエンドへ渡されるデータを扱うのに非常に便利な手段です。主要なプログラミング言語の多くには、データをJSONに変換するメソッドが標準で用意されています。たとえばJavaScriptのfetchリクエストでは、サーバーから返されたレスポンスに対してjson()メソッドを呼び出すだけで、簡単にJSONへ変換できます。

そもそも、なぜレスポンスをJSONに変換する必要があるのでしょうか？ 生のレスポンスは冗長で、人間にとって解読しづらいものです。レスポンスをJSONに変換することで、データは読み取りやすいキーと値のペアに整理され、コードからもアクセスしやすくなります。その結果、取得したデータを使った処理をスムーズに記述できるようになります。

JSONの具体例

まず、レスポンスをJSONに変換するとどのような形になるのかを見てみましょう。以下の例では、現在宇宙にいる宇宙飛行士の情報を教えてくれるAPIに対して、fetchリクエストを送信しています。

fetch('https://api.open-notify.org/astros.json')
.then(response => response.json())
.then(data => console.log(data))

ここでは、JSONに変換したレスポンスをコンソールに出力しています。出力結果は次のようになります。

{
    "message": "success",
    "number": 7,
    "people": [
        {
            "craft": "ISS",
            "name": "Sergey Ryzhikov"
        },
        {
            "craft": "ISS",
            "name": "Kate Rubins"
        },
        {
            "craft": "ISS",
            "name": "Sergey Kud-Sverchkov"
        },
        {
            "craft": "ISS",
            "name": "Mike Hopkins"
        },
        {
            "craft": "ISS",
            "name": "Victor Glover"
        },
        {
            "craft": "ISS",
            "name": "Shannon Walker"
        },
        {
            "craft": "ISS",
            "name": "Soichi Noguchi"
        }
    ]
}

このオブジェクトの中には「message」「number」「people」という3つのキーが含まれています。まず「message」キーの値は「success」で、これはリクエストが正常に完了したことを知らせてくれるステータスメッセージです。

次に「number」キーの値は7で、これは現在宇宙にいる人の総数を表しています。そして最後の「people」キーの値は配列になっており、その中にはさらに複数のオブジェクトが格納されています。それぞれのオブジェクトは「craft」と「name」というキーを持ち、値としては宇宙船の名前と、搭乗している宇宙飛行士の名前が入っています。

このように、JSONは何重にもネストした構造を持つことができます。fetchリクエストのこの時点では、レスポンスはすでにJSONへ変換されているので、次はそのデータを使って何らかの処理を行う段階に入ります。たとえば、このデータをもとに各宇宙飛行士のカードを一覧表示するといったことも可能です。データをどう活用するかは、アプリで実現したい機能に応じて自由に決められます。

まとめ

おさらいすると、JSONはデータを格納するためのオブジェクト形式であり、一般的にはfetchリクエストのレスポンスとしてサーバーから取得されるデータを扱います。また、JavaScriptにはレスポンスをJSONに変換するためのjson()メソッドが標準で備わっていることも学びました。

アプリケーションのフロントエンドでサーバーからのデータを利用するには、そのデータがJSON形式である必要があります。レスポンスをJSONに変換できれば、あとはそのデータをもとに自由にUIや機能を構築できます。json()メソッドやfetchリクエストについてさらに詳しく学びたい方は、公式ドキュメントや関連ガイドを参照してみてください。