@suzu6

主にWEBと解析の技術について書きます。

広く浅くも続ければ深くなるはず。

ExpressとNode入門|Node.jsのWEBフレームワークExpressでHello World

Node.jsでも簡単にWEBアプリを作れますが、 WEBフレームワークのExpressを使うとより柔軟で簡潔なコードを書くことができます。

APIのテストのために使ってみてその使い勝手の良さに感動しました。 JavaScriptで書けるため、JSONが扱いやすいのも良いですね。

Node.jsの利用者も同時に広めたいのでインストール方法から概要と簡単な例を紹介します。 以下の内容は基本的に公式を初心者向けに補足をする形です。

実行環境

  • Express 4.16
  • Node.js 10.15
  • npm 6.4
  • Windows 10 Home

開発はWindowsで行いますが、Nodeとnpmが入っていればMacやLinuxでも問題ありません。

Node.js/npmのインストール

(2019年05月現在)Node.jsのバージョンは10.xが推奨されています。 OS毎のNodeとnpmのインストール方法はそれぞれ以下に挙げます。

バージョン6と8でも確認できたので、既にインストールされている方はそのままで大丈夫(なはず)です。

> node -v
v10.15.1

> npm -v
6.4.1

インストールして上記のコマンドが打てることを確認してください。

Express

home

Fast, unopinionated, minimalist web framework for Node.js
Node.jsのための高速で、革新的な、最小限のWebフレームワーク

フロント側のJavaScriptに触れている方は、サーバ側もJavaScriptで書けるため覚えることが少なく直ぐに開発ができます。 そしてなりより、npmの豊富なライブラリも扱えるのでNode.jsとExpressを覚えておいて損はないと思います。

インストール

下記のコマンドでExpressをインストールできます。

> npm install express

公式のインストールでは--saveが付いていますが試す分には必要ありません。

--saveはpackage.jsonでプロジェクトのモジュール(Expressなど)を管理する際に利用します。 ただ、npm v5からデフォルトで--saveと同等のことをしてくれるため不要です。

Hello World

アプリのディレクトリ(your_app)の配下にサーバのコードを書きます。

your_app/app.js

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}!`))

僅か数行ですが、これだけでHello World!を返すWEBアプリが出来ました! コードについては後で解説します。

サーバ実行

まずは、サーバを実行してみましょう。

# app.jsのパスへ移動
> cd path/to/your_app

# サーバ実行
> node app.js
Example app listening on port 3000!

これでhttp://localhost:3000をブラウザで開くとHello World!の文字が表示できます。

hw

コードを編集した場合は、Kill(Ctrl + C)してから再度実行します。

セミコロンの省略について

Node.jsはJavaScriptで書きますが、;セミコロンを自動で挿入してくれるため省略できます。 この仕様について議論が色々とありますが、個人的には付けたいです。 よって以下のコードでもセミコロンを付けておきます。

詳しくは JavaScriptの行末セミコロンは省略すべきかを読んで下さい。

コードについての解説

コードは5行ですが、分解して説明します。

インスタンス

const express = require('express')

npmでインストールしたモジュール(Expressなど)はrequire()を使ってロードします。

const app = express()

続いてexpressのインスタンスを生成します。 以降、appにリクエストの処理などを追加します。

ルーティング

app.METHOD(PATH, HANDLER)

URLに処理を紐づけるルーティングをします。

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

上記ではhttp://localhost:3000/にGETでアクセスされたら、Hello World!を返す処理になります。

get()post()put()delete()に変えてメソッド毎に返すこともできます。 use()はすべてのメソッドに対して処理を行います。

パラメータのreqがリクエスト、 resがレスポンスです。 res.send()で文字列やHTMLのページなど返すことができます。

// /helloに来たPOSTメソッドに対してhelloを返す 
app.post('/hello', (req, res) => res.send('hello'))

// PUT
app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});


// コールバック関数を渡す
var collback = function (req, res) {
  res.send('Got Any request method at /book');
}

// useはすべてのメソッドに対して処理を行います。
app.use('/book', collback);

// /add?a=10&b=5 に対して15を返す
app.get('/add', (req, res) => {
    // req.queryでクエリパラメータ取得
    let a = parseInt(req.query.a)
    let b = parseInt(req.query.b)
    // 文字列にして返す
    res.send((a + b).toString())
})

第二引数は関数を渡します。 アロー関数ではなく、function (req, res) {}の形式でも大丈夫です。

以下にたくさんのサンプルがあります。

サーバを立ち上げ

app.listen(PORT, HANDLER)
const port = 3000
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

ポート3000でサーバを立ち上げています。 数値は空いているポートなら80でも8080でも立ち上げることができるため、複数台立ち上げる時はずらして下さい。