suzu6Node.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のインストール方法はそれぞれ以下に挙げます。
- Windows : こちらのインストーラ（推奨版）を使う。
- Linux
- Ubuntu : Ubuntuはaptを使う方法。
- CentOS : リンク先のコマンドを
8.xから10.xに変更してインストールできます。
- Mac : Homebrewを使う方法
バージョン6と8でも確認できたので、既にインストールされている方はそのままで大丈夫（なはず）です。
> node -v
v10.15.1
> npm -v
6.4.1
インストールして上記のコマンドが打てることを確認してください。
Express
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!の文字が表示できます。
コードを編集した場合は、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) {}の形式でも大丈夫です。
以下にたくさんのサンプルがあります。
-
パラメータの渡し方
-
URLの正規表現 なども書いてあります。
サーバを立ち上げ
app.listen(PORT, HANDLER)
const port = 3000
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
ポート3000でサーバを立ち上げています。 数値は空いているポートなら80でも8080でも立ち上げることができるため、複数台立ち上げる時はずらして下さい。