Express.jsは、Node.jsの大人気バックエンドフレームワークであり、広範なJavaScriptエコシステムに欠かせない要素です。

シングルページ、マルチページ、ハイブリッドウェブアプリケーションを構築でき、Node.jsでバックエンドアプリケーションを開発する上での定番にもなっています。

ダイナミックなウェブサイトやウェブアプリケーションの構築に便利な、フリーかつオープンソースのJavaScriptソフトウェアスタックにMEVNがあります。これを構成するのが、以下のコンポーネントです。

  1. MongoDB：MongoDBは標準的なNoSQLデータベース
  2. Express.js：ウェブアプリケーションを構築するためのデフォルトのウェブアプリケーションフレームワーク
  3. Vue.js：フロントエンドウェブアプリケーション構築のためのJavaScriptプログレッシブフレームワーク
  4. Node.js：スケーラブルなサーバーサイドやネットワーキングアプリケーションに使用されるJavaScriptエンジン

今回は、Express.jsフレームワークの主な機能と、最初のアプリケーションの構築方法についてご説明します。

Express.jsとは

Express.jsは「Express」とも呼ばれ、スケーラブルなバックエンドアプリケーションを開発するための堅牢な機能とツールを提供する、ミニマリストで高速、SinatraライクなNode.jsバックエンドフレームワークです。アプリケーションのユースケースに応じて強力なコンポーネントやパーツを開発し、フレームワークを拡張することができます。

Express.jsのロゴ。タイトルの「Express」の文字が細い黒のセリフフォントで表示されている。
Express.jsの公式ロゴ

このフレームワークには、HTTPリクエストとレスポンス、ルーティング、およびミドルウェアといった、大規模なエンタープライズ対応アプリケーションの構築とデプロイのための機能が豊富に盛り込まれています。

また、Node Package Manager（NPM）と呼ばれるコマンドラインインターフェースツール（CLI）も提供しており、開発済みのパッケージを入手することができます。また、開発者にはDRY（Don’t Repeat Yourself）の原則に従うことを強制しています。

DRYの原則とは、ソフトウェアパターンの繰り返しを減らし、抽象化で置き換えたり、データの正規化を使って冗長性を避けたりすることを目的としています。

Express.jsは何に使われるのか

Express.jsは、JavaScript/Node.jsのエコシステムにおいて、アプリケーション、APIエンドポイント、ルーティングシステム、フレームワークなど、幅広い用途で使用されています。

以下は、Express.jsで構築できるアプリケーションの一部です。

シングルページアプリケーション

シングルページアプリケーション（SPA）は、アプリケーション全体が単一のインデックスページにルーティングされる、現代的な構成のアプリケーションです。Express.jsは、SPAを接続し、一貫してデータを配信するAPIを構築するのに便利なフレームワークです。シングルページアプリケーションの例としては、Gmail、Google Maps、Airbnb、Netflix、Pinterest、PayPalなどがあります。各社は、流動的でスケーラブルなエクスペリエンスの構築にSPAを使用しています。

リアルタイムコラボレーションツール

Express.jsを使えば、コラボレーションを促進するリアルタイム型ネットワーキングアプリケーションを簡単に開発できます。

また、Express.jsはチャットやダッシュボードアプリケーションのようなリアルタイムアプリケーションの開発にも使用され、容易にWebSocketをフレームワークに統合可能です。

Express.jsがプロセスのルーティングとミドルウェアの部分を処理することで、開発者はライブコラボレーションツール開発の際にビジネスロジックに集中することができます。

ストリーミングアプリケーション

Netflixのようなリアルタイムストリーミングアプリケーションは複雑で、データストリームのレイヤーが多くなりがちです。このようなアプリを開発するには、非同期データストリームを効率的に処理する強固なフレームワークが必要になります。

Express.jsはエンタープライズ対応でスケーラブルなストリーミングアプリケーションの構築とデプロイにうってつけのフレームワークです。

フィンテックアプリケーション

フィンテックとは、銀行業務や金融サービスをサポートまたは可能にするコンピュータプログラムやその他のテクノロジーのことです。フィンテックアプリケーションの構築は現代の業界トレンドであり、Express.jsは拡張性の高いフィンテックアプリケーションの構築に向いています。

ユーザー数が多く、トランザクション量の多いフィンテックアプリケーションの構築を考えているのであれば、PayPalやCapital Oneといった企業を追随するようにしてExpress.jsを使用してアプリケーションを開発することになるでしょう。

Express.jsの人気の理由

プロジェクトでのExpress.jsの使用をおすすめする理由はいくつもあります。リクエストとレスポンスを支えるI/Oの高速化から、シングルスレッドシステムと非同期処理まで、さまざまなメリットがあります。また、MVC構造を使ってデータ操作やルーティングシステムを簡素化することもできます。

