☰
kazugramming Let's program together

JSON Serverでcurlコマンドを実行しよう

Javascript

こんにちは、kazutoです。今回は、JSON Serverという簡易サーバを立て、curlコマンドを実行して、CRUD操作を行っていきます。

JSON Serverとは

JSON Serverとは、簡単にRESTfull APIのモックが作れるライブラリ、npmのパッケージです。JSONファイルを指定して、JSON Serverを起動する事で、簡単にHTTPサーバを構築する事ができます。

使用されるユースケースは

  • バックエンドが用意されていない状態でアプリケーションのフロントエンドでWeb APIを叩きたい時
  • APIの設計

の段階でよく使用されます。

今回は、このJSON Serverを用いて、curlコマンドを実行してCRUD操作をしていきます。

※RESTfull APIとは
RESTアーキテクチャ の原則に従って設計されたAPI。
※RESTアーキテクチャスタイル とは
WebアプリやWeb APIを設計する際の設計思想です。複数のアーキテクチャによってRESTアーキテクチャスタイルは成り立っています。
※APIのモックとは
本物では無い試作品みたいなもの

事前準備

まずは、JSON Serverを使える様に開発環境を整えていきましょう。
JSON Serverは、Node.jsというサーバーサイドで動くJavaScriptの上で　動作します。なので今回は、npmというNode.jsのパッケージ マネージャーを用いて、JSON Serverを開発環境にインストールをしていきます。

  • ディレクトリを作成
  • Node.jsをインストールしよう
  • npmでJSON Serverをインストールしよう
  • pakege.jsonの中身を確認をしてみよう。

※パッケージ マネージャーとは
パッケージを管理するツールの事を指します。npmの正式名称は（Node Package Manager）。つまり、Node.jsのパッケージを管理をするツールです。
※パッケージとは
便利なプログラムをまとめたものです。

具体的には、

  • 汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにした、ライブラリ
  • よく使われるライブラリを集め、アプリケーションを開発するのに必要な機能が予め用意された骨組みフレームワーク

の事を指します。

ディレクトリを作成

まずは開発環境のディレクトリをmkdirコマンドを実行しましょう。

mkdir　json_searver_app

ディレクトリが作成できたかlsコマンドを実行して確認をしましょう。

ls json_searver_app
json_searver_app

ディレクトリが作成されていたら次のステップに進みましょう。

Node.jsをインストールしよう（macOS対応）

まずは、Node.jsを開発環境で使える様にしていきます。
初めに、XcodeのCommand Line ToolsというMac向けに提供されているコマンドツールをインストールしていきます。コマンドツールとは、コマンドを入力して操作するアプリケーションの事を指します。通常、Xcodeをインストールをして、手動でCommand Line Toolsをインストールします。しかし、Xcodeは容量が多く、PCが重くなる可能性があるので、今回は、Xcodeをインストールせずに、Command Line Toolsのみをインストールをしていきます。

下記のコマンドを実行してください。

xcode-select --install

次に、Homebrewをインストールをしていきます。

Homebrewを用いて、Node.jsをインストールしていくのですが、そもそも、
Command Line Toolsをインストールをしていないと、ターミナルでコマンドを実行できないです。したがって、Command Line Toolsを先にインストールしました。

Homebrewとは、ソフトウェアの導入を単純化するパッケージ管理システムの一つです。下記のコマンドをご自身のターミナルに貼り付けてください。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

上記のコマンドを実行したらインストールが始まると思います。インストールが終わったら、下記のコマンドを実行してHomebrewが開発環境に存在するかを確認をしましょう。

brew -v
＃著者の場合
Homebrew 2.5.0
Homebrew/homebrew-core (git revision cb424; last commit 2020-09-13)

上記の様にバージョンの確認ができたら、次のコマンドを実行してください。管理者権限を変更します。

sudo chown -R `whoami`:admin /usr/local/bin

sudoコマンドは、実行すると、スーパーユーザー・他のユーザーの権限でコマンド操作ができる様になります。今回の場合は、すべての権限を持っているスーパーユーザの権限でコマンド操作をしています。

