ホーム » Express チュートリアル » Express Hello World アプリの構築

Express Hello World アプリの構築

要約: このチュートリアルでは、Express Web フレームワークと Express Hello World アプリの構築方法を学びます。

Express の紹介

Express は、Node.js 用の高速、無作為、最小限の Web フレームワークです。Express は Web アプリケーションの構築に適した機能セットを提供します。

Express を使用すると、以下が可能になります。

  • 単一ページおよび複数ページアプリケーションを含む Web アプリケーションを構築する。
  • API サーバーを構築する。

Express の利点

  • シンプル: Express は、ミニマリスト的なアプローチを提供することで、Web サーバーと API の構築の簡略化に役立ちます。
  • 柔軟: Express は無作為であるため、好きなようにアプリケーションを構築できます。
  • 活発なコミュニティとエコシステム: Express には広範なドキュメントとサードパーティのライブラリがあり、Web アプリをより簡単かつ迅速に開発できます。

Express Hello World アプリの作成

ステップ 1. ターミナルまたはコマンドプロンプトを開き、express-server という新しいプロジェクトディレクトリを作成します。

mkdir express-server
cd express-serverCode language: plaintext (plaintext)

ステップ 2. プロジェクトディレクトリ内で npm init --yes コマンドを実行して、新しい Node.js プロジェクトを初期化します。

npm init --yesCode language: plaintext (plaintext)

このコマンドにより、依存関係とスクリプトを管理できる package.json ファイルが作成されます。

ステップ 3. 以下の npm install コマンドを実行して express パッケージをインストールします。

npm install express

ステップ 4. package.json ファイルの type キーの値を "module" に設定して、Node.js に ES モジュール を使用するように指示します。

  "type": "module",Code language: JSON / JSON with Comments (json)

さらに、package.json ファイルの scripts セクションを以下に変更します。

  "scripts": {
    "start": "node --watch index.js"
  },Code language: JSON / JSON with Comments (json)

npm start コマンドを実行すると、node --watch index.js コマンドが実行されます。--watch フラグは、ソースコードを変更するたびにサーバーを再起動します。

--watch フラグを追加しない場合は、コードを変更するたびにサーバーを再起動する必要があります。

--watch フラグは Node.js 19 以降で使用できることに注意してください。

ステップ 5. 以下のコードを含む index.js ファイルを作成します。

import express from 'express';

const app = express();

const PORT = 3000;

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});Code language: JavaScript (javascript)

ステップ 6. ターミナルを開き、サーバーを実行します。

npm startCode language: plaintext (plaintext)

ターミナルに次のメッセージが表示されます。

Server is listening on port 3000

これは、サーバーが実行されており、ポート 3000 でリッスンしていることを意味します。Web ブラウザーでページ http://localhost:3000/ を起動すると、Hello, World! メッセージが画面に表示されます。

Express アプリの仕組み

最初に、express ライブラリから express 関数をインポートします。

import express from 'express';Code language: JavaScript (javascript)

express は Express アプリのインスタンスを返す関数です。

次に、express() 関数を呼び出して Express アプリのインスタンスを取得します。

const app = express();  Code language: JavaScript (javascript)

その後、サーバーがリッスンするポート番号を格納する PORT 定数を定義します。

const PORT = 3000;Code language: JavaScript (javascript)

その後、サイトルート / への HTTP GET リクエストを処理するルートハンドラーを定義します。

app.get('/', (req, res) => {
    res.send('Hi there');
});Code language: JavaScript (javascript)

get() メソッドには 2 つのパラメータがあります。

  • 最初のパラメータは ルート / です。
  • 2 番目のパラメータは、2 つのパラメータ (req と res) を持つコールバック関数です。req と res はそれぞれ request と response の略です。このコールバック関数は ルーターハンドラー と呼ばれます。

req は HTTP リクエストを表し、res は HTTP レスポンスを表します。これらは、それぞれ Request クラスと Response クラスのインスタンスです。これらのオブジェクトには、HTTP リクエストとレスポンスを処理するための多くの便利なプロパティとメソッドがあります。