Express.jsの強みを詳しくご紹介します。

柔軟でスムーズ

Express.jsは非常に使いやすく柔軟で、他のNode.jsフレームワークと比べても高速です。ミニマリスティックなフレームワークであるため、迅速なアプリケーション開発が可能で、大規模なフレームワークのさまざまな部分を使いこなすストレスが軽減できます。また、優れたルーティングシステム、ミドルウェア、コンテンツネゴシエーションなどの豊富な機能をすぐに利用可能です。

MEANスタックの一部

Express.jsは、MERN、MEANなどのスタック（Eで表される）で選択されるフレームワークです。また、MEANスタックの開発プロセスにおいてこのフレームワークがいかに重要であるかを示す事実として、その他にもあらゆるスタックやテクノロジーに簡単に統合することができます。

さらに、従来のMySQLよりも堅牢なデータベース管理システムと効率的に接続でき、各スタックにまたがるシームレスな開発プロセスが可能になります。この機能の組み合わせにより、Express.jsはMEAN開発者の間で非常に人気があります。

スケーラビリティ

Express.jsは、長年にわたり非常にスケーラブルな選択肢として知られており、多くの大企業が日々サーバー上でこのフレームワークを使用しています。

ユーザーからのリクエストとレスポンスを効率的に処理し、大規模なウェブアプリケーションを開発する際に、追加の設定はほとんど必要ありません。

優れたモジュール、パッケージ、追加リソースがあり、信頼性が高くスケーラブルなウェブアプリケーションを構築するのに有用です。

Google V8エンジンをサポート

Express.jsは多くのGoogle V8エンジンパッケージをサポートしており、リアルタイム、コラボレーション、ネットワークベースのアプリケーションを企業レベルで構築・デプロイするのに非常に強力なフレームワークです。

Google V8エンジンはオープンソースの高性能JavaScriptおよびWebAssemblyエンジンで、複雑で負荷の高いアプリケーションの高速稼働とスケーラビリティをサポートします。Google V8エンジン採用のパッケージを使用することで、バックエンドアプリケーションのパフォーマンスとスケーラビリティの大幅な向上が期待できます。

コミュニティサポート

Node.jsのバックエンドフレームワークの中でも非常に人気のある選択肢であるため、コミュニティによるサポート、リソース、パッケージの数が多く、あらゆる開発面での課題に対応できます。Googleからのサポートも充実しており、Node.js開発者の間で人気のあるフレームワークとなっています。オープンソースであるため、開発者は拡張可能なパッケージやリソースを作成し、自分自身だけでなく、Express.jsでコーディングするすべての人の開発を容易にすることができます。

強力なルーティングシステム

Express.jsフレームワークは強力で堅牢なルーティングシステムを備えており、これが特定のエンドポイントを経由したクライアントリクエストへの応答を支援します。

Express.jsのルーティングシステムでは、フレームワークのルーターインスタンスを使用して、肥大化したルーティングシステムを管理の容易なファイルに分割できます。

Expressルーティングシステムは、複数のルートを1つのフォルダ/ディレクトリにグループ化することで、アプリケーションの構造管理を支援します。

ルーターで機能をグループ化し繰り返しを避けることで、より保守性の高いコードを作成できます。

ミドルウェア

Express.jsは、シームレスな開発プロセスを実現する一連のミドルウェアで構成されます。

ミドルウェアは言うなれば、HTTPリクエストがルートハンドラに到達する前や、クライアントがレスポンスを受け取る前に実行されるコードです。クライアントのリクエストの前後で特定のスクリプトを実行する機能がフレームワークにもたらされます。

ミドルウェアを使うことで、アプリケーション全体のフローに割り込むスクリプトを実装できます。例えば、ミドルウェアを使って、ユーザーがログインに成功したか、ログアウトに成功したかをチェックすることが可能です。

Express.jsの仕組み

Express.jsはクライアントサーバーモデルを使用してユーザーからのリクエストを受け付け、クライアントにレスポンスを返します。

ユーザーがウェブブラウザからウェブサイトのアドレスを入力してリクエストを送信すると、ブラウザがアプリケーション/サーバーにHTTPリクエストを送信します（Express.jsを使用し作成されるアプリケーションの多くがクラウドにホストされています）。

サーバーはルートの1つを通してリクエストを受け取り、リクエストされたルートにマッチするコントローラを使ってこれを処理します。

処理後、サーバーがHTTPを使ってクライアントにレスポンスを返します。

クライアントに返されるレスポンスは、標準的なテキストであったり、ブラウザが処理し美しいウェブページを表示するための動的なHTMLページであったり、フロントエンド開発者がウェブページに情報を表示するために扱うJSONデータであったりします。

