MacにExpressをインストールしてプロジェクト作成

今回はExpressでプロジェクトを作成してみる。

Expressとは

ExpressはNode.js向けに作られたシンプルなフレームワークだ。
僕は生のNode.jsでサーバーを立ち上げるのは冗長になるから嫌だなーという理由で使っている。

LoopBackというAPI作成に特化したフレームワークも一度考えた。
これを使えばセキュアなAPIがプログラミング無しで作成できる。
でも、情報が少ない上に、中身が複雑でいじるのが大変そうだった。

インストール

$ mkdir tutorial
$ cd tutorial
$ npm init
... 

いろいろ聞かれますが、全部EnterでOK。

$ npm install --save express 

これでインストールは完了です。

WEBサーバーを立ち上げてみる

Expressを使ってWEBサーバーを立ち上げ、「Hello World!」と表示してみよう。
app.jsを以下のように書き換える。

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

app.get('/', function (req, res) {
  res.send('Hello World!');
});

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

実行。

$ node app.js 

これでWEBサーバーが立ち上がった。
http://localhost:3000を開いてみよう。
「Hello World!」が表示されていたらOK。

Expressのメソッド

Expressの基本的な形式はapp.[method]([path], function(req, res){ });という形になっている。

主に使うルーティングのメソッドには

  • get
  • post
  • put
  • delete

がある。

先程の例で説明すると、「/」というパスに「GET」メソッドでアクセスがあったので、res.send('Hello World');を実行したということになる。

Express Generator

次に、Expressのプロジェクト雛形を作成するためのコマンドを使えるようにする。

$ npm install -g express-generator 

次にプロジェクトディレクトリを作成しよう。

$ express tutorial 

こんな感じの構成になっている。

$ tree tutorial
tutorial
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade

あとは依存パッケージをインストールして、雛形の完成。

$ cd tutorial
$ npm install 

では、表示を確認してみよう。

$ npm start 

上記のコマンドを入力したら、http://localhost:3000を開いてみよう。
このように表示されていたらOK。

ついでに、http://localhost:3000/usersを開いてみると、「respond with a resource」と表示されている。

ファイルの中身を少し見てみると、、、

app.js

...
var index = require('./routes/index');
var users = require('./routes/users');
...
app.use('/', index);
app.use('/users', users);
... 

routes/users.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

となっていて、routes/users.jsはパスが独立しているのが分かる。
試しにroutes/users.jsを以下のように変更を加えると、、、

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/user', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

先程、http://localhost/usersで表示されていたページがhttp://localhost/users/userで表示されるようになる。

参考

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です