クリーム色の背景、色付き表示、高コントラスト、大きな文字のほうが読みやすいですか?配色と文字を選ぶと、すべてのページに一度で反映されます。

無料レッスン

APIでデータを読み書きする

このレッスンのあとで: APIでデータを読み書きする流れと、JSONの返事の読み方が分かる。

45分のレッスンコマンド2件PostgreSQL と PostgREST のラボ:ブラウザーで学ぶデータベースと REST API

アプリはデータをどう受け取る?

天気アプリは、天気の数字を自分で持っていません。サーバーに聞いて、その数字を画面に並べているだけです。

この「聞く窓口」を API と言います。APIの返事の形がわかると、自分のアプリでも他人のデータが使えます。

このレッスンのゴール

メモ

APIでデータを読み書きする流れと、JSONの返事の読み方が分かる。

重要な言葉

ことばいみれい
APIプログラムがほかのプログラムにデータを頼む窓口
JSONデータを文字で表す形。名前と値の組を並べる{"name": "パン"}
GETデータを読み取るための頼み方
POST新しいデータを送って書き込むための頼み方
エンドポイントAPIの中の、ひとつの入口のアドレス/notes
本文リクエストやレスポンスに載せるデータの部分

学生が入力するセルは、このプレビューでは空白です。

APIはページではなくデータを返す

普通のURLは、人が読むページを返します。APIのURLは、プログラムが読むデータを返します。

このラボには、データベースの前にAPIが立っています。表がひとつ増えるたびに、その表の入口がAPIにできます。

APIが答えるか確かめる

コマンド
curl -s -o /dev/null -w '%{http_code}\n' http://api:3000/

ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。

返事の最初の部分を見る

コマンド
curl -s http://api:3000/ | head -c 20

ここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。

JSONは名前と値の組

JSON は、波かっこの中に「名前: 値」を並べます。値は、文字、数、真偽、リスト、さらに中の組のどれかです。

Python の辞書とリストにそっくりです。違いは、文字を必ずダブルクォートで囲むことです。

例:JSONとPythonの対応

JSONPython意味
{"name": "パン"}{"name": "パン"}名前と値の組(辞書)
[1, 2, 3][1, 2, 3]並んだ値(リスト)
true / falseTrue / False真偽
nullNone値が無い

学生が入力するセルは、このプレビューでは空白です。

頼み方には種類がある

リクエストの先頭には、頼み方が書かれています。読むときは GET、新しく作るときは POST、直すときは PATCH、消すときは DELETE です。

同じアドレスでも、頼み方で動きが変わります。

例:購買データの頼み方

やりたいこと頼み方アドレス
商品の一覧を見るGET/items
商品をひとつ足すPOST/items
値段を変えるPATCH/items?id=eq.3
商品を消すDELETE/items?id=eq.3

学生が入力するセルは、このプレビューでは空白です。

例:POSTでメモを一件足す

コード: bash
# これは例です。実行するのは、メモの表を作ったあとです。
curl -X POST http://api:3000/notes \
  -H 'Content-Type: application/json' \
  -d '{"title": "牛乳を買う"}'

よくある間違い

注意

JSON の文字を、Python のようにシングルクォートで囲んでしまう間違いです。JSON はダブルクォートだけで、ほかは読み込みに失敗します。

さらに挑戦:品切れを探す

names_in_stock を参考に、stock が 0 の商品の名前を返す names_sold_out を書いてみましょう。

自分のテスト用のリストで、品切れの名前だけが返ることを確かめます。

このラボとソースについて: PostgreSQL と PostgREST のラボ:ブラウザーで学ぶデータベースと REST API

授業で使いますか?このモジュールを学生に割り当てると、教員用ガイド、自動採点つきの課題、学生ごとのラボを使えます。