RESTとは

Webサービスの設計スタイルである「REST（Representational State Transfer）」は、ウェブサービスを作成する際に使用する一連の制約を定義した設計条件です。

昨今、いろいろなAPIサービスがある中で、GETしたりPOSTしたりすることで簡単にデータの登録や取得ができるようになりました。
「あそこのAPIサービス使ってみたい！」そんな方は一度目を通していただくといいかな、と思います。

こちらの記事ではJavaScriptでの実装をデモとして取り上げております。PHP言語での実装ももちろんできます。

RESTの設計原則に従っていると、システムの構成がシンプルになり、柔軟で拡張性の高いWebサービスを実現しやすくなります。
RESTful APIは、RESTアーキテクチャスタイルに準拠したアプリケーションプログラミングインターフェース（API）です。
RESTful APIの主な原則は以下の通りです。

RESTの設計原則

1. クライアント・サーバー・アーキテクチャ

   クライアントとサーバーは分離しており、HTTP または HTTPS プロトコルを使用して標準化されたインターフェイスで通信します。

2. ステートレスなクライアント/サーバモデル

   サーバーは、リクエスト間でクライアントのコンテキストを保存しません。クライアントからの各リクエストには、リクエストを完了するために必要なすべての情報が含まれている必要があります。

3. キャッシュ

   サーバーからのレスポンスは、パフォーマンスを向上させるためにキャッシュ可能であるべき。

4. レイヤーシステム

   アーキテクチャは層状に設計し、各層は特定の機能を持ち、隣接する層とのみ通信を行うようにする。

5. インターフェース

   統一されたインターフェイス クライアントとサーバーを分離できるように、すべてのリソースでインターフェイスが統一されている必要があります。

6. コードオンデマンド

   コードオンデマンド（オプション）。サーバーは、JavaScriptなど、クライアントで実行されるコードを提供することができる。

これらの原則に基づき、RESTful APIはWebサービス構築のためのスケーラブルで柔軟なアプローチを提供し、最新のWebアプリケーションの構築や他のシステムとの統合に広く利用されています。

RESTのメソッド

GET 記事を取得する

1. フェッチ APIを利用する際のコード

fetch('https://api.example.com/articles', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    // 取得したデータを利用する処理
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error('エラー:', error);
  });

2. Promiseオブジェクトを利用する際のコード

function getArticles() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com/articles');
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.onload = function() {
      if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        resolve(data);
      } else {
        reject(new Error(xhr.statusText));
      }
    };

    xhr.onerror = function() {
      reject(new Error('ネットワークエラー'));
    };

    xhr.send();
  });

// 使用例
getArticles()
  .then(data => {
    // 取得したデータを利用する処理
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error('エラー:', error);
  });

3. Axiosを使用する

axios.get('https://api.example.com/articles')
  .then(response => {
    const data = response.data;
    // 取得したデータを利用する処理
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error('エラー:', error);
  });

Axiosに関しては、CDNもあり簡単にAPI通信を行い、データを取得できるため便利です。
もちろん、記述も短くて済みます。

Axios ドキュメンテーション

以上がそれぞれの方法でGETリクエストを行い、記事を取得するためのJavaScriptコードです。

POST 記事を新規投稿する

1. POST 記事を新規投稿する

const articleData = {
  title: '新しい記事',
  content: '記事の内容...'
};

fetch('https://api.example.com/articles', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(articleData)
})
  .then(response => response.json())
  .then(data => {
    // 投稿が成功した後の処理
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error('エラー:', error);
  });

2. Promiseオブジェクトを利用する際のコード

function createArticle(articleData) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://api.example.com/articles');
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.onload = function() {
      if (xhr.status === 201) {
        const data = JSON.parse(xhr.responseText);
        resolve(data);
      } else {
        reject(new Error(xhr.statusText));
      }
    };

    xhr.onerror = function() {
      reject(new Error('ネットワークエラー'));
    };

    xhr.send(JSON.stringify(articleData));
  });
}

// 使用例
const articleData = {
  title: '新しい記事',
  content: '記事の内容...'
};

createArticle(articleData)
  .then(data => {
    // 投稿が成功した後の処理
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error('エラー:', error);
  });

3. Axiosを使用する

const articleData = {
  title: '新しい記事',
  content: '記事の内容...'
};

axios.post('https://api.example.com/articles', articleData)
  .then(response => {
    const data = response.data;
    // 投稿が成功した後の処理
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error('エラー:', error);
  });

以上がそれぞれの方法でPOSTリクエストを使用して新しい記事を投稿するためのJavaScriptコードです。

WebAPIでデータを読み込む方法

JavaScriptでAPIの呼び出しを行う

WebAPIからデータを読み込むためには、JavaScriptを使用してAPIの呼び出しを行います。以下に、JavaScriptでAPIを呼び出すコードの例を示します。

fetch('https://api.example.com/articles')
  .then(response => response.json())
  .then(data => {
    // レスポンスデータを利用する処理
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error('エラー:', error);
  });

上記のコードでは、`fetch`関数を使用して指定したAPIのエンドポイントにGETリクエストを送信し、レスポンスデータを取得しています。
`.then()`メソッドを使用して非同期処理の結果を処理し、`response.json()`を呼び出すことでレスポンスデータをJSON形式として解析します。

取得したデータを利用する処理は、`.then()`メソッドの中で行います。上記の例では、単純にデータをコンソールに出力していますが、必要に応じてデータを画面に表示したり、他の処理を行ったりすることができます。
エラーハンドリングは`.catch()`メソッドを使用して行います。APIの呼び出し中にエラーが発生した場合には、エラーメッセージがコンソールに出力されます。

このようにJavaScriptを使用してAPIを呼び出すことで、WebAPIからデータを読み込むことができます。

参照：MDN リファレンス JSON