Node.jsとExpressの概要｜セットアップ手順を解説 | プログラミング入門～作って覚える～

この記事では、Node.jsとExpressを使用したウェブアプリケーション開発の基礎を学ぶことができます。開発環境のセットアップから、Expressプロジェクトの作成、起動手順を解説します。

Node.jsとExpressの概要
開発環境のセットアップ
Expressプロジェクト作成と起動手順
手動でのExpressプロジェクト作成と起動手順
1. アプリケーションコードの作成
2. アプリケーションの起動
まとめ

Node.jsとExpressの概要

Node.jsの概要
Node.jsは、サーバーサイドでJavaScriptを実行できるプラットフォームです。もともとブラウザ上で動作するJavaScriptを、サーバー側でも利用可能にしたことで、フロントエンドとバックエンドを同じ言語で統一できます。この統一により、効率的なWeb開発が可能です。また、ノンブロッキングI/O方式を採用しており、接続数が増加しても高いパフォーマンスを維持できます。

Expressフレームワーク
Expressは、Node.jsのために設計された軽量なWebアプリケーションフレームワークです。基本機能に特化しており、余計なものが付加されていないため、迅速なアプリケーション開発が可能です。また、ミドルウェアを活用することで柔軟な拡張性を持ち、さまざまな機能を容易に追加できます。

Node.jsとExpressを使用するメリット

高速開発: Expressは軽量でシンプルなため、迅速なプロトタイピングが可能です。
柔軟性と拡張性: ミドルウェアによって機能を簡単に追加でき、多様なプロジェクトに対応できます。
高いパフォーマンス: Node.jsの非同期処理により、大量アクセスを効率的にさばけます。

開発環境のセットアップ

Node.jsのインストールは以下のページを確認してください。

Node.jsインストール方法

Expressプロジェクト作成と起動手順

プロジェクトディレクトリの作成

コマンドプロンプトまたは、ターミナルを開きます。
任意のディレクトリ内でプロジェクトを作成して、プロジェクト内に移動します。
※my-express-app はフォルダ名なので任意で決めてください。

mkdir my-express-app
cd my-express-app

以後のコマンドは、プロジェクト内で実行してください。

Express Generatorのインストール

npm install express-generator

これにより、express-generatorがプロジェクトのdevDependenciesとしてインストールされます。

プロジェクトの生成

npx express-generator --view=ejs

このコマンドでExpressアプリケーションの基本構造が生成されます。
テンプレートエンジンとしてEJSを指定しています。

依存パッケージのインストール

npm install

生成されたpackage.jsonに基づいて必要な依存パッケージがインストールされます。

アプリケーションの起動

npm start

ブラウザでの確認
ブラウザを開き、http://localhost:3000 にアクセスします。

出力結果：

プロジェクト構造

生成されたプロジェクトは以下のような構造になります:

bin/: アプリケーション起動スクリプト
public/: 静的ファイル（CSS、画像など）
routes/: ルーティング定義
views/: テンプレートファイル
app.js: メインアプリケーションファイル
package.json: プロジェクト設定と依存関係

カスタマイズ

routes/ ディレクトリ内のファイルでルーティングを定義します。
views/ ディレクトリ内のEJSファイルでビューを作成します。
public/ ディレクトリに静的ファイルを配置します。

注意点

デフォルトでは開発モードで起動します。本番環境では適切な設定が必要です。
セキュリティ対策として、必要に応じてhelmetなどのミドルウェアを追加することをお勧めします。

この手順に従えば、基本的なExpressアプリケーションを素早く立ち上げることができます。プロジェクトの要件に応じて、さらなるカスタマイズや機能追加を行ってください。

サーバーの終了方法

コマンドプロンプト (Windows)

Ctrl + C
サーバーを起動したウィンドウで「Ctrl + C」を押す。
「ｙ」を入力して「Enter」を押します。

バッチ ジョブを終了しますか (Y/N)?

taskkill コマンド

taskkill /F /IM node.exe

すべてのNode.jsプロセスを強制終了。

特定のポートを使用しているプロセスを終了

netstat -ano | findstr :3000
taskkill /PID <プロセスID> /F

PowerShell (Windows)

Ctrl + C
サーバーを起動したウィンドウでCtrl + Cを押す。

Stop-Process コマンド

Get-Process | Where-Object {$_.ProcessName -eq "node"} | Stop-Process -Force