この例では、HTTPレスポンスオブジェクトのsend()メソッドを呼び出して、シンプルなテキストを返しています。

最後に、appに3000ポートでリクエストをリッスンするように指示します。

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});Code language: JavaScript (javascript)

ExpressアプリからクライアントにJSONを返す

以下に、クライアントにJSONを返す方法を示します。

import express from 'express';

const app = express();

const PORT = 3000;

app.get('/', (req, res) => {
  res.send({ message: 'Hello, World!' });
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
Code language: JavaScript (javascript)

このコードでは、send()関数を呼び出して、JSONデータをクライアントに返しています。

res.send({ message: 'Hello, World!' });Code language: JavaScript (javascript)

Webブラウザでhttp://localhost:3000/のURLを開くと、単純なテキストではなく、JSONが表示されます。

{
  "message": "Hi there"
}Code language: JSON / JSON with Comments (json)

環境変数の追加

Node.js v20.6.0以降では、processコアモジュールを使用して、環境変数を設定するための.envファイルがサポートされています。

processコアモジュールには、すべての環境変数を格納するenvプロパティがあります。Node.jsは自動的にprocessモジュールをインポートするため、使用前にインポートする必要はありません。

ステップ1.プロジェクトディレクトリに新しい.envファイルを作成し、PORT変数を3000に設定します。

PORT=3000Code language: plaintext (plaintext)

アプリでは、proccessモジュールを使用して、次のようにPORT変数にアクセスできます。

process.env.PORTCode language: plaintext (plaintext)

ステップ2.index.jsファイルを変更して、PORT変数を使用するようにします。

import express from 'express';

const app = express();

const PORT = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.status(200).send({ message: 'Hello, World!' });
});

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});
Code language: JavaScript (javascript)

しくみ

最初に、PORT変数を定義し、process.env.PORTを代入します。PORT環境変数が利用できない場合、PORT変数はデフォルトで3000になります。

const PORT = process.env.PORT || 3000;Code language: JavaScript (javascript)

次に、listen()メソッドでPORTを使用します。

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});Code language: JavaScript (javascript)

ターミナルに同じメッセージが表示されます。

Server is listening on port 3000Code language: plaintext (plaintext)

VSコードでRESTクライアントを使用する

VSコードを使用している場合、RESTクライアント拡張機能を使用してHTTPリクエストを行い、エディター内で直接レスポンスを表示できます。

ステップ1.RESTクライアント拡張機能をインストールします。

ステップ2.プロジェクトディレクトリにapi.httpという名前の新しいファイルを作成します。

ステップ3.次のコードを追加して、http://localhost:3000/にHTTP GETリクエストを行います。

GET http://localhost:3000/
Content-Type: application/jsonCode language: HTTP (http)

ステップ4.リクエストを送信をクリックして、HTTPリクエストを行います。

REST Client - Make HTTP Request
RESTクライアント – HTTPリクエストを行う

ステップ5.HTTPレスポンスを表示します。

REST Client - View HTTP Response

RESTクライアントツール以外にも、Postmanなどの他のRESTクライアントツールを使用してHTTPリクエストを行うことができます。

Express Hello Worldアプリのダウンロード

ステップ1.Express Hello Worldアプリをダウンロードします。

プロジェクトのソースコードをダウンロードします。

ステップ2.express-serverなどのディレクトリに解凍します。

ステップ3.ターミナルまたはコマンドプロンプトを開き、npm installコマンドを実行して依存関係をインストールします。

npm install

ステップ4.npm startを実行して、Expressアプリを実行します。

npm start

まとめ

  • Expressは、WebアプリケーションとAPIを構築するための柔軟なWebアプリケーションフレームワークです。
  • RESTクライアント拡張機能を使用してHTTPリクエストを行い、HTTPレスポンスをVSコード内で直接表示します。
  • 環境変数にアクセスするには、process.envを使用します。
このチュートリアルは役に立ちましたか？
Express Tutorial
以前
Expressチュートリアル
次へ
Expressルーティングの実用ガイド
A Practical Guide to Express Routing