JavaScriptでのリクエストとAPI

Ajaxとは

• Ajax（Asynchronous JavaScript and XML） は、ページを再読み込みせずに裏側でデータをやり取りする仕組みです
• ユーザーが操作している同じページのまま、サーバーと通信できます

---

API（Web API）

• Web API は、HTTPを使って情報をやり取りするためのインターフェースです
• 特定のURL（エンドポイント）にリクエストを送信して、データを取得・送信します

---

JSON（データのやり取りフォーマット）

• JavaScript Object Notation の略で、サーバーとデータをやり取りする際によく使われます
• 主なメソッド：

JSON.parse('{"name":"Alice"}');
// => { name: "Alice" } 文字列をオブジェクトに変換

JSON.stringify({ name: "Alice" });
// => '{"name":"Alice"}' オブジェクトをJSON文字列に変換

---

HTTPの基本

HTTPメソッド

メソッド	役割
GET	データの取得
POST	データの送信
DELETE	データの削除

HTTPステータスコード

コード	意味
200系	成功レスポンス
300系	リダイレクト
400系	クライアントエラー
500系	サーバーエラー

クエリストリング

• URLの末尾に付けるパラメータ

?sort=desc&color=blue

HTTPヘッダー

• リクエストやレスポンスに付加できる「キーと値の組み合わせ」
• 例：Content-Type: application/json

---

リクエストを送る方法

1. XHR（古い方法）

• XMLHttpRequest を使った方法（今はあまり使わない）

2. fetch（モダンな方法）

• Promiseに対応している
• Internet Explorerでは非対応

fetch('https://swapi.tech/api/people/1/')
  .then((res) => res.json())
  .then((data) => {
    console.log('取得したJSON:', data.result.properties);
  })
  .catch((err) => {
    console.error('エラー:', err);
  });

3. axios（便利ライブラリ）

• Promise対応で簡単にリクエストを送れる
• fetchよりブラウザ互換性が高く、機能も豊富

axios
  .get('https://swapi.dev/api/people/1/')
  .then((res) => {
    console.log('取得結果:', res.data);
  })
  .catch((err) => {
    console.error('エラー:', err);
  });