JSONとajaxについてざっくりまとめてみた【初心者向け】

はじめに

バックエンドエンジニア2年生なのですが、最近JSONとAjaxについて深く知らないことに気付きました。

そこで、この記事では自分なりに調べて、JSONとAjaxについて簡単にまとめてみました。それぞれの基本的な概念から実際の使用例までを紹介します。

JSONとは？

JSONは、データを表現するための軽量で人間が読み書きしやすいフォーマットです。JavaScriptのオブジェクト記法に基づいており、キーと値のペアからなるデータ構造を持ちます。これにより、異なるプログラム間でデータを簡単に交換することができます。

例えば、以下のようなJSONデータがあります：

json

{
  "name": "John Doe",
  "age": 30,
  "city": "Tokyo"
}

JSONはWebアプリケーション間でデータを交換する際に広く使われています。

Ajaxとは？

Ajaxは、Webページを再読み込みすることなく非同期でサーバーとデータをやり取りするための技術です。

主にJavaScriptとXMLHttpRequestオブジェクト（またはfetch API）を使用して実現されます。

Ajaxを使うことで、ユーザーがページの操作をする際に、バックグラウンドでデータを取得・送信することが可能です。

JSONとAjaxの関係

JSONとAjaxは密接に関連しています。Ajaxを使用することで、サーバーから返されたデータをJSON形式で取得することが一般的です。

JSONは、その軽量さと扱いやすさから、Ajaxを介してデータを受け渡す際の標準的なデータフォーマットとして広く利用されています。

具体的には、Ajaxを使ってリクエストを送信し、サーバーからJSON形式でデータを受け取り、それをJavaScriptで処理してWebページの動的な更新を実現します。

Ajaxの動作フロー

1. ユーザーの操作: ユーザーがWebページ上で操作を行います（例: ボタンクリック）
2. Ajaxリクエストの送信: JavaScriptがAjaxを使用してサーバーに非同期リクエストを送信します。リクエストには、URLやメソッド（GET、POSTなど）、必要に応じてデータ（JSON形式で）を含めることができます
   javascript

   fetch('https://api.example.com/data')
     .then(response => response.json())
     .then(data => {
       console.log(data); // サーバーから取得したデータをコンソールに出力する
       // 取得したデータを使ってページを更新するなどの処理を行う
     })
     .catch(error => {
       console.error('Fetch error:', error);
     });
   

3. サーバーの処理とレスポンス: サーバーは受け取ったリクエストを処理し、JSONなどの形式でレスポンスを返します
4. レスポンスの処理: JavaScriptがサーバーから返されたデータを受け取り、ページの内容を更新したり、他の処理を行ったりします

おわりに

JSONとAjaxは、モダンなWeb開発において欠かせない技術です。

JSONはデータの表現に優れたフォーマットであり、Ajaxを介して非同期でデータを取得・送信する際に重要な役割を果たします。

この組み合わせにより、ユーザー体験を向上させる動的なWebアプリケーションを開発することが可能となります。

これらの基本的な概念を理解し、実際の開発に活かしてみてください。

参考記事

JavaScript Object Notation - wiki
Ajax - wiki
JSONとは？今更聞けない入門編！使い方やデータフォーマットについて解説
初心者目線でAjaxの説明