みなさん、こんにちは！
いよいよ9月も終盤ですね。最近急に涼しくなってきましたね。
秋服はおしゃれなものが多く、気分が上がりますよね（笑）
前回は、擬似APIを使ってWebサービスがデータをやり取りをする仕組みを学びました。ボタンを押すとデータが返ってくる。これは、私たちが普段使っているWebサービス（SNSやECサイト）の裏側で常に起こっていることです。
では、その「データを返す側」の仕組みはどうなっているのでしょうか？
今回の記事では、JavaScriptで動くサーバーサイドの実行環境、Node.jsを使って、APIを作ってみます。
これまでの学習と組み合わせることで、「Webサービスの仕組み」の全体が理解できると思います。
記事のゴール
- Node.jsの役割と、それがなぜサーバーサイドで使われるのかを理解する
- Expressというフレームワークを使って、簡単なサーバーを構築する
- Reactアプリからのリクエストを受け付け、データを返すシンプルなAPIを作成する
1. はじめに：なぜNode.jsを学ぶのか？
JavaScriptは「Webブラウザ」の中でしか動かせませんでした。しかし、Node.jsという技術が登場したことで、Webブラウザの外、つまりサーバーでもJavaScriptを動かせるようになりました。
- 言語の統一: フロントエンド（React）もバックエンドもJavaScriptで書けるため、学習コストが下がる。
- 高速な処理: Node.jsは高速に動作するため、大規模なWebサービスにも〇。
- 豊富なライブラリ: npmというパッケージ管理ツールを通じて、様々な便利な機能を簡単に使えるように。
サーバーとクライアント
Reactで作ったWebページはクライアント（Webブラウザ）と呼ばれ、ユーザーの端末上で動きます。一方で、Node.jsで作るAPIはサーバーと呼ばれ、インターネット上のどこかに設置されたコンピュータで動きます。
両者は「リクエスト」と「レスポンス」で通信し、データをやり取りします。
2. 開発環境の準備：Node.jsとnpm
Node.jsは、前回のReactアプリの環境構築でインストール済みなので、改めて準備する必要はありません。
2.1. Expressのインストール
今回は、サーバー構築を簡単にしてくれるExpressというフレームワークを使います。まずは、新しいフォルダを作り、ターミナルで以下のコマンドを実行してください。
mkdir my-api-server
cd my-api-server
npm init -y
npm install express
解説
-
mkdir my-api-server:my-api-serverという新しいフォルダを作ります。 -
cd my-api-server: 作ったフォルダに移動します。 -
npm init -y: プロジェクトの設定ファイルpackage.jsonを自動で作成します。 -
npm install express:expressというライブラリをインストールします。
2.2. サーバーの作成
my-api-serverフォルダの中に、server.jsというファイルを作成し、以下のコードを貼り付けてください。
// server.js
const express = require('express');
const app = express();
const port = 3000;
// /api/hello というパスへのリクエストを待ち受けます
app.get('/api/hello', (req, res) => {
// レスポンスとしてJSON形式のデータを返します
res.json({ message: 'Hello from Node.js API!' });
});
// サーバーを起動します
app.listen(port, () => {
console.log(`サーバーが http://localhost:${port} で起動しました`);
});
このコードは、3000番ポートでサーバーを起動し、/api/helloというパスへのアクセスがあったら、{ message: 'Hello from Node.js API!' }というJSONデータを返すシンプルなコードです。
3. 自分で作ったAPIを動かしてみよう！
それでは、ターミナルで以下のコマンドを実行してサーバーを起動します。
node server.js
サーバーが http://localhost:3000 で起動しましたというメッセージが表示されたら成功です。
ブラウザを開いて、アドレスバーにhttp://localhost:3000/api/helloと入力し、アクセスしてみましょう。
{"message":"Hello from Node.js API!"}というテキストが表示されましたか？
これで、今回作成したNode.jsサーバーが正常に動いており、ブラウザからのリクエストに応じてデータを返したことが確認できました！
4. まとめと次のステップ
今回は、Node.jsとExpressを使って、シンプルなオリジナルAPIを作成しました。
- Node.js: JavaScriptをサーバーで動かすための実行環境
- Express: サーバー構築を簡単にしてくれるフレームワーク
- API: クライアントとサーバーがデータをやり取りするための窓口
これで、Webサービスが「クライアント（React）」と「サーバー（Node.js）」という2つの役割で動いていることが理解できたと思います。
次回は、いよいよ「ReactとNode.jsを連携させる方法」を学びます。
これで、あなたはWebサービスの全体像を完全に理解し、より複雑なアプリケーションを作れるようになります。
今回もお疲れ様でした！次回も頑張ってこー！