chownコマンドはファイルの所有者やグループを変更するコマンドです。また、ーRオプション付け加えるとディレクトリごと権限を変更する事ができます。

まとめると、すべての権限を持っているスーパーユーザの権限で、指定したディレクトリの権限の所有者を利用ユーザーに変更しています。難しいので流しても、構いません。

最後にnodebrewをインストールをし、Node.jsをインストールをしていきます。

nodejs.jpg

下記のコマンドを入力をしてください。

brew install nodebrew

次にPATHを通しましょう。

シェルがzshの場合
echo　export PATH=$HOME/.nodebrew/src:$PATH　>> ~/.zshrc
source ~/.zshrc
シェルがbashの場合
echo export PATH=$HOME/.nodebrew/src:$PATH >> ~/.bash_profile
source ~/.bash_profile

※PATHについては,ご自身の環境に合わせてください。おそらく上記のコマンドを入力しても動作するとは、思います。

nodebrewがインストールができたかを確認をするため、以下のコマンドを入力をしてください。

nodebrew　-v
#例
 nodebrew install v8.9.4
 nodebrew use v8.9.4

　次に下記のコマンドを実行をしてNode.jsをインストールしましょう。

nodebrew install-binary stable

このコマンドを実行する事で安定バージョンのNode.jsをインストールする事が可能になります。

次にNode.jsがインストールができたか確認をしましょう。

nodebrew ls
例
v14.14.0
v15.0.1

current: none

無事、Node.jsがインストールされているのが確認ができました。
しかし、Node.jsをPCの中に入れただけでは、何も起こりません。なので、使いたいNode.jsのバージョンを適用する必要があります。具体的には、currentの部分にバージョンを設定します。

下記のコマンドを叩いてください。

nodebrew　use v14.14.0

もう一度、lsコマンドを実行してみてください。

nodebrew ls
例
v14.14.0
v15.0.1

current: v14.14.0

currentの部分にバージョンが適用された事が確認ができると思います。

以上でNode.jsの「Node.jsをインストールしよう（macOS対応）」のトピックは終わります。環境構築の部分ですので、落ち着いて進めてください。

※macOSのみ対応

npmでJSON Serverをインストールしよう

無事、Node.jsを開発環境にインストールが出来たら、npmもインストールをしていきましょう・・・npmは、インストールをする必要は、ありません。実は、Node.jsインストールをしたらnpmも自動的にインストールされます(何も設定を付け加えなかった場合)

なので、npmコマンドを実行して、JSON Serverをインストールしていきましょう。npmでパッケージ をインストールする場合は、下記のコマンドを開発ディレクトリ（json_server_app）で実行します。

npm init
npm install  パッケージ名

initコマンドで、pakege.jsonというファイルを作成しています。このファイルは、json形式で記載された、npmなどのパッケージ マネージャー でインストールしたパッケージを管理するためのファイルです。

install コマンドでパッケージをインストールをします。
要するにパッケージをpakege.jsonファイルに書き込んでいく感じです。

では、実際にJson Serverをインストールをしていきましょう。

cd json_searver_app
npm init 
npm install json-server

このトピックでは、あえて、JSON Serverがインストールをされたのを確認をしません。次のトピックに進みましょう。

pakege.jsonの中身を確認をしてみよう。

では、実際にJSON Serverがインストールされているのかを確認をしましょう。生成されたpakege.jsonの中身を覗いていきましょう。

json-serverというキーがあるのが、確認ができると思います。したがって、このディレクトリ内（json_server_app）では、JSON Serveは使用する事が可能になりました。次のトピックでは、JSON Serverを起動してみましょう。

JSON Serverを起動しよう

では、JSONサーバを起動をしていきましょう。まずは、touchコマンドを実行して下記のファイルを作成してください。

touch db.json

db.jsonファイルに下記の記述を足してください。

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

次に下記のコマンドを入力してください。JSON Serverが起動します。

json-server --watch db.json

上記の画像の様にLoading〜Watchingと出力されたら、サーバーが起動しています。下記のリンクを参照してサーバーが起動しているのを確認をしてください。

http://localhost:3000

