✨ Web開発の第一歩！Express.jsでHello Worldから学ぶ

# Express.jsで簡単＆高速なWebサーバを構築しよう 🚀

こんにちは、現役エンジニアの@YushiYamamotoです。  
今回は、Node.jsの代表的なWebフレームワークである[Express.js](https://expressjs.com/)について、エンジニア初心者やプログラマーの方にも分かりやすく、実践的なコード例や図を交えて解説していきます。Express.jsは、そのシンプルさと柔軟性から、数多くのプロジェクトで採用され、開発効率やパフォーマンス向上に寄与しています。

![Express.js.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/4355070d-8756-45ae-919e-bb8d591a3591.png)

---

## Express.jsとは？ 🤔

Express.jsは、Node.js上で動作するシンプルで柔軟なWebアプリケーションフレームワークです。  
主な特徴としては以下が挙げられます：

- **シンプルなAPI**：わずかなコードでWebサーバを構築可能
- **豊富なミドルウェア**：認証、ログ、セキュリティなどの機能を簡単に追加できる
- **ルーティング機能**：HTTPメソッドごとのルーティングが直感的に実装できる
- **拡張性**：多数のプラグインやサードパーティのライブラリとシームレスに連携

---

## Express.jsの特徴 ✨

Express.jsの主な魅力を箇条書きで整理すると：

- **高速なプロトタイピング**  
  Node.jsの非同期処理を活かし、シンプルなコードで素早くWebアプリを構築可能です。
- **ミドルウェア機構**  
  ルーティング前後に処理を挟むことで、ログ記録やエラーハンドリングを柔軟に実装できます。
- **コミュニティが充実**  
  豊富なドキュメントやライブラリが公開されており、問題解決や機能追加がしやすいです。

---

## プロジェクトのセットアップ 🛠️

Express.jsのプロジェクトは、以下の手順で簡単に始められます。まずは、プロジェクトのディレクトリを作成して初期化しましょう。

1. **プロジェクトフォルダの作成と初期化**

```sh
mkdir my-express-app
cd my-express-app
npm init -y
```

2. **Express.jsのインストール**

```sh
npm install express
```

これで、Express.jsを使った開発環境の準備は完了です！

---

## コード例：Hello World サーバーの実装 🌐

まずは、Express.jsを使った基本的な「Hello World」サーバーを作成してみます。

```js
// index.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

// ルートへのGETリクエストに対してレスポンスを返す
app.get('/', (req, res) => {
  res.send('Hello, Express.js!');
});

// サーバー起動
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});
```

### 実行方法

1. ターミナルで `node index.js` を実行してサーバーを起動します。

```sh
node index.js
```

2. ブラウザで `http://localhost:3000` にアクセスすると、「Hello, Express.js!」と表示されます。😊

---

## ミドルウェアの活用例 🔄

Express.jsでは、ミドルウェアを利用することで、リクエストからレスポンスまでの処理の各段階にカスタムロジックを挿入できます。以下は、リクエストのログを記録するミドルウェアの例です。

```js
// ログ出力用ミドルウェア
app.use((req, res, next) => {
  console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
  next(); // 次のミドルウェアまたはルートに制御を渡す
});
```

これにより、サーバーに対する全てのリクエストがタイムスタンプ付きでログに記録され、デバッグや監視に役立ちます。

---

## ルーティングの基本 📍

Express.jsの強力なルーティング機能を使えば、異なるHTTPメソッドやパスに応じた処理を簡単に実装できます。下記は、静的なページと動的なパラメーターを扱う例です。

```js
// 静的なルート
app.get('/about', (req, res) => {
  res.send('About Page');
});

// ダイナミックルート（パラメータ）
app.get('/user/:id', (req, res) => {
  const userId = req.params.id;
  res.send(`User ID: ${userId}`);
});
```

- `/about` にアクセスすると「About Page」と表示  
- `/user/123` にアクセスすると「User ID: 123」と表示されます

---

## Express.jsの流れを図解で理解しよう 📊

下記のシンプルなフローチャートは、Express.jsにおけるリクエスト処理の基本的な流れを示しています。

```mermaid
flowchart TD
    A[クライアントからのリクエスト]
    B[ミドルウェア処理]
    C[ルーティング]
    D[レスポンス生成]
    E[クライアントへ送信]
    A --> B
    B --> C
    C --> D
    D --> E
```

- **A**: クライアントがリクエストを送信  
- **B**: ミドルウェアでリクエストを前処理（例：ログ記録、認証など）  
- **C**: ルーティングによって該当するハンドラーに振り分け  
- **D**: レスポンスを生成し  
- **E**: クライアントへ結果を返す

この流れを把握することで、Express.jsの内部処理がより具体的に理解できるでしょう。

---

## まとめ 🎉

Express.jsは、そのシンプルで柔軟な設計と豊富なミドルウェアによって、迅速なWebサーバ構築を可能にする強力なフレームワークです。今回の記事では、以下について解説しました：

- Express.jsの基本概念と特徴
- プロジェクトのセットアップと実際の「Hello World」サーバーの実装例
- ミドルウェアとルーティングの活用方法
- リクエスト処理フローの図解

これからWebアプリケーション開発を始める方にも、Express.jsは非常に扱いやすく、学びやすいフレームワークです。さらに詳しく知りたい場合は、[Express公式サイト](https://expressjs.com/)や公式ドキュメントを参考にしてみてください。

Happy Coding! 🚀😊

---
## **💖 ご支援いただけませんか？**

![スクリーンショット 2025-01-31 7.51.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/f9d94b4d-dbd3-ab70-6b2b-dfc289cda562.png)


このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！

---

### **暗号資産による寄付**
以下のウォレットアドレスをご利用ください。**重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！** 送金時には、**絶対に**使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を**必ず**正しく選択してください。

---

<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="Ethereum Logo" width="20">

**Ethereum (ETH)**  （ネットワーク: ERC-20）

```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
```
<img src="https://cryptologos.cc/logos/binance-coin-bnb-logo.png" alt="BNB Logo" width="20">

**BNB Chain (BNB)**  （ネットワーク: BEP-20）
```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
```
<img src="https://cryptologos.cc/logos/polygon-matic-logo.png" alt="Polygon Logo" width="20">

**Polygon (MATIC)**   （ネットワーク: Polygon）

```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174  
```
<img src="https://cryptologos.cc/logos/avalanche-avax-logo.png" alt="Avalanche Logo" width="20">

**Avalanche (AVAX)**    （ネットワーク: Avalanche C-Chain）

```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
```
<img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="Solana Logo" width="20">

**Solana (SOL)**  
```
EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f
```

<img src="https://cryptologos.cc/logos/stellar-xlm-logo.png" alt="Stellar Logo" width="20">

**Stellar (XLM)**    メモ: 必要に応じて入力してください。

```
GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO 
```

<img src="https://cryptologos.cc/logos/xrp-xrp-logo.png" alt="Ripple Logo" width="20"> 

**Ripple (XRP)**    タグ: 必要に応じて入力してください。

```
r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
```

<img src="https://cryptologos.cc/logos/cardano-ada-logo.png" alt="Cardano Logo" width="20">

**Cardano (ADA)**  

```
addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7
```

<img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="Dogecoin Logo" width="20">

**Dogecoin (DOGE)**  
```
DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H
```

---

### **資金用途**
寄付金は以下の目的で活用させていただきます：

1. サーバー維持費やデザインツール購入  
2. 学習活動（オンラインコース受講・書籍購入）  
3. 読者向け無料コンテンツ制作  

ご協力いただいた皆さまには心より感謝申し上げます！ 🙏

---

### **補足情報**
- **Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について**  
  上記4つのネットワークは**同じウォレットアドレス**（`0x5CDA2F68f59F641B00aD172475c3d5fC10321174`）を使用します。ただし、送金時には、**絶対に**使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を**必ず**正しく選択してください。

- USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、**送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。**

- 初回送金時には少額でテスト送金することをおすすめします。

---