サーバーを立てる
Expressで最初のサーバーを立ち上げ、Hello World を返します。
このレッスンで作るもの
Expressを使って最初のAPIサーバーを立ち上げます。ブラウザからアクセスすると Hello World と表示される状態を作ります。
Step 1: Expressサーバーを作成する
src/index.ts を以下の内容に書き換えてください。
import express from 'express';
const app = express();
const PORT = 3000;
app.get('/', (req, res) => {
res.send('Hello World');
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});コードの解説
1行ずつ見ていきましょう。
Express を読み込みます。
import express from 'express';Expressアプリケーションを作成します。この app に対してルート（）を設定していきます。
const app = express();express()とは
このexpressを利用するために必要な宣言。
express公式
ではCreates an Express application. The express() function is a top-level function exported by the express module.と記載されています。
サーバーが待ち受けるポート番号を指定します。3000 は開発でよく使われる番号です。
const PORT = 3000;GET / にアクセスされたときの処理を定義します。
app.get('/', (req, res) => {
res.send('Hello World');
});| 引数 | 説明 |
|---|---|
| req（request） | クライアントからの情報 |
| res（response） | クライアントに返す |
res.send() で文字列をとして返します。
サーバーが接続を受けられる状態にします。
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});指定したポート3000でサーバーを起動します。
起動が完了するとが実行され、コンソールにURLが表示されます。
Step 2: サーバーを起動する
で開発サーバーを起動します。
npm run dev以下のように表示されれば成功です。
Server is running on http://localhost:3000
Step 3: ブラウザで確認する
ブラウザを開いて、以下のURLにアクセスしてください。
http://localhost:3000画面に「Hello World」と表示されれば成功です。
localhost とは？
localhost は「自分自身のPC」を指す特別なアドレスです。外部からはアクセスできません。
:3000 はポート番号を意味します。1台のPCで複数のアプリが通信を区別できるように、それぞれ異なるポート番号を使います。例えば、別のアプリがすでにポート 3000 を使っている場合は、http://localhost:3001 のように別の番号を指定して起動します。
Step 4: JSONを返す
APIは通常、文字列ではなく 形式でデータを返します。res.send() を res.json() に変更してみましょう。
import express from 'express';
const app = express();
const PORT = 3000;
app.get('/', (req, res) => {
res.json({ message: 'Hello World' });
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});ブラウザをリロードすると、以下のようなJSONが表示されるはずです。
{"message":"Hello World"}JSON（JavaScript Object Notation） はデータのやり取りに使われる標準的な形式です。
コース1の localStorage でも JSON.stringify() や JSON.parse() を使いましたね。APIのもJSON形式が主流です。
Step 5: JSONのパースを有効にする
これから POST でクライアントからJSONデータを受け取る場面が出てきます。Expressがリクエストボディに含まれるJSONを解析できるように、ミドルウェアを追加しておきます。
import express from 'express';
const app = express();
app.use(express.json()); //←追加
const PORT = 3000;
app.get('/', (req, res) => {
res.json({ message: 'Hello World' });
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});app.use() は ミドルウェア を登録するです。ミドルウェアとは、との間に挟まる処理のことです。
express.json() は、リクエストボディのJSONを自動的にパース（解析）して req.body に格納してくれます。
例えば、クライアントが以下のJSONを送った場合：
{ "name": "田中" }req.body.name で "田中" を取得できるようになります。
現在のフォルダ構造
- index.ts← 作成するファイル
- package.json
- package-lock.json
- tsconfig.json
次のステップ
サーバーが起動し、JSONも返せるようになりました。
次のレッスンでは、勤怠管理のデータ構造を定義して、勤務記録の一覧を返すAPIを作ります。