APIのしくみを、
体験しよう。

01 / APIとは

APIとは、
Application Programming Interfaceです。

名前を三つの言葉に分けると、役割が見えてきます。

つまり、プログラムのデータや機能をやり取りする窓口です。

ここではインターネット上にある窓口へアクセスして、機能やデータを使えるようにするWeb APIを学びます。

03 / JSONで中身を見る

届いたのは、
完成した画面ではなくデータ。

{
  "month": 5,
  "id": "05-01",
  "message": "がんばる日と休む日、どちらも大切にすると調子が整いそうです。",
  "image": "images/fortune-05-01.png",
  "alt": "ラベンダー色のクッションを抱くマスコット"
}

このページではfortune.jsonを取得しています。Node.jsでサーバーを起動する次の章では、同じようなJSONを「窓口」に応じて返す方法を見ます。

05 / APIを作る実際

使うのは1クリック。
作るには、準備がいる。

まずは制作の流れを見てください。今、すべてを理解したりインストールしたりする必要はありません。「考えることがいくつもある」と感じられれば、この段階の目的は達成です。

1. 01

   Node.jsをインストール

   Node.jsはブラウザの外でJavaScriptを動かす実行環境。公式サイトでOSに合うLTS版を選びます。Windowsならインストーラーを使い、完了後にターミナルを開き直して確認します。

   Node.js公式ダウンロード ↗

   node --version

   数字のバージョンが表示されれば確認完了。インストール時にOSの確認が出る場合があります。サンプルの起動自体に管理者権限は必要ありません。
2. 02

   窓口と、返すJSONを書く

   作業フォルダにserver.jsを保存します。下のサンプルはNode.jsの標準機能だけで動き、追加ライブラリの導入は不要です。

   動くサンプルをダウンロード

   const http = require('node:http');
   
   const server = http.createServer((req, res) => {
     res.setHeader('Content-Type', 'application/json; charset=utf-8');
     if (req.method === 'GET' && req.url === '/api/hello') {
       res.end(JSON.stringify({ message: 'こんにちは、API！' }));
       return;
     }
     res.statusCode = 404;
     res.end(JSON.stringify({ error: '窓口が見つかりません' }));
   });
   
   server.listen(3000, '127.0.0.1', () => {
     console.log('http://localhost:3000/api/hello');
   });

   URLで処理を分ける、データをJSONにする、見つからない窓口に404を返す。「ただ文字を表示する」までにも、ルールを決めます。

3. 03

   サーバーを立てる

   server.jsを保存したフォルダでターミナルを開き、次を実行します。

   node server.js

   URLが表示されたら起動中です。ターミナルは開いたままにします。終了はCtrl + C。3000番ポートが使用中なら、競合を解消するか別の番号に変更します。

4. 04

   エンドポイントに接続する

   同じPCのブラウザのアドレス欄に、次を貼り付けます。

   http://localhost:3000/api/hello

   返ってくるJSON：

   { "message": "こんにちは、API！" }

   サーバーを止めれば接続できなくなります。ファイルが存在するだけでは、APIは応答しません。この例は自分のPCだけで接続できる設定で、インターネットへは公開しません。