Zenn
😎

Node.js と Express を使ってサーバーを立ち上げてみる

2024/07/29に公開
Node.js
プログラミング初心者
tech

Node.jsの基本を学んだので、次のステップとしてExpressフレームワークを使ったサーバー構築に挑戦しましす。

Expressとは？

Expressは、Node.jsのWebアプリケーションフレームワークで、最小限で柔軟なNode.jsのWebアプリケーションフレームワークでルーティング、ミドルウェア、テンプレートエンジンなどの機能を提供しています。フレームワークなので、要は Node.jsをより効率的に扱えるものという理解です。

インストール方法

プロジェクトディレクトリで以下のコマンドを実行します：

npm install express

サーバーの構築

以下のコードで、基本的なExpressサーバーを構築できます：

// Express のセットアップ
const express = require("express");
const app = express();
// ポート番号はご自身の好きな番号を割り当ててください
const port = 8001;

// publicディレクトリ内のファイルを静的ファイルとして提供
app.use(express.static("public"));

// POSTリクエストのボディを解析するためのミドルウェアを設定
app.use(express.urlencoded({ extended: true }));

// POSTリクエストの処理
app.post("/", (req, res) => {
  const name = req.body.name;
  res.send(`Hello ${name}!`);
  console.log("/へPOSTアクセスがありました");
});

// GETリクエストの処理
app.get("/", (req, res) => {
  console.log("/へGETアクセスがありました");
});

// 画像ファイルへのアクセス処理 (express.static("public")で以下は不要になる)
app.get("/image/:file", (req, res) => {
  console.log(`/image/${req.params.file}へアクセスがありました`);
});

// HTTPサーバーを起動
app.listen(port, () => {
  console.log(`サーバーが http://localhost:${port} で起動しました`);
});

コードの説明

  1. express.static("public")：

    • publicディレクトリ内のファイルを静的ファイルとして自動的に提供します。
    • これにより、HTML、CSS、画像ファイルなどへの直接アクセスが可能になります。
    • 例えば、app.get("/image/:file", (req, res) => { ... } のような個別のルートハンドラは不要になります。
    • 代わりに、public/image/ディレクトリ内の画像ファイルに直接アクセスできるようになります。
    • 同様に、app.get("/", (req, res) => { ... } でindex.htmlを明示的に送信する必要もなくなり、public/index.htmlが自動的にルートURL("/")で提供されます。

  2. express.urlencoded({ extended: true })：

    • POSTリクエストのボディを解析するミドルウェアを設定します。
    • フォームデータやJSONデータの取得を容易にします。

  3. ルートハンドラ：

    • app.post("/")とapp.get("/")で、それぞれPOSTとGETリクエストに対する処理を定義しています。
    • /image/:fileのルートでは、動的なパラメータを使用して画像ファイルへのアクセスを処理しています。

HTMLファイルの作成

public/index.htmlファイルを以下のように作成します：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Express サーバーの例</title>
  </head>
  <body>
    <h1>Hello! Node.js with Express</h1>
    <p>これは public/index.html です</p>

    <ul>
      <li><img src="/image/image1.png" width="150" alt="画像1" /></li>
      <li><img src="/image/image2.png" width="150" alt="画像2" /></li>
      <li><img src="/image/image3.png" width="150" alt="画像3" /></li>
    </ul>

    <form action="http://localhost:8001/" method="POST">
      <input type="text" name="name" placeholder="あなたの名前" />
      <button type="submit">送信</button>
    </form>
  </body>
</html>

JSONデータの返却

APIとしてJSONデータを返す場合は、以下のようなルートを追加できます：

app.get("/api/data", (req, res) => {
  const data = {
    message: "Hello World",
    date: new Date().toISOString()
  };
  res.json(data);
});

まとめ

Expressを使うことで、Node.jsでのサーバー構築がより簡単になりました。静的ファイルの提供、ルーティング、POSTデータの処理など、多くの機能を少ないコードで実現できます。

この基本的なセットアップを元に、データベース接続、認証機能の追加、より複雑なルーティングの実装など、アプリケーションを拡張していくことができます。

Discussion