【Node.js入門】Express.jsでWebサーバーを構築する

皆さんは、「Express.js」 というフレームワークをご存知でしょうか？
Express.jsは、Node.jsでアプリケーション開発をする上での定番となっているフレームワークであり、その手軽さから、初心者でも気軽に活用することができます。

今回は、そんな Express.jsについて、インストールの仕方から基本的な使い方まで詳しく解説していきたいと思います。

Express.jsとは？

Express.jsは、Node.jsで利用可能なWebアプリケーションフレームワークです。
シンプルで使いやすい設計が特徴で、初期設定が少なく拡張性にも優れているため、初心者から玄人まで幅広い層に活用されています。

Express.jsの導入方法は非常に簡単で、たった数行のコマンドを実行するだけでセットアップを完了することができます。
Webアプリケーション開発に必要な基本機能を備えつつ、ミドルウェアを活用することによって機能を柔軟に追加することができるため、小規模なプロジェクトから大規模な開発まで幅広く対応することが可能です。

また、非同期処理モデルを活用しているため、多くのリクエストを効率よく処理できるのもメリットの１つです。
例えば、チャットアプリのようなリアルタイム通信や、大量のデータ処理を必要とするシステムなど、応答速度の速さや安定さを求められる場面で活用することができます。

加えて、Express.jsを使用することでルーティングやHTTPリクエストの処理が簡略化されるため、少ないコードでサーバーの動きを制御できるのも特徴です。

Express.jsの使い方

ここから、Express.jsのインストール方法と、基本的な使い方について解説していきます。

上述の通り、Express.jsは Node.jsを基盤とするフレームワークのため、事前に Node.jsをインストールして npmを使用できる環境を作っておく必要があります。

もし、まだ Node.jsがインストールされていない場合は、先にそちらをインストールしておきましょう。

【Node.jsのインストール方法はこちら】

Express.jsをインストールする

Express.jsをインストールするにあたって、初めにインストール先となるプロジェクト管理用のディレクトリを作成します。

mkdirコマンドを使用し、任意の名前でディレクトリを作成したら、cdコマンドで作成したディレクトリ内に移動します。

【実行するコマンド例】

mkdir sampleTest
cd sampleTest

移動したらnpm initコマンドを使用して npmを初期化し、package.jsonファイルを作成します。

【実行するコマンド】

npm init

コマンドを実行すると、ファイルに記述する各項目の内容を入力するよう要求されますが、全ての質問に対して何も入力せずにEnterを押しても問題はありません。

必要に応じて内容を変更し、最終的に以下のような結果が表示されればOKです。

【ターミナルの表示内容】

package name: (sampleTest) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/kaito/nodetest/package.json:
 
{
  "name": "sampleTest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
 
 
Is this OK? (yes)

入力内容に問題がなければ、Enterを押してファイルを作成しましょう。

package.jsonファイルが無事に作成されたら、以下のコマンドを実行して Express.jsをインストールします。

【実行するコマンド】

npm install express

実行すると、以下のような内容が表示されます。

【ターミナルの表示内容】

added 57 packages, and audited 58 packages in 3s
 
7 packages are looking for funding
  run `npm fund` for details
 
found 0 vulnerabilities

一連の作業が無事に終了したら、Express.jsのインストールは完了です。

Expressでサーバーを構築する

インストールが完了したら、早速サーバーを構築してみましょう。

まず初めに、ディレクトリ内に 「index.js」 という名前で新しいファイルを作成し、以下のコードを記述します。

【サンプルコード】

const express = require('express');
const app = express();

１行目のコードでは、requireメソッドを使用してExpressモジュールを読み込んでいます。
読み込んだモジュールを元に express関数を実行し、Expressアプリケーションのインスタンスを生成して、変数appに格納しています。
これにより、Node.js内でExpressが使えるようになります。

生成したアプリケーションオブジェクトには、Webアプリを構築するうえで必要となる変数やメソッドなどが保持されます。
インスタンスの生成が完了したら、指定のポートで通信を待ち受けるために以下のコードを追加します。

【サンプルコード】

app.listen(3000, function() {
    console.log('Server is running on port 3000');
});

listenメソッドの第1引数に任意のポート番号を指定し、第2引数にコールバック関数を指定します。
これにより、指定したポートでの通信が可能となります。

Expressでルーティングを設定する

続いて、Expressでルーティングを設定する方法について解説します。

ルーティングとは、HTTPリクエストの内容に応じて、アプリケーション内で実行する処理を決定する仕組みのことを言います。
ルーティングは、HTTPメソッドの種類（GET、POSTなど）と、URLパターンによって定義されます。

Express.jsでは、app.get()、app.post()、app.put()、app.delete() といったように、それぞれのHTTPメソッドに対応した関数を使用することができます。

GETメソッドの処理を実装する

まずは、GETリクエストの処理方法から見ていきましょう。

GETリクエストを処理する場合は、以下のようにgetメソッドを使用します。

【サンプルコード】

app.get('/', function (req, res) {
    res.send('ページが読み込みされました');
});

第1引数に 「/」 を指定することで、トップページを開いた際のリクエスト処理を行うことができます。
その際の処理内容は、第2引数のコールバック関数内に記述します。

上述したサーバーの設定処理と合わせると、全体で以下のようなコードになります。

【サンプルコード】

const express = require('express');
const app = express();

app.get('/', function (req, res) {
    res.send('ページが読み込みされました');
});

app.listen(3000, function() {
    console.log('Server is running on port 3000');
});

もし、アクセス時にHTMLファイルなどを表示させたい場合は、express.staticミドルウェアを使用して、静的ファイルを提供しましょう。

【サンプルコード】

const express = require('express');
const app = express();

app.use(express.static('public'));

app.listen(3000, function() {
    console.log('Server is running on port 3000');
});

上記の例では、publicディレクトリをルートディレクトリとして指定しているため、publicディレクトリ以下のファイルにアクセスすることができます。

例えば、http://localhost:3000/public/test.html にアクセスすると、publicディレクトリ内にある test.htmlファイルが表示されます。

POSTメソッドの処理を実装する

続いて、POSTリクエストの処理方法について見ていきましょう。

POSTリクエストを処理する場合は、postメソッドを使用します。

【サンプルコード】

app.post('/', function(request, response) {
    console.log(request.body);
});

POSTリクエストのケースとしてよくあるフォーム入力などの場合、express.urlencodedメソッドを使用してフォームからのデータを受け取れるようにする必要があります。

【サンプルコード】

const express = require('express');
const app = express();

app.use(express.urlencoded({extended:true}))

app.post('/', function(request, response) {
    console.log(request.body.name);
});

app.listen(3000, function() {
    console.log('Server is running on port 3000');
});

まとめ

今回は、Express.jsの導入方法や使い方について解説してきました。

Express.jsを使用すると、より効率的にアプリケーション開発を行うことができます。
ぜひこの機会に、活用して見てくださいね！

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。