ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
Express(Node.js)のインストールは、プロジェクト用フォルダで npm init -y を実行して package.json を作成し、続けて npm install express を実行するだけで完了します。Express は OS にインストールするツールではなく、Node.js のパッケージ(ライブラリ)なので、プロジェクトごとにローカルインストールするのが基本です(2026年時点)。本記事では、前提条件の確認から最小サーバの起動・動作確認、雛形生成まで順を追って解説します。
| この記事の要点 |
|---|
|
前提:Node.js と npm が必要
Express をインストールするには、あらかじめ Node.js(と同梱の npm)がインストールされている必要があります。Express 公式は比較的新しい Node.js のサポートを前提としており、特別な理由がなければ、その時点で提供されている LTS(長期サポート)版を使うのが無難です。まずは以下のコマンドで、両方が利用可能かを確認します。
|
$ node -v v20.11.1 $ npm -v 10.2.4 |
バージョン番号(上記は一例)が表示されれば準備完了です。command not found などのエラーが出る場合は、先に Node.js 公式サイトからインストーラを入手して導入してください。npm は Node.js に同梱されるため、通常は個別にインストールする必要はありません。
手順1:プロジェクトを初期化する(npm init -y)
Express を入れる前に、まずプロジェクト用のフォルダを作成し、その中で npm init を実行して package.json を生成します。package.json はそのプロジェクトの名前・バージョン・依存パッケージなどを記録する設定ファイルで、インストールしたパッケージを管理する起点になります。-y を付けると対話入力をすべて既定値で済ませられます。
|
$ mkdir my-express-app $ cd my-express-app $ npm init -y Wrote to /path/to/my-express-app/package.json |
これでフォルダ内に package.json が作成されます。以降のインストール作業は、必ずこの package.json があるフォルダの中で行います。
手順2:Express をインストールする(npm install express)
package.json があるフォルダ内で、次のコマンドを実行します。
|
$ npm install express added 60 packages, and audited 61 packages in 2s found 0 vulnerabilities |
実行すると、フォルダ内に node_modules(実体のファイル群)と package-lock.json(依存関係を厳密に固定するファイル)が作成され、package.json の dependencies に Express が追記されます。なお、かつて依存として保存するために必要だった --save オプションは、現在の npm では既定の動作になっているため付ける必要はありません(2026年時点)。
バージョンを指定したい場合は、パッケージ名の後ろに @ とバージョンを付けます。たとえば 4 系の最新を入れたい場合は次のようにします。
|
$ npm install express@4 |
手順3:最小のサーバを書く(app.js)
インストールが終わったら、プロジェクトフォルダの直下に app.js というファイルを作り、以下のコードを書きます。これは「ブラウザでアクセスすると Hello World! を返すだけ」の最小構成のサーバです。
|
const express = require('express'); const app = express(); const port = 3000;
app.get('/', (req, res) => { res.send('Hello World!'); });
app.listen(port, () => { console.log(`Example app listening on port ${port}`); }); |
各行の意味は次のとおりです。
| コード | 役割 |
|---|---|
require('express') |
インストールした Express モジュールを読み込む。 |
express() |
アプリケーション本体(app)を生成する。 |
app.get('/', ...) |
ルート(/)への GET リクエストに対する応答を定義する。 |
res.send(...) |
クライアントへレスポンスを返す。 |
app.listen(port, ...) |
指定ポートで接続の待ち受けを開始する。 |
手順4:起動して動作確認(node app.js)
同じフォルダで、Node.js を使って app.js を実行します。
|
$ node app.js Example app listening on port 3000 |
このメッセージが表示されたら起動成功です。ブラウザで http://localhost:3000/ にアクセスすると、画面に Hello World! と表示されます。サーバを止めるときは、コマンドを実行しているターミナルで Ctrl + C を押します。
(任意)express-generator で雛形を作る
ルーティングやビューを含む一般的なディレクトリ構成を一括で生成したい場合は、express-generator という雛形作成ツールが便利です。毎回手書きする必要がなくなります。最近の npm では、グローバルインストールせずに npx で都度実行できます。
|
$ npx express-generator myapp $ cd myapp $ npm install $ npm start |
生成された雛形には app.js、routes/、views/、public/ などがあらかじめ用意されます。npm install で必要なパッケージをまとめて入れてから起動する流れです。なお、これはあくまで補助ツールであり、学習目的であれば手順1〜4のように自分で書いてみるほうが構造を理解しやすいでしょう。
インストールが dependencies に記録される仕組み
npm install express を実行すると、package.json の dependencies に自動でパッケージ名とバージョンが追記されます。実際の package.json は次のようになります。
|
{ "name": "my-express-app", "version": "1.0.0", "dependencies": { "express": "^4.19.2" } } |
この記録があることで、別の環境にプロジェクトを移したときでも npm install(パッケージ名なし)を実行するだけで、必要なパッケージが package.json の内容どおりに再インストールされます。node_modules 自体は容量が大きいため、Git などのバージョン管理には含めず、package.json と package-lock.json だけを共有して各環境で復元するのが一般的です。
| つまずきやすいポイント(落とし穴) |
|---|
|
よくある質問(FAQ)
Q1. Express をグローバル(-g)でインストールすべきですか?
A. Express 本体はプロジェクトごとのローカルインストールが基本です。プロジェクトによって使うバージョンが異なる場合があり、ローカルに入れておけば package.json で管理できるためです。一方、express-generator のような雛形作成ツールは、グローバルに入れるか npx で都度実行するかのどちらでも構いません。
Q2. npm install express --save の --save は今でも必要ですか?
A. 現在の npm では、npm install で入れたパッケージは既定で dependencies に保存されるため、--save を付ける必要はありません(2026年時点)。古い記事に残っている書き方ですが、付けても動作は同じです。
Q3. node app.js を毎回打つのが面倒です。自動で再起動できますか?
A. 開発中はファイルを保存するたびにサーバを自動再起動してくれるツール(例:nodemon)を使うと便利です。npm install --save-dev nodemon で開発用依存として入れ、npx nodemon app.js のように起動します。本番環境では通常の node app.js(やプロセス管理ツール)で起動します。
Q4. Express のバージョンが知りたいときは?
A. プロジェクト内で npm list express を実行すると、実際にインストールされている Express のバージョンを確認できます。package.json の dependencies の記述(例:^4.19.2)でも確認できますが、こちらは許容範囲を表す指定であり、実体のバージョンとは一致しないことがあります。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
- インストール方法
- サーバーの起動
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- IPv6とは|128bitアドレス・コロン16進表記/::省略・リンクローカル・SLAAC・デュアルスタック NEW 2026-06-22 12:34:44
- MAC アドレスフィルタリングの仕組みと限界 | ネットワーク入門 NEW 2026-06-22 12:19:10
- VPNとは|暗号トンネル・サイト間/リモートアクセス・IPsec/SSL-VPN/WireGuardを解説 NEW 2026-06-22 12:19:10
- WebRTC とは ブラウザ間 P2P の音声・映像・データ通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/2 とは 多重化・HPACK・バイナリフレーム | ネットワーク入門 NEW 2026-06-22 12:17:25
- Web通信プロトコル入門 HTTP/2・HTTP/3・WebSocket・gRPC・WebRTC | ネットワーク入門 NEW 2026-06-22 12:17:25
- gRPC とは HTTP/2 + Protocol Buffers の高速 RPC | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/3 (QUIC) とは UDP ベースの低遅延 Web 通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebSocket とは 全二重リアルタイム通信 ws/wss | ネットワーク入門 NEW 2026-06-22 12:17:25
- 証明書と認証局(CA)とは|X.509・信頼チェーン・DV/OV/EV・失効(CRL/OCSP)を解説 NEW 2026-06-22 12:17:24
- ファイアウォールとは|パケットフィルタ・ステートフル・DMZ・次世代FW(L4/L7)を解説 NEW 2026-06-22 12:17:24
- iptables/nftablesとは|テーブル・チェーン・ルール例・永続化をLinux視点で解説 NEW 2026-06-22 12:17:24
- HAProxy とは frontend/backend と設定例 | ネットワーク入門 NEW 2026-06-22 12:17:24
- CDN とは エッジキャッシュ・TTL・Cloudflare/CloudFront | ネットワーク入門 NEW 2026-06-22 12:17:24
- TLS/SSLの仕組み|ハンドシェイク・暗号スイート・前方秘匿性・証明書検証をわかりやすく解説 NEW 2026-06-22 12:17:24
コメントを削除してもよろしいでしょうか?