すべてのNode.jsプロセスを強制終了。

特定のポートを使用しているプロセスを終了

$processId = (Get-NetTCPConnection -LocalPort 3000).OwningProcess
Stop-Process -Id $processId -Force

ターミナル (Mac/Linux)

Ctrl + C
サーバーを起動したウィンドウでCtrl + Cを押す。

killall コマンド

killall node

すべてのNode.jsプロセスを終了。

特定のポートを使用しているプロセスを終了

lsof -ti:3000 | xargs kill -9

pkill コマンド

pkill -f node

“node”を含むすべてのプロセスを終了。

これらの方法を使用することで、各環境でNode.jsサーバーを適切に終了できます。通常はCtrl + Cで十分ですが、バックグラウンドで実行されているプロセスや正常に終了しないプロセスの場合は、他の方法を試してみてください。

手動でのExpressプロジェクト作成と起動手順

プロジェクトディレクトリの作成

mkdir express-app
cd express-app

npm プロジェクトの初期化

npm init -y

これによりpackage.jsonファイルが生成されます。

必要なパッケージのインストール

npm install express ejs

Expressフレームワークとejsテンプレートエンジンをインストールします。

アプリケーションコードの作成

以下のようなフォルダ階層を作成します。

express-app/
│
├── node_modules/
│
├── public/
│   ├── css/
│   │   └── style.css
│   │
│   └── js/
│       └── main.js
│
├── views/
│   └── index.ejs
│
├── app.js
│
├── package.json
│
└── package-lock.json

app.js ファイルの作成

JavaScript

const express = require("express");
const path = require("path");
const app = express();
const port = 3000;

// テンプレートエンジンの設定
app.set("view engine", "ejs");

// 静的ファイルの提供
app.use(express.static("public"));

// ルートハンドラ
app.get("/", (req, res) => {
  res.render("index", { title: "Express App" });
});

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

views/index.ejs ファイルの作成

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
    <link rel="stylesheet" href="/css/style.css" />
  </head>
  <body>
    <h1>Welcome to <%= title %></h1>
    <script src="/js/main.js"></script>
  </body>
</html>

public/css/style.css ファイルの作成

CSS

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f0f0f0;
}
h1 {
  color: #333;
}

public/js/main.js ファイルの作成

JavaScript

console.log('JavaScript is loaded!');

アプリケーションの起動

サーバーの起動

node app.js

ブラウザでhttp://localhost:3000にアクセスしてアプリケーションを確認します。

出力結果：

コンソール画面：

この方法の利点：

完全なコントロール: プロジェクト構造を自由に設計できます。
最小限の依存関係: 必要な機能のみをインストールできるため、プロジェクトが軽量になります。
深い理解: 各ファイルの役割や設定を手動で行うことで、Expressアプリケーションの仕組みをより深く理解できます。
カスタマイズの容易さ: 必要に応じて簡単に機能を追加または削除できます。
学習効果: 各ステップを手動で行うことで、Webアプリケーション開発の基本概念をより良く学べます。

この手動アプローチは、特に初心者がExpressの仕組みを理解するのに役立ちます。また、小規模なプロジェクトや特定の要件に合わせたカスタムセットアップが必要な場合に適しています。

まとめ

Node.jsとExpressの概要: ウェブアプリケーション開発のための強力な組み合わせ
開発環境のセットアップ: Node.jsとnpmのインストールが前提
Expressプロジェクトの作成と起動: コマンドラインツールを使用した効率的な方法
プロジェクト構造: 標準的なExpressプロジェクトのファイル構成
サーバーの起動と終了: 異なるOS環境での操作方法
手動でのプロジェクト作成: Express Generatorを使用しない場合の手順

Node.jsとExpressを使用したウェブアプリケーション開発は、効率的で柔軟性の高い方法を提供します。Express Generatorを使用することで、基本的なプロジェクト構造を素早く生成できますが、手動でプロジェクトを構築することも可能です。開発者は、プロジェクトの要件に応じて適切な方法を選択できます。

Expressを使用したウェブアプリケーション開発は、初心者にも取り組みやすく、同時に高度な機能も実装可能な柔軟性を持っています。継続的な学習と実践を通じて、より複雑で堅牢なアプリケーションを構築する能力を身につけることができるでしょう。

未経験でもWEBスキルを取得したい方