JavaScriptではNode.jsという実行環境を用いてサーバーを構築することができます。今回はNode.jsのフレームワークであるExpress.jsを使って手軽にローカルサーバーを構築します。

Expressでサーバーを立ち上げる手順

Expressでローカルサーバーを立ち上げるには以下のような手順を踏みます。

1. npmでExpressをインストール
2. Expressをインポートしたjsファイルを記述
3. ファイルを実行してサーバー立ち上げ

シンプルで簡単です。本記事ではNode.jsとそのパッケージ管理ツールであるnpmについてはすでにインストールしてあるものとしています。これらについては「Node.jsのインストール」で詳しく説明しているので参考にしてみてください。

Expressでローカルサーバーを立ち上げ

それでは早速Expressでローカルサーバーを立ち上げてみましょう。前項での手順に則り行います。

npmでExpressをインストール

まずはnpmを初期化します。

タイトル:ターミナル

$ npm init

npm initコマンドでnpmを初期化してpackage.jsonファイルを準備しましょう。

続いてnpmでExpressをインストールします。

タイトル:ターミナル

$ npm install express

タイトル:package.json

"dependencies": {
  "express": "^4.17.1",
},

package.jsonに上の記述があればインストール完了です。

Expressをインポートしたjsファイルを記述

次にサーバーを立ち上げる処理を記述しましょう。

server.jsファイルをpackage.jsonと同階層に作成します。

タイトル:server.js

const express = require('express')
const app = express()
app.get('/', function(req, res){
  res.send('hello')
})
app.listen(3000, function(){
  console.log('Example app listening on port 3000!')
})

記述する内容は上記だけです。記述内容について説明していきます。

タイトル:server.js

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

ここではexpressをモジュールとして読み込みappという名前のアプリケーションを作成しています。Expressでは基本的にこのappの設定を変更していくことでアプリケーションの機能を定義していくことができます。

タイトル:server.js

app.get('/', function(req, res){
  res.send('hello')
})

get()メソッドではGETメソッドのリクエストに対する処理を記述することができます。第一引数にはリクエストのパスを指定し、第二引数のコールバック関数ではリクエストに対するハンドラを記述していきます。今回はコールバック関数の第二引数resのsendメソッドでhelloというレスポンスを記述しています。

タイトル:server.js

app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
})

最後にサーバーを立ち上げる処理を記述します。lisetn()メソッドでは第一引数に指定したポート番号でサーバーを立ち上げます。今回はポート番号3000で立ち上げ、立ち上げに成功したらconsoleに'Example app listening on port 3000!'と出力します。

ファイルを実行してサーバー立ち上げ

最後に作成したsrever.jsをNodeで実行してサーバーを実装に立ち上げます。

タイトル:ターミナル

$ node server.js

この状態でhttp://localhost:3000/ にアクセスしてみましょう。以下のような画面が表示されれば成功です。

この記事のまとめ

本記事ではNode.jsのwebフレームワークであるExpress.jsをインストールしてローカルサーバーを立ち上げる方法について解説しました。最後に要点をまとめておきましょう。

• Node.jsではwebサーバーを立ち上げることができる
• ExpressはNode.jsのwebフレームワークである
• Expressはnpmでインストールして利用できる

皆さんもNode.jsでJavaScriptを使った開発をしてみてください！