Express.jsを使って、特定のURLとポート番号に基づきリクエストをリッスンするシンプルなサーバーを作ってみましょう。

const express = require('express')
const app = express()
const port = 4000

app.get('/', (request, response) => {
  response.send('Testing Hello World!')
})

app.listen(port, () => {
  console.log(`Test app listening at http://localhost:${port}`)
})

これだけで、http://localhost:4000/へのリクエストをリッスンし、”Testing Hello World!“というテキストのレスポンスを返すシンプルなExpress.jsサーバーが機能します。

Express.jsアプリの作り方

では、Express.js 5.0を使って、実際にデモアプリケーションを作ってみましょう。まず、アプリケーションのディレクトリを作成し、以下のパッケージをインストールします。

mkdir first-express-app
cd first-express-app

npm install [email protected] --save

次に、ルートディレクトリにindex.jsファイルを作成し、以下のコードを貼り付けます。

touch index.js

上記のようにサーバーをセットアップした後、呼び出されるエンドポイントに応じてユーザーに返すすべてのtodoを格納した配列todosを作成します。
index.jsファイルに以下のコードを追加してください。

const express = require("express");
const app = express();
const port = 3000;
app.listen(port, () => {
  console.log(`Test app listening at http://localhost:${port}`)
})
const todos = [
  {
    title: "Todo 1",
    desc: "一つ目のTodo",
    completed: true,
  },
  {
    title: "Todo 2",
    desc: "二つ目のTodo",
    completed: true,
  },

  {
    title: "Todo 3",
    desc: "三つ目のTodo",
    completed: true,
  },

  {
    title: "Todo 4",
    desc: "四つ目のTodo",
    completed: true,
  },

  {
    title: "Todo 5",
    desc: "五つ目のTodo",
    completed: true,
  },
];
// Data source ends here

次に、サーバーに保存されているすべてのtodosを取得するエンドポイントを作成します。

app.get("/todos", (request, response) => {
  response.status(200).json(todos);
});

次に、todoのIDに基づいて、一つのtodoを取得するエンドポイントを作成します。

app.get("/todos/:id", (request, response) => {
  response
    .status(200)
    .json({ data: todos.find((todo) => todo.id === request.params.id) });
});

次に、新しいtodoを保存するエンドポイントです。

app.post("/todos", (request, response) => {
  todos.push(request.body);
  response.status(201).json({ msg: "Todoを作成しました" });
});

次に、既存のtodoをIDを用いて編集するエンドポイントです。

app.put("/todos/:id", (request, response) => {
  const todo = todos.find((todo) => todo.id === request.params.id);
  if (todo) {
    const { title, desc, completed } = request.body;
    todo.title = title;
    todo.desc = desc;
    todo.completed = completed;
    response.status(200).json({ msg: "Todoを編集しました" });
    return;
  }
  response.status(404).json({ msg: "Todoが見つかりませんでした" });
});

最後に、IDに基づいてtodoを削除するエンドポイントを作成します。

app.delete("/todos/:id", (request, response) => {
  const todoIndex = todos.findIndex((todo) => (todo.id = request.params.id));
  if (todoIndex) {
    todos.splice(todoIndex, 1);
    response.status(200).json({ msg: "Todoを削除しました" });
  }
  response.status(404).json({ msg: "Todoが見つかりませんでした" });
});

このコードは、Express.jsでDELETE機能を実装する方法を示しています。パラメータでtodo IDを収集し、一致するIDを配列で検索して削除します。

Express.jsアプリのテスト

それでは、Express.jsアプリケーションをテストしてみましょう。

以下のコマンドを実行して、開発したREST APIをPostmanでテストし、正しいデータがあることを確認します。

node index.js

公式サイトからPostmanをダウンロードし、以下のテストを実行してください。さらなる学習として、この記事でご紹介したアプローチを使ってもっと多くの機能を作成しExpress.jsの知識を広げてみることをおすすめします。

Express.jsのAPIをテストしてみた結果
Express.jsのAPIをテストしてみた結果

まとめ

Express.jsはNode.jsエコシステムの中でも圧倒的な人気を誇るフレームワークであり、その理由は想像に難くありません。多くの強みと特徴を備えています。

Express.jsは難しすぎず、シンプルに使い始めることができます。不必要なウェブアプリケーションの機能を抽象化することで柔軟性が確保されています。

さらに、Express.jsフレームワークはNode.jsの基礎であるため、Express.jsを知れば自動的に他の一般的なフレームワークについてもきちんと把握できるようになります。この知識は、ビジネスロジックの構築や、Express.js以外のどのフレームワークを使うか、デフォルトパッケージとユーザーパッケージのどちらを使うか、といった重要な判断を下す際に役立ちます。

Express.jsを使って何を作る予定ですか？コメント欄でお聞かせください。