画像に alt 属性が指定されていません。ファイル名: 42aaeb10d8d2b359d22dc1c99cfe6868.png

上記の画像の様なwebページを参照できたら、無事、JSON Serverを起動する事に成功しました。以上で、「事前準備」のトピックの解説は終了になります。環境構築の部分で難しかったと思いますが、誰もが通らなければいけない道なので、踏ん張って、乗り越えていきましょう。

curlコマンドで CRUD操作をしよう

Json Serverを起動する準備が出来たので、curlコマンドで5つのHTTPメソッドを使ってみましょう。今回、使用するHTTPメソッドの概要については、下記の表を参照して特徴を掴んでください。

HTTPメソッド 概要
GET リソースを取得
POST 子リソースの作成、リソースへのデータ追加
PUT リソースの更新
DELETE リソースの削除
PATCH PUTと同じだが、差分のみを置き換える

curlコマンドテンプレート※基本的に下記のテンプレートに当てはめてコマンドを実行していきます。（使用するオプションについても記載してあります。）

curl -X＃HTTPメソッド "URL" | jq
jq #Jsonにパース
-X #HTTPメソッド指定
-H #ヘッダ情報を追加　

curlコマンドでGETリクエストを送ってみよう

まずは、GETリクエストをJSON Serverに送ってみましょう。GETリクエストは、リソースを取得するためのHTTPメソッドです。

curl -X GET http://localhost:3000/posts | jq

上記の画像の様にデータが、JSON形式でデータが表示されていたらHTTP通信が成功になります。ちなみにブラウザで確認すると以下の画像の様になります。

まあ、ブラウザでも同じくJSON形式でデータが返ってきます。GETリクエストについて、もっと深く知りたい方は、「WEB APIを叩いてみよう」の記事を参照してください。

curlコマンドでPOSTリクエストを送ってみよう

次に、POSTリクエストをJSON Serverに送ってみましょう。POSTメソッドは、子リソースの作成、リソースへのデータ追加をするためのHTTPメソッドです。つまり、データを作成したいときに使うメソッドです。

下記のコマンドを実行してください。

curl 
-X POST  "http://localhost:3000/posts" 
-H "Content-Type: application/json" 
-d '{"title":"JSON Serverデビュー", "body":"環境構築難しい〜"}' | jq

上記は、JSON形式でデータを送信しています。

-H "Content-Type: application/json"

-Hオプションはヘッダに情報を付与するオプションです。今回は、ヘッダというデータに対する補足の情報が記載されている所にJSON形式でデータを送ると設定を付け加えています。

-d '{"title":"JSON Serverデビュー", "body":"環境構築難しい〜"}'

-dオプションは、リクエストするデータの指定をするオプションです。今回の場合は、-HオプションでJSON形式でデータを送信する設定にしたので、上記の様な記述の仕方になりました。もし、ーHオプションにContent-Typeが指定されていない場合は、以下の様にクエリ文字列を記述をしてデータを指定します。

"title=JSON Serverデビュー&body=環境構築難しい〜"

クエリ文字列とはサーバーに情報を送るためにURLの末尾につけ足す文字列のことです。curlコマンドを用いる際はよく使うので覚えておきましょう。

curlコマンドのオプションに関する解説が終わったので、本題に戻りましょう!!

以下の画像の様にリクエストしたデータがJSON形式で表示されたら、無事にデータが保存されました。

では本当にデータが保存されたか確認をしてみましょう。GETリクエストを送ります。

curl -X GET "http://localhost:3000/posts" |jq

末尾にデータが追加されている事が確認ができますので、無事にPOSTリクエストが送れました。POSTリクエストは、GETリクエストと比較して、

  • 送るデータの指定
  • 送るデータ形式の設定

をオプションとして付与しているので、少し複雑に感じるかもしれませんが、内容に関してはシンプルですので、形に惑わされずに読み解きましょう。

curlコマンドでPUTリクエストを送ってみよう

次に、PUTリクエストをJSON Serverに送ってみましょう。PUTリクエストは、リソースの更新するためのHTTPメソッドです。今回は、idが１番目のデータを更新をしていきます。

