見出し画像

【Webアプリ開発】REST API入門④　REST ClientによるCRUD操作

kenpapa

本記事は下記の記事の続きです。

前回の記事では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のインストール

公式サイトからインストーラーをダウンロードします。

画像1

インストーラーを実行して画面の指示に従ってインストール作業を進めます。

画像2

インストールが終了しました。

画像3

nodeとnpmのコマンドが使用できるようになりました。

画像4

JSON Serverのインストール

JSON Serverは「npm install -g json-server」を実行することでインストールできます。

画像5

インストールが終了しました。

画像6

REST APIの作成

JSON ServerでREST APIを作成するのは簡単で、JSONファイルを用意するだけです。

エディタで「db.json」という名前のファイルを作成して、下図のようにJSON形式のデータを入力します。

画像7

入力するデータは下記のとおりです。

{
  "languages": [
    {
      "id": 1,
      "name": "Python"
    },
    {
      "id": 2,
      "name": "JavaScript"
    }
  ]
}

JSON Serverは次のようなコマンドを実行すれば起動することができます。

json-server --watch JSONファイル名

db.jsonファイルが置かれているディレクトリで「json-server --watch db.json」を実行します。

画像8

下図のようなメッセージが出れば、「languages」というリソースを操作できるREST APIが無事作成できたことになります。

画像9

下図のようなCRUD操作を行うことで「languages」というリソースを操作することができます。

画像24

試しにブラウザに「http://localhost:3000/languages」と入力してENTERキーを押す（GET操作）と、下図のように表示されます。

画像10

REST ClientによるCRUD操作

REST APIが作成できましたので、REST Clientを使ってCRUD操作を行います。

REST Clientの使い方については下記の公式ドキュメントに詳しい説明があります。

ただ、本記事では簡単なCRUD操作しか行いませんので、とりあえずは次の４点だけを踏まえて先に読み進めてください。

ファイルの拡張子は「http」か「rest」にする
リクエストを記述するとその上に「Send Request」が表示される
「Send Request」をクリックするとリクエストが送信される
「###」で区切ることで複数のリクエストを書くことができる

ファイルの準備

Visual Studio Codeを立ち上げて、「test.http」というファイルを作成します。

httpという拡張子をつけることによって、リクエストを記述するとその上に「Send Request」が表示されるようになります。

Read操作

GET http://localhost:3000/languages

と入力します。

画像11

左の赤線箇所のSend Requestをクリックすると「languages」のREST APIに対してHTTPリクエストが送信され、リクエスト結果は、右側の分割ウィンドウで確認することができます。

画像12

REST APIからデータを正しく取得できていることがわかります。

Create操作

JSONデータをREST APIに渡すために、「Content-Type: application/json」と、一行空けてJSONデータを追加します。

POST http://localhost:3000/languages
Content-Type: application/json

{
  "name": "Dart"
}

と入力します。

画像13

左の赤線箇所のSend RequestをクリックするとHTTPリクエストが送信され、リクエスト結果は、右側の分割ウィンドウで確認することができます。

画像14

id=3にデータが追加されたことがわかります。

下図は現時点の「languages」の全データを取得しています。

画像15

id=3のデータも表示されています。

Update操作

JSONデータをREST APIに渡すために、「Content-Type: application/json」と、一行空けてJSONデータを追加します。

PUT http://localhost:3000/languages/3
Content-Type: application/json

{
  "name": "Kotlin"
}

と入力します。

画像16

左の赤線箇所のSend RequestをクリックするとHTTPリクエストが送信され、リクエスト結果は、右側の分割ウィンドウで確認することができます。

画像17

id=3のデータが更新されたことがわかります。

下図は現時点の「languages」の全データを取得しています。

画像18

id=3のデータも正しく表示されています。

Delete操作

DELETE http://localhost:3000/languages/3

と入力します。

画像19

左の赤線箇所のSend RequestをクリックするとHTTPリクエストが送信され、リクエスト結果は、右側の分割ウィンドウで確認することができます。

画像20

id=3のデータが削除されたことがわかります。

下図は現時点の「languages」の全データを取得しています。

画像21

id=3のデータは削除されたため存在していません。

CRUD操作を行うアプリの紹介

本記事ではREST ClientというGUIツールを使ってREST APIに対してCRUD操作を行ってきましたが、WebアプリでCRUD操作を行ってみたいという方もいらっしゃると思います。

そのような方におすすめなのが下記のチュートリアルです。

画像22

チュートリアルでは下図のようなCRUD操作を行うアプリを作成しますが、JSONPlaceholderのREST APIを使用しています。

画像23

下記は「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）のお話をしようと思います。