JavaScript で REST API を?qū)Wぶ

REST API (Representational State Transfer Application Programming Interface) は、ネットワーク化されたアプリケーションの構(gòu)築に広く使用されています。この記事は、クライアント側(cè)とサーバー側(cè)の両方の実裝をカバーし、JavaScript で REST API を操作する方法を理解するのに役立ちます。

---

1. REST API とは何ですか?

REST API を使用すると、クライアント (ブラウザーやモバイル アプリなど) がサーバーと通信してデータを取得または操作できるようになります。標(biāo)準(zhǔn)の HTTP メソッドを使用したステートレス アーキテクチャに従います。

コアコンセプト

1. リソース: エンドポイントによって表されます (例: ユーザー データの場(chǎng)合は /users)。
2. HTTP メソッド:
   • GET: データを取得します。
   • POST: 新しいリソースを作成します。
   • PUT: 既存のリソースを更新します。
   • DELETE: リソースを削除します。
3. データ形式: データの交換には JSON が一般的に使用されます。
4. HTTP ステータス コード:
   • 200 OK: 成功。
   • 201 作成: リソースが作成されました。
   • 400 不正なリクエスト: クライアント側(cè)のエラー。
   • 404 見つかりません: リソースが見つかりません。
   • 500 內(nèi)部サーバー エラー: サーバーの問題。

---

2.ツールとセットアップ

• クライアント側(cè):

  • ブラウザ (fetch または axios ライブラリを備えた JavaScript)。
  • 練習(xí)には https://jsonplaceholder.typicode.com などの API を使用してください。

• サーバー側(cè):

  • Node.js をインストールし、Express フレームワークを使用します。

---

3.クライアント側(cè)での REST API の操作

JavaScript は、REST API と対話するための fetch() API と axios などのサードパーティ ライブラリを提供します。

---

fetch() を使用したデータの取得

REST API からデータを取得する方法は次のとおりです。

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

説明:

1. fetch(url): HTTP リクエストを作成します。
2. response.json(): レスポンスを JSON 形式に変換します。
3. ネットワークエラーや無効な応答を捕捉するために、try...catch を使用してエラー処理が実裝されます。

---

POST によるデータの送信

新しいリソースを作成するには、fetch() API で POST メソッドを使用します。

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

キーポイント:

• メソッド オプションは HTTP メソッドを指定します。
• ヘッダー オプションは、コンテンツ タイプを示すために使用されます。
• 本文には JSON ペイロードが含まれています。

---

4.サーバー側(cè)での REST API の構(gòu)築

バックエンドでは、Express フレームワークを備えた Node.js が REST API の構(gòu)築によく使用されます。

環(huán)境のセットアップ

1. Node.js のインストール: Node.js をダウンロードします。
2. 新しいプロジェクトを初期化します。

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

---

シンプルな REST API の作成

これは基本的な REST API サーバーの例です。

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

説明:

• ミドルウェア: app.use(express.json()) は受信した JSON リクエストを解析します。
• ルート:
  • GET /users: すべてのユーザーを取得します。
  • GET /users/:id: 特定のユーザーを取得します。
  • POST /users: 新しいユーザーを追加します。
  • PUT /users/:id: ユーザーの詳細(xì)を更新します。
  • DELETE /users/:id: ユーザーを削除します。

---

5. REST API をテストする

Postman などのツールや、curl などのコマンドライン ユーティリティを使用して API をテストできます。

ポストマンの使用

1. ここから Postman をインストールします。
2. 新しいリクエストを作成します:
   • GET http://localhost:3000/users: すべてのユーザーを取得します。
   • POST http://localhost:3000/users: JSON 本文を持つユーザーを追加します。

カールの使用

   mkdir rest-api-demo
   cd rest-api-demo
   npm init -y
   npm install express

---

6. REST API 開発のベスト プラクティス

1. 意味のあるエンドポイント名を使用します (例: /data の代わりに /users)。
2. ユーザー入力を検証して、無効なデータや有害なデータを防ぎます。
3. 一貫した HTTP ステータス コードに従います。
4. Swagger や Postman などのツールを使用して API を文書化します。

---

私の作業(yè)コードリポジトリ

結(jié)論

REST API は、最新の Web 開発の基礎(chǔ)です。クライアント側(cè)とサーバー側(cè)の両方で JavaScript で REST API を操作する方法を?qū)Wぶことで、アプリケーションを構(gòu)築および統(tǒng)合するための強(qiáng)力なスキル セットを獲得できます。実踐が重要です。まずパブリック API を使用し、次に Node.js と Express を使用して獨(dú)自の API を構(gòu)築します。

---

このガイドのどの部分についても、お?dú)葺Xに質(zhì)問したり、説明を求めてください。

以上がJavaScript での REST API の學(xué)習(xí)の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。