こんにちは！なかむらです。
普段はChrome拡張機能の「入力速いもん」フロント側の開発を行っています。
タスクでデータの流れを見る際にAPIに渡しているデータをみることが時々あるのですが、正直APIっていまいちピンと来ていませんでした。
なので、今回はまず「APIってなに？」からすごーく簡単な「WebAPIを作ってみる！」ところまでやっていこうと思います！
それでは始めてみましょう！
そもそもAPIってなに？
APIとは「アプリケーションプログラミングインターフェース」の略で、「便利機能を外部向けに提供してくれるもの」です！
例えばLINE BOTはご存知ですか？
LINE BOT とはユーザーがLINE上で行う発言に対し自動でテキストメッセージが送ります。これは「Messaging API」を使用することで、個人や企業も一から開発することなく、LINE BOTを作ることができます。例えばこんな感じに↓
意外と渋い食の好みを知ることができました。
AIりんなはMessageAPIに加えてAIを使用しているため、このような会話をすることができます。そしてそのデータ通信のやりとりに使われるのがHTTP通信です。
HTTP通信
APIはHTTP通信を使ってデータのやり取りをしています。
HTTP通信とはインターネット上でデータをやり取りするためのルールで、これに従わないとデータのやり取りが正常に行われない可能性があります。
情報を送る「POSTメソッド」と、情報を取得する「GETメソッド」などがあります。
WebAPIを作るにはどうしたらいいの？
テーマ決め
まずはAPIのテーマと機能を決めます。
私は美味しいご飯を食べている時が一番幸せなので、テーマは「美味しかったご飯の記録サービス」とします。 機能は「美味しかったご飯の記録」と「記録した美味しかったご飯の取得」の2つです。
URLの設定
APIの機能ごとにURLのエンドポイントを作成するのが一般的なアプローチです。
エンドポイントとはざっくり言うと通信のやりとりをする接続点のことです。 今回はエンドポイントをyummy_logとします。
http://www.example.jp/<u>yummy_log</u>
レスポンスデータの設計
HTTP通信でやりとりするレスポンスデータの形を決めていきます。
レスポンスデータには、APIに「送る or 取得する」 データ項目の一覧が書かれています。
今回は食べたもの、お店の名前、感想をデータ項目にしてみます。 通信成功のデータと、失敗した時に送るデータを決めていきます。
成功
{
"ok": true,
"yummy_log": {
"menu": "なす味噌と焼魚の定食",
"restaurant": "やよい軒",
"text": "ご飯がすすむ"
}
}
失敗
{
"ok": false,
"error": "menu, restaurant, text is required"
}
実際に作ってみよう！
STEP1 : POSTMAN インストール
POSTMANとは
PostmanはPostman社が提供を行うAPIプラットフォームです。 実装されているAPIテスト機能を用いてリクエストの内容やトークンを設定し、APIに送信することでレスポンスの確認などを行えます。
ブラウザ版もありますが、デスクトップアプリでないと、localhostにPOSTできないので、デスクトップアプリをインストールします！
Download Postman | Get Started for Free
Windows手順: Postmanをインストールする #Postman - Qiita
Mac手順: Homebrew CaskでWeb APIのテストに便利なPostmanをインストールする #homebrew - Qiita
STEP2 : 環境構築
対象ディレクトリに移動
// ディレクトリ作成 mkdir ~/Documents/yummy-log // ディレクトリ移動 cd ~/Documents/yummy-log // VS Codeをカレントディレクトリで開く code .
codeコマンド使えなかった際：ターミナルからVScodeを起動させる方法 | logsuke
設定ファイル作成
npm init
いろいろと設定について聞かれますが、デフォルトのままでいいのでEnterを連打します。 設定ファイルのpackage.jsonの出来上がりです！
メインファイル作成
メインファイルとはプログラムを実行した際に最初に読み込まれ、実行されるファイルのことです。
package.jsonの下の記載で、メインファイルがindex.jsということをプログラムに伝えてくれます。
"main": "index.js"
touch index.js
必要なツールのインストール
npm installでツールをインストールすることができます。
expressとはAPIを簡単に作れる機能を持つフレームワークです。
これをインストールすることで、HTTPメソッドを簡単に書くことができます！
npm install express --save
今はまだexpressをインストールしただけなので、メインファイルからexpressを使用できるようにします。
index.js内
// 現在のファイルにインポート const express = require ('express'); // インポートしたexpress(関数)を実行して、インスタンスを作成 const app = express() // アクセスするポート番号を指定 const port = 3000;
派生知識：インストールとインポートの違い
インストール npm install
インストールは、Node.jsのプロジェクトで外部のパッケージやライブラリをダウンロードしてプロジェクトのローカル環境に追加するプロセスを指します。
インポート require('module')
インポートは、インストールしたパッケージやモジュールを実際にファイル内で使用するために、そのファイルに読み込む（取り込む）プロセスを指します。
STEP3 : サーバ起動
app.listenで指定されたポートでHTTPサーバーを起動し、リクエストを待ち受けます。 第一引数にポート番号、第二引数にサーバー起動時に実行されるコールバック関数を書きます。
index.js内
app.listen(port, () => { console.log(`Server is running on port ${port}`); });
index.js実行
node index.js
コマンドプロンプトにServer is running on port 3000と表示されれば成功です！
※node index.jsはファイル更新してもに自動で再読み込みする機能がないので、更新したら都度手動で実行する必要があります。
意外と忘れがちなので、コードは書いたのに期待している動作をしないときはここを疑ってみてください〜
STEP4 : POSTMANでデータ送信
データの送信をしていきます！
まず、JSONデータを扱えるようにするため、express.json()をアプリケーションに追加します。
index.js内
app.use (express.json())
app.postの第一引数にPOST先のエンドポイント、第二引数にPOSTが実行された時のコールバック関数を書きます。
関数内のresはHTTPレスポンス、reqはレスポンスのことです。
ここではpostできたら、"ok" : trueを返します。
app.post('/yummy_log', (req, res) => { res.json({ "ok" : true }) })
実際にPOSTMANで処理がうまくできているか確認していきます！
node index.jsして、ファイルを実行させます。
Bodyでデータ形式raw, jsonで指定して、Send します。
"ok" : trueが出てきたら成功です！
送信したリクエストデータを表示
req.bodyには送信したリクエストボディ(中身)が入っています。
yummyLog変数に代入して扱いやすくします。
app.post('/yummy_log', (req, res ) => { const yummyLog = req.body; res.json({ "ok" : true, "yummylog" : yummyLog }) })
データ送信 失敗パターン
データ送信を失敗したパターンも書いていきます。
送信したプロパティ3つのどれかが欠けていたら失敗とします。
const yummyLog = req.body;の後に追加します。
if (!yummyLog.menu || !yummyLog.restaurant || !yummyLog.text) {
return res.json({
"ok" : false,
"error" : "menu, restaurant, text is required"
})
}
これで成功・失敗データの送信ができました！
STEP5 : POSTMANでデータ取得
データの取得をしていきます！
GETリクエストに対してサーバーがどのように応答するかを定義します。
まず、app.postメソッド内で定義していた変数yummyLogをapp.postメソッド外に移動させます。
app.postで代入したいので、letに変え、初期値を空にします。
let yummyLog = {};
app.getを書いていきます。
app.post同様に、第一引数にGETリクエスト元のエンドポイント、第二引数にGETリクエストがきた時のコールバック関数を書きます。
app.get('/yummy_log', (req, res) => { res.json({ "ok": true, "yummylog" : [ yummyLog ] }) })
実行してみると、postをしていないため、yummyLogには初期値{}のままです。
では、postしてからgetしてみます。 yummyLog変数に値が入りデータが取得できました！
まとめ
記事を書いてみて、いままで曖昧のままにしていたAPIの基本的な動きがわかるようになりました！
また、POSTMANも触ったことで実務でAPIを見る時に検証する方法もわかるようになって良かったです！
皆さんのお役にたてたら幸いです！
弊社はエンジニアを募集しています！
株式会社iimonの中途採用/求人 | 転職サイトGreen(グリーン)
コード全体像
// express インポート const express = require('express'); // expressインスタンス作成 const app = express(); // ポート設定 const port = 3000; let yummyLog = {}; // JSONデータ使用 app.use (express.json()) // HTTPサーバ起動 app.listen(port, () => { console.log(`Server is running on port ${port}`); }) // データ送信 app.post('/yummy_log', (req, res ) => { yummyLog = req.body; // 失敗パターン if (!yummyLog.menu || !yummyLog.restaurant || !yummyLog.text) { return res.json({ "ok" : false, "error" : "menu, restaurant, text is required" }) } // 成功パターン res.json({ "ok" : true, "yummylog" : yummyLog }) }) // データ取得 app.get('/yummy_log', (req, res) => { res.json({ "ok": true, "yummylog" : [ yummyLog ] }) })
