【Webアプリ開発】REST API入門③ REST APIの利用方法
本記事は下記の記事の続きです。
REST APIを利用することでリソースに対してCRUD操作を行うことができますが、利用する方法はいろいろとあります。
本記事では次の３つの方法を紹介します。
GUIツールによるREST APIの利用
JavaScript（ブラウザ環境）によるREST APIの利用
プログラミングによるREST APIの利用
下図に示すJSONPlaceholderの「users」というリソースを操作するためのREST APIを３つの方法で利用してみます。
ちなみに、「users」というリソースは下記のようなJSON形式のユーザー情報が１０個含まれている配列です。
GUIツールによるREST APIの利用
Visual Studio CodeはMicrosoft社が開発しているWindows、Linux、macOS用のソースコードエディタですが、「REST Client」という拡張機能をインストールすることができます。
「REST Client」を使うと非常に簡単にREST APIを利用することができますので、ここでもそれを利用することにします。
Visual Studio Codeがインストールされていない場合は、まずはインストーラーをダウンロードしてVisual Studio Codeのインストールを行います。
Visual Studio Codeのインストールが終わればVisual Studio Codeを立ち上げて「REST Client」のインストールを行います。
「REST Client」のインストールが終わりました。
拡張子がhttpの「test.http」というファイルを作成し、赤線部分を入力します。（Send Requestは自動で挿入されます）
左の赤線箇所のSend RequestをクリックするとJSONPlaceholderの「users」のREST APIに対してHTTPリクエストが送信され、リクエスト結果は、右側の分割ウィンドウで確認することができます。
ファイルにREST APIに対するHTTPリクエストを記述してSend Requestをクリックするだけですぐに使える、という非常に簡単で便利なツールです。
JavaScript（ブラウザ環境）によるREST APIの利用
JavaScriptからREST APIを利用する方法の一つにFetch APIがあります。
下記の「index.html」ではscriptの中でFetch APIを使ってREST APIを利用してデータを取得しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rest API practice</title>
</head>
<body onload="getData()">
<ul>
<div id="dataList"></div>
</ul>
<script>
function getData() {
const list = document.getElementById('dataList');
list.innerHTML = '';
fetch('https://jsonplaceholder.typicode.com/users')
.then((res) => res.json())
.then((users) => {
for (let i = 0; i < users.length; i++) {
list.innerHTML += `<li>
${users[i].id} ${users[i].name} ${users[i].email}
</li>`;
}
})
.catch((err) => console.log(err))
}
</script>
</body>
</html>下図はindex.htmlをブラウザで開いた画面です。
Fetch APIはブラウザの標準機能なのですぐに使うことができて便利です。
プログラミングによるREST APIの利用
プログラムのコードの中でREST APIの情報を利用したいという場合もあると思います。
ここではPythonというプログラミング言語でREST APIを利用する場合を考えます。
PythonにはRequestsというHTTPライブラリがありますので、そのライブラリを使ってREST APIを利用してデータを取得することにします。
Pythonがインストールされていない場合は、まずPythonのインストーラーをダウンロードします。
インストーラーを使ってPythonのインストールを行います。
Pythonのインストールが終わったらpipを使ってRequestsライブラリをインストールします。
無事にRequestsがインストールできました。
下記の「example.py」ではRequestsライブラリを使ってREST APIを利用してデータを取得しています。
import requests
url = 'https://jsonplaceholder.typicode.com/users'
r = requests.get(url)
users = r.json()
for user in users:
print(user['id'], user['name'], user['email'])下図はexample.pyの実行画面です。
以上のように、Requestsライブラリを使えば簡単にREST APIを利用することができます。
他の方法の紹介
REST APIを利用する方法はいろいろとありますので、他にどのような方法があるのかを簡単に紹介します。
Postman
PostmanはREST APIを利用するためのGUIツールとしては一番有名なツールだと思います。
下図がPostmanの実行画面です。
私は以前はPostmanをメインに使用していましたが、Visual Studio Codeの「REST Client」を使い始めてからは、Postmanはほとんど使用しなくなりました。
axios
JavaScriptからREST APIを利用する方法の一つにaxiosを使う方法があります。
下記は先程Fetch APIの箇所で紹介しました「index.html」をaxiosを使う形に少し変更したコードです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rest API practice</title>
</head>
<body onload="getData()">
<ul>
<div id="dataList"></div>
</ul>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function getData() {
const list = document.getElementById('dataList');
list.innerHTML = '';
axios
.get('https://jsonplaceholder.typicode.com/users')
.then((res) => res.data)
.then((users) => {
for (let i = 0; i < users.length; i++) {
list.innerHTML += `<li>
${users[i].id} ${users[i].name} ${users[i].email}
</li>`;
}
})
.catch((err) => console.log(err));
}
</script>
</body>
</html>下図はindex.htmlをブラウザで開いた画面です。
Fetch APIとaxiosの違いについては、「Fetch API axios 違い」というワードで検索するといろいろと記事が見つかります。
例えば、下記の記事はわかりやすく両者を比較していると思います。
Flutter
Flutter は Google 社が開発したモバイル（iPhone/Android）、Web、デスクトップアプリを開発できるオープンソースのアプリケーションフレームワークです。
Flutterにはhttpパッケージが用意されており、それを使うことでREST APIを利用することができます。
下記はJSONPlaceholderのAPIをFlutterで利用しているサンプルコードです。
以上のように、REST APIを利用する方法はいろいろとあります。
REST APIを使うメリット
上記でみてきましたように、REST APIを利用する方法にはいろいろとあります。
そのため、REST APIベースの業務システムにすると、モバイルアプリケーションへの対応や、外部システムとの連携が従来よりも容易になります。
下図は従来のWeb業務システムとREST APIベースの業務システムを比較しています。
また、REST APIでクライアントとサーバのやりとりを行う形にすることで、クライアントとサーバが明確に分離され、開発作業やメンテナンス作業がしやすくなることが期待できます。
下記に情報源のリンクを貼っておきます。
以上、本記事ではREST APIの利用方法について簡単に紹介しました。