curl 
-X PUT  "http://localhost:3000/posts/1" 
-H "Content-Type: application/json"  
-d '{"id":1,"title":"更新", "body":"idが1番のデータを更新する"}' | jq

ポイントは、URLの指定になります。

"http://localhost:3000/posts/1"

1はid番号の事を指します。”posts/1”とする事で個別のリソースにアクセスする事ができます。PUTメソッドは、リソースを更新するメソッドです。したがって、既に存在するリソースを単一で指定しなければいけません。なので、個別のリソースを指定してPUTリクエストを送信しています。

上記の画像の様にidが1番のデータが更新されていたら、PUTリクエストが成功になります。念のためGETリクエストを送って、現状のリソース状態を確認をしましょう。

curl  -X GET  "http://localhost:3000/posts" | jq

上記の画像の通り、GETリクエストを送って現状のリソース状態を確認をした結果、データが更新されているのが確認できたら、PUTリクエストが成功した証になります。

curlコマンドでPATCHリクエストを送ってみよう

次に、PATCHリクエストをJSON Serverに送ってみましょう。PATCHリクエストはリソースの差分のみ更新するHTTPメソッドです。今回は、idが2番目のデータのtitle属性のみ更新をしてみましょう。

curl 
 -X PATCH "http://localhost:3000/posts/2" 
 -H "Content-Type: application/json" 
 -d '{"title":"タイトルのみ変更"}' | jq

PUTリクエスト送った時と記述、ほぼ一緒なので一部、抜粋して解説します。

 -d '{"title":"タイトルのみ変更"}'

PUTリクエストは、差分のみを更新するHTTPメソッドです。今回は、PUTリクエストの特性を確認するため、title属性のみ更新をしています。

上記の画像をご覧ください。title属性のみデータが更新されているのが確認ができると思います。実は、PUTメソッドでは,この様に差分のみを変更する事はできません。下記のコマンドを入力してください。

curl 
 -X PATCH "http://localhost:3000/posts/2" 
 -H "Content-Type: application/json" 
 -d '{"title":"タイトルのみ変更"}' | jq

上記の画像を確認をして頂くと、body属性が消えているのがわかると思います。※なおid属性については少し特殊なので無い物だと考えてください。

少し、解説しづらい部分なのですが、

  • PUTメソッド
    →全てのデータを上書きする形で更新する
  • PATHCHメソッド
    →指定したデータのみ上書きする

という認識で大丈夫です。

curlコマンドでDELETEリクエストを送ってみよう

最後に、DELETEリクエストをJSON Serverを送ってみましょう。DELETEメソッドは、リソースを削除するためのHTTPメソッドです。DELETEメソッドを検証するため、試しに、id番号が2番目のデータを削除してみましょう。

curl -X DELETE "http://localhost:3000/posts/2" | jq

{}と表示されていますが、これは、データを削除したときにレスポンス値として返ってくるデータです。当然、DELTEメソッドで、リソースを削除する様にリクエストが送っているので、HTTP通信が成功した場合は、空のハッシュが返ってきます。

最後にデータが本当に削除されたかGETリクエスト送って確認をしてみましょう。

curl -X GET "http://localhost:3000/posts/" | jq

上記の画像の様にidが2番目のデータが削除ができていたら、DELETEリクエストが成功した事になります。以上で、「curlコマンドで CRUD操作をしよう」のトピックを終了します。

まとめ：JSON Serverでcurlコマンドを実行しよう

今回は、

  • 前半
    →環境構築
  • 後半
    →curlでCRUD操作

という流れでした。

前半の環境構築はとても難しかったと思いますが、ターミナルでコマンドを実行する良い練習になったと思います。後半は、curlコマンドを実行して、CRUD操作を行いました。オプションなどの設定や、見慣れないHTTPメソッドなど、初見では、理解しづらい部分が多かったと思います。しかし、継続して学習を続けていけば、いつの日にか「わからない↓↓」から「わかる↑↑」に変わる瞬間が訪れると思います。その日まで、継続して学習に取組んでいきましょう。

以上、kazutoでした。

HOME >  Javascript >  JSON Serverでcurlコマンドを実行しよう