JSONを返す無料APIを3分で作る方法

# JSONを返す無料APIを3分で作る方法

## はじめに

この記事の読書対象者は以下のようなエンジニアです。

* Ajaxで叩くAPIを用意してあげようとしている新人教育中の優しい先輩
* なんかのサンプルアプリを作っているときのモックとして

## 既存データセット

### ステータスコード等を返すAPI

こちらのサイトがほぼいい感じにAPIを良いしてくださってます。

https://httpbin.org/

ステータスコード200のレスポンスがほしいときは以下

```bash
curl -X GET "https://httpbin.org/status/200" -H "accept: text/plain"

 access-control-allow-credentials: true 
 access-control-allow-origin: * 
 content-length: 0 
 content-type: text/html; charset=utf-8 
 date: Sat, 16 Dec 2023 13:30:14 GMT 
 server: gunicorn/19.9.0 
```

画像がほしいときは

```bash
curl https://httpbin.org/image/jpeg

// jpeg画像が返ってくる
```

自分のIP調べたいときは

```bash
$ curl https://httpbin.org/ip

{
  "origin": "60.11.111.11"
}
```


### お天気API

https://open-meteo.com/

```bash
$ curl "https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&current=temperature_2m,wind_speed_10m&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m"

{
  "current": {
    "time": "2022-01-01T15:00"
    "temperature_2m": 2.4,
    "wind_speed_10m": 11.9,
  },
  "hourly": {
    "time": ["2022-07-01T00:00","2022-07-01T01:00", ...]
    "wind_speed_10m": [3.16,3.02,3.3,3.14,3.2,2.95, ...],
    "temperature_2m": [13.7,13.3,12.8,12.3,11.8, ...],
    "relative_humidity_2m": [82,83,86,85,88,88,84,76, ...],
  }
}
```

### jsonplaceholder

https://jsonplaceholder.typicode.com/

すでにいくつかのデータセットが用意されているので使いやすい

```js
fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json))

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}
```


## API作成

* 実際に通信する
  * Google Apps Script (GAS)で作成する
  * MyJson (既存のWebサービス)でJsonを登録する
* ローカルサーバーを立てる
  * json-server（npmで導入する）

### Google Apps Script(GAS)を使う

以下のコードをGASに貼り付けて、「公開」「ウェブアプリケーションとして導入」を押して発行されたURLを叩くと文字列のJSONが返ってくる。

```js
function doGet(e) {
  return ContentService.createTextOutput(JSON.stringify({'name': 'Qiita'}))
    .setMimeType(ContentService.MimeType.JSON);
}
```

![スクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/112929/24a66c74-687a-b18a-017f-5aa59d0e73b6.jpeg)

参考： <https://developers.google.com/apps-script/guides/content#serving_json_from_scripts>

GetメソッドにtokenをつけてたらJsonを返すとかそういう処理もできるのでオススメ！

### localに[json-server](https://github.com/typicode/json-server)を立てて使う

Node.js等を使える人はjson-serverがおすすめみたいです！

参考：[JSON Serverを使って手っ取り早くWebAPIのモックアップを作る](https://qiita.com/futoase/items/2859a60c8b240da70572)

```
npm install -g json-server
```

npmインストールとか必要だけどAPIモックにするのにはすごく便利なのでオススメ！

### API GatewayのMockを使う

awsサービス使っている方は楽

### Qiita

QiitaのAPIを使う。認証してないと1時間に60回という制限付きだが普通に使えると思う。
この記事のlikeをしてくれたユーザー一覧を取得する場合。

.httpファイルでREST clientアプリから取得してみるなら以下のようになる


```terminal
$ touch test.http
$ vim test.http

# GET /api/v2/items/:item_id/likes
# https://qiita.com/api/v2/docs#get-apiv2itemsitem_idlikes
# https://qiita.com/ykhirao/items/a41322085ab55837b88e

GET https://qiita.com/api/v2/items/a41322085ab55837b88e/likes
```

```js
HTTP/1.1 200 OK
Date: Mon, 11 Dec 2023 05:48:50 GMT
Content-Type: application/json; charset=utf-8
Transfer-Encoding: chunked
Connection: close
Server: nginx
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Download-Options: noopen
X-Permitted-Cross-Domain-Policies: none
Referrer-Policy: strict-origin-when-cross-origin
Link: <https://qiita.com/api/v2/items/a41322085ab55837b88e/likes?page=1>; rel="first", <https://qiita.com/api/v2/items/a41322085ab55837b88e/likes?page=2>; rel="next", <https://qiita.com/api/v2/items/a41322085ab55837b88e/likes?page=32>; rel="last"
Total-Count: 634
ETag: W/"df875ddadb9e3b1357f1c26cae6e8c28"
Cache-Control: max-age=0, private, must-revalidate
Rate-Limit: 60
Rate-Remaining: 59
Rate-Reset: 1702277330
Vary: Origin
X-Request-Id: fcce504f-356b-4d0a-bbb7-db2be19d2c84
X-Runtime: 0.732132
Strict-Transport-Security: max-age=2592000

[
  {
    "created_at": "2023-02-08T03:54:58+09:00",
    "user": {
      "description": "勉強中",
      "facebook_id": "",
      "followees_count": 1,
      "followers_count": 1,
      "github_login_name": null,
      "id": "user_name",
      "items_count": 1,
      "linkedin_id": "",
      "location": "",
      "name": "",
      "organization": "",
      "permanent_id": 1,
      "profile_image_url": "image_url",
      "team_only": false,
      "twitter_screen_name": null,
      "website_url": "your_site"
    }
  }
]
```

### その他

Gistを使ってもいけた。

```js
var url = 'https://api.github.com/gists/3137d994d72040d00a84f422349757d4';

fetch( url )
.then( function( data ) {
  return data.json();
})
.then( function( json ) {
  console.log( json.files['sample.json'].content );
})
```

```shell
# json
curl https://api.github.com/gists/3137d994d72040d00a84f422349757d4
```

お手軽ではないです。

## 終わりに

AjaxとかAPIとかよくわかってなかった時期がありました。それくらいのレベルの人に教えるときに先輩エンジニアが「API作っといたのでこれ自由に叩いていいよ」って感じの世界素敵ですね！！

それでは素敵なAPIライフを！！


## 残念ながらなくなったサービス

### Json okibaというWebサービスを使う

https://json.okiba.me/