読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

初心者向け | Node.js用 RESTful Webアプリケーションフレームワーク Express を理解する

Express Node.js JavaScript

f:id:mochizuki_p:20170114183919p:plain

Expressとは?

サーバーサイドで動作するJavaScriptとして定評のあるNode.js上で動作するRESTfulフレームワークです。 ExpressはNode.jsでのWebアプリケーション開発において王道とされています。

特徴

  • RESTful
  • 簡潔性
  • MEANスタック
  • 柔軟性

また、HTMLやCSSの設計を容易にするテンプレートエンジンも数ある中から柔軟に選択することができます。

たとえば、HTMLのテンプレートであれば、jadeやejs,haml,ectなどから選択でき、CSS開発でもsass,lessなどが選択できます。もちろんプレーンのCSSの利用も可能です。

適切なプラグインを選択することで、ルーティングやセッション管理などのWebアプリに必須となる機能を容易に追加することが可能です。

MongoDBなどのNoSQLやMySQL,MariaDBなどのRDBMSとの連携も容易となっており、セッション管理に利用することも可能です。(デフォルトではメモリ上で管理する)

同様にReactやAngularJSなどで作成したデータをクライアントサイドで処理するアプリケーションとの連携も容易です。

つまり、ブラウザ側にデータの処理を担わせて、Expressにはデータの送信・振り分けを行う役割を持たせることもできます。(REST API)

また、ミドルウエアとしての機能を使用し、Expressの機能を独自に拡張することもできます。

2015年現在、バージョン4が主流となっており、Node.jsでMVCフレームワークといえば一番に名前が挙がるほどメジャーなフレームワークです。

RESTful

Expressの設計思想はRESTfulです。

その仕組みはRubyで人気のあるRESTfulフレームワーク・Sinatraに非常に似ており

ルーティングの流れが非常にわかりやすくなっています。

もしフレームワークを使用しないとなると、RESTfulアプリケーションの開発には、正規表現を利用してURLとPathを解析する必要があります。

これは非常に面倒な作業です。

例を挙げてみましょう

Twitterのようなマイクロブログを考えてみます。このとき、ユーザー名とそのユーザーが送信した特定のメッセージを取得したいとします。

このときREST APIは以下のような内容を解析する必要があります。

https://microblog.com/user/USER_ID/item/MESSAGE_ID

この場合であればREST APIが解析する必要がある情報は以下のようになります。

  • クライアントはユーザーの情報を求めているか?それとも別の情報を求めているのか?
  • クライアントはどのユーザーを指定しているか?
  • クライアントはユーザーの何の情報を求めているのか?
  • その情報は具体的にどのアイテムなのか?

このような細かい分岐条件を正規表現で解析するとなると非常に難しくなることが予測できます。

簡潔性

しかし、ExpressのようなRESTfulフレームワークを使用すると以下のような簡単な形式で記述できます。

router.get("/user/:user_id/item/:message_id",(req, res, next)=>{

 // データを取得する
 // req.params.user_id  にパスの:user_idの内容が
 // req.params.message_id にパスのmessage_idの内容が入る

})

たとえば、このアプリケーションがhttp://hoge.comで動作しているとします。

このとき

http://hoge.com/user/fuga/item/7fc765f8e156abcf47e86b3c888688ad

にアクセスすると

req.params.user_id

には

fuga

req.params.message_id

には

7fc765f8e156abcf47e86b3c888688ad

が入ります。

これがデータベースのフィールドに関連付けてあれば、この情報から一意のデータを取得することが容易に可能でしょう。

柔軟性

Expressのパス部分には正規表現を利用することも可能です。

たとえば、データベースのIDが16進数形式で指定されている場合に、その規格に沿ったパスだけを通したい場合には、以下のようにするとよいでしょう。

app.get("/:id([0-9a-f]+)",function (req, res) {
    res.send(req.params.id);
});

この場合では

7fc765f8e156abcf47e86b3c888688ad

にはマッチしますが

f:id:mochizuki_p:20170114183146p:plain

&&ls

のような形式にはマッチしません

f:id:mochizuki_p:20170114183142p:plain

このように柔軟にパターンマッチングを設定することができ、機能が豊富なREST APIを簡単に作ることができるのがExpressの魅力です。

MEANスタック

高性能のサーバーサイドJavaScriptであるNode.jsと、クライアントサイドでのSPAライブラリであるAngularJS、そして、NoSQLの一種であり、JSON形式でデータを保存することができ、JavaScriptをメインで利用するWeb開発と非常に相性が良いデータベースのMongoDBがあります。これらを組み合わせた開発手法であるMEANスタックは海外では非常に人気があります。

実際にやってみる

それでは実際にExpressアプリケーションを作成してみましょう。

ExpressはNode.js上で動作するフレームワークです。

もしNode.jsをダウンロードしていない場合は以下を参考に導入してください。

最初にExpressをダウンロードします。

sudo npm install express -g

オウム返しサーバーを書く

そして、以下のファイルを作成してみてください。

server.js

var express = require("express");
var http = require('http');
var app = express();

http.createServer(app).listen(3000, '127.0.0.1');

app.get("/:id",function (req, res) {
    // req.params.id にlocalhost:3000/*** で指定されたパスが格納される
    //plain/text を送信
    res.send(req.params.id);
});

そしてサーバーを起動します。

node server.js

そして起動したlocalhostのポート3000番にアクセスします。

パスに内容に応じて出力値が変わる

hogeを入力

f:id:mochizuki_p:20170114182156p:plain

結果

f:id:mochizuki_p:20170114182201p:plain

Helloを入力

f:id:mochizuki_p:20170114182204p:plain

結果

f:id:mochizuki_p:20170114182206p:plain

とパスの内容に応じてreq.params.idを取得することができます。

これがRESTfulなWebサービスの基本です。

もっと本格的なWebアプリケーションを書く

もっと本格的なWebサービスを作るにはどうすればよいのでしょうか?

一般的にWebアプリケーションは3つの要素に分離して設計するとよいとされています。

  • M - Model
  • V - View
  • C - Controller

そして当然ですが、Webアプリケーションは複数のフレームワークやライブラリから構成されています。

それらを一からビルドするのは非常に面倒なことです。Expressでは任意のプロジェクトを簡単に始めることができるモジュール、つまり雛形生成ツールがあります。

機能が多いのは

Yeoman

というツールですが、

初心者の方にはexpress-generatorを使用すべきでしょう。express-generatorを利用するにはグローバル・インストールをする必要があります。

sudo npm install express-generator -g

以下の記事ではいよいよテンプレートエンジンのejsを使ったExpressアプリケーションの作成を始めます。

www.utali.io