【Webアプリ開発】REST API入門④ REST ClientによるCRUD操作
本記事は下記の記事の続きです。
前回の記事ではVisual Studio CodeのREST Clientを簡単に紹介しましたが、本記事ではREST Clientを使ってCRUD操作を行ってみます。
操作対象のREST APIですが、JSON Serverという簡易サーバーを使用することで、コードを書かずにREST APIを作成することができますので、それを使用することにします。
JSON Serverの準備
JSON Serverはnpmというコマンドを使うことで簡単にインストールすることができます。
npmはNode.jsをインストールすると自動でインストールされます。
よって、まずはNode.jsをインストールして、その後JSON Serverをインストールすることにします。
Node.jsのインストール
公式サイトからインストーラーをダウンロードします。
インストーラーを実行して画面の指示に従ってインストール作業を進めます。
インストールが終了しました。
nodeとnpmのコマンドが使用できるようになりました。
JSON Serverのインストール
JSON Serverは「npm install -g json-server」を実行することでインストールできます。
インストールが終了しました。
REST APIの作成
JSON ServerでREST APIを作成するのは簡単で、JSONファイルを用意するだけです。
エディタで「db.json」という名前のファイルを作成して、下図のようにJSON形式のデータを入力します。
入力するデータは下記のとおりです。
{
"languages": [
{
"id": 1,
"name": "Python"
},
{
"id": 2,
"name": "JavaScript"
}
]
}
JSON Serverは次のようなコマンドを実行すれば起動することができます。
json-server --watch JSONファイル名
db.jsonファイルが置かれているディレクトリで「json-server --watch db.json」を実行します。
下図のようなメッセージが出れば、「languages」というリソースを操作できるREST APIが無事作成できたことになります。
下図のようなCRUD操作を行うことで「languages」というリソースを操作することができます。
試しにブラウザに「http://localhost:3000/languages」と入力してENTERキーを押す(GET操作)と、下図のように表示されます。
REST ClientによるCRUD操作
REST APIが作成できましたので、REST Clientを使ってCRUD操作を行います。
REST Clientの使い方については下記の公式ドキュメントに詳しい説明があります。
ただ、本記事では簡単なCRUD操作しか行いませんので、とりあえずは次の4点だけを踏まえて先に読み進めてください。
ファイルの拡張子は「http」か「rest」にする
リクエストを記述するとその上に「Send Request」が表示される
「Send Request」をクリックするとリクエストが送信される
「###」で区切ることで複数のリクエストを書くことができる
ファイルの準備
Visual Studio Codeを立ち上げて、「test.http」というファイルを作成します。
httpという拡張子をつけることによって、リクエストを記述するとその上に「Send Request」が表示されるようになります。
Read操作
GET http://localhost:3000/languages
と入力します。
左の赤線箇所のSend Requestをクリックすると「languages」のREST APIに対してHTTPリクエストが送信され、リクエスト結果は、右側の分割ウィンドウで確認することができます。
REST APIからデータを正しく取得できていることがわかります。
Create操作
JSONデータをREST APIに渡すために、「Content-Type: application/json」と、一行空けてJSONデータを追加します。
POST http://localhost:3000/languages
Content-Type: application/json
{
"name": "Dart"
}
と入力します。
左の赤線箇所のSend RequestをクリックするとHTTPリクエストが送信され、リクエスト結果は、右側の分割ウィンドウで確認することができます。
id=3にデータが追加されたことがわかります。
下図は現時点の「languages」の全データを取得しています。
id=3のデータも表示されています。
Update操作
JSONデータをREST APIに渡すために、「Content-Type: application/json」と、一行空けてJSONデータを追加します。
PUT http://localhost:3000/languages/3
Content-Type: application/json
{
"name": "Kotlin"
}
と入力します。
左の赤線箇所のSend RequestをクリックするとHTTPリクエストが送信され、リクエスト結果は、右側の分割ウィンドウで確認することができます。
id=3のデータが更新されたことがわかります。
下図は現時点の「languages」の全データを取得しています。
id=3のデータも正しく表示されています。
Delete操作
DELETE http://localhost:3000/languages/3
と入力します。
左の赤線箇所のSend RequestをクリックするとHTTPリクエストが送信され、リクエスト結果は、右側の分割ウィンドウで確認することができます。
id=3のデータが削除されたことがわかります。
下図は現時点の「languages」の全データを取得しています。
id=3のデータは削除されたため存在していません。
CRUD操作を行うアプリの紹介
本記事ではREST ClientというGUIツールを使ってREST APIに対してCRUD操作を行ってきましたが、WebアプリでCRUD操作を行ってみたいという方もいらっしゃると思います。
そのような方におすすめなのが下記のチュートリアルです。
チュートリアルでは下図のようなCRUD操作を行うアプリを作成しますが、JSONPlaceholderのREST APIを使用しています。
下記は「App.vue」というファイルのCRUD操作を行っている箇所の抜粋ですが、Fetch APIを使ってJSONPlaceholderのREST APIとやりとりを行っています。
methods: {
async getEmployees() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users')
const data = await response.json()
this.employees = data
} catch (error) {
console.error(error)
}
},
async addEmployee(employee) {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users', {
method: 'POST',
body: JSON.stringify(employee),
headers: { "Content-type": "application/json; charset=UTF-8" }
})
const data = await response.json()
this.employees = [...this.employees, data]
} catch (error) {
console.error(error)
}
},
async editEmployee(id, updatedEmployee) {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
method: 'PUT',
body: JSON.stringify(updatedEmployee),
headers: { "Content-type": "application/json; charset=UTF-8" }
})
const data = await response.json()
this.employees = this.employees.map(employee => employee.id === id ? data : employee)
} catch (error) {
console.error(error)
}
},
async deleteEmployee(id) {
try {
await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
method: 'DELETE'
})
this.employees = this.employees.filter(employee => employee.id !== id)
} catch (error) {
console.error(error)
}
},
},
上記のチュートリアルに関しては以前下記の記事で紹介しましたので、興味のある方はご確認ください。
以上、本記事ではREST Clientを使って簡単なCRUD操作を行ってみました。
次回からはJSON Web Token(JWT)のお話をしようと思います。