25
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【Node.js】Expressの導入とRESTサーバへの最初の一歩【定番フレームワーク】

Last updated at Posted at 2016-10-24

Node.jsでRESTサーバを作ろうとする場合の最初の一歩を踏み出すための情報をまとめました。

ちなみに、Mac OSX での開発環境の作成はこちらを参考にしてください。
[【macOS Sierra】Mac OSX 10.12 macOS Sierra にNode.js 開発環境の構築 【初心者必見】]
(http://qiita.com/keneo/items/08da941711a224b06700)

#環境整備
Node.jsをインストールした後、RESTサーバを構築するための環境整備をします。その際に「npm」を使用して必要なパッケージをインストールしたり、設定を行ったりします。

##npmとは?
npmはnode.jsのパッケージを管理するためのツールです。
Rubyで例えるとGemのようなものだと想像すると分かりやすいかと思います。

##Expressのインストール
Expressはコマンドとしても使用するのでグローバルインストールします。

$ npm install -g express-generator

###確認
expressコマンドが起動することを確認しましょう。

$ express --version
4.13.4

尚、Express3の時代によく使われていた「express-resource」と言うパッケージは、Expressを更に容易に使えるようにするものでしたが、Express4ではうまく動かないので、使用しません。

#プロジェクトの作成
##プロジェクト初期化
Node.jsのプロジェクトを初期化しましょう。任意のディレクトリを作成して、以下のコマンドで初期化されたプロジェクトを作成します。

$ mkdir api_sample
$ cd api_sample
$ npm init

上記コマンドを実行すると対話式にプロジェクトの設定を行っていきます。ここで決めれない場合、全てエンターを押していけば(後でも変更できるので)、問題ありません。

##Expressの導入
加えてExpressをプロジェクトで使用する宣言を行います。

$ express
destination is not empty, continue? [y/N] y

   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/users.js
   create : ./views
   create : ./views/index.jade
   create : ./views/layout.jade
   create : ./views/error.jade
   create : ./bin
   create : ./bin/www

   install dependencies:
     $ cd . && npm install

   run the app:
     $ DEBUG=api_sample:* npm start

この段階でpackage.jsonに依存パッケージを含めて下記のように設定されます。

{
  "name": "api_sample",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.15.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "express": "~4.13.4",
    "jade": "~1.11.0",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0"
  }
}

##パッケージのインストール
上記でプロジェクトの初期設定が行われたので、設定に基づいたパッケージのインストールを行います。(ちょっと時間がかかります)

$ npm install
npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer
api_sample@0.0.0 /Users/daisuke/Dev/Node/api_sample
├─┬ body-parser@1.15.2 
│ ├── bytes@2.4.0 

 :

│ └── on-headers@1.0.1 
└── serve-favicon@2.3.0 

#Node.jsの起動
最低限のプロジェクトが作成できたので、ちょっと動かしてみましょう。

$ npm start

> api_sample@0.0.0 start /Users/daisuke/Dev/Node/api_sample
> node ./bin/www

ここで、以下にアクセスするとExpressのWelcomeメッセージ画面が表示されます。
http://localhost:3000/

#Expressの使い方
##ルーティングとは
ルーティング とは、アプリケーションのエンドポイント(URI)と、クライアント要求に対するそれらの応答の定義のことです。

##変更例
すでにサンプル的なルーテイングとコントローラが用意されていますので、ちょっと変更してRESTの動作をさせてみます。
###app.js
エンドポイントと「ルータモジュール」をロードして、双方を結びつけます。

app.use('/api/v1/users', users);

###users.js
サンプルで提供されていたルータモジュール「users.js」を以下のようにRESTに対応した記述に変更します。

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

// ユーザのサンプルデータ
var userList = [
  {
    id: "1",
    name: "Daisuke",
  },{
    id: "2",
    name: "Mitsuru",
  }
]

// GET
router.get('/', function(req, res, next) {
  res.json(userList);
});

// POST
router.post('/', function (req, res) {
  res.json('POST '  + req.body.id + ' OK');
});

// PUT
router.put('/:id', function (req, res) {
  res.json('PUT '  + req.params.id + ' Change ' + req.body.name);
});

// DELETE
router.delete('/:id', function (req, res) {
  res.json('DELETE '  + req.params.id + ' OK');
});

module.exports = router;

##それぞれの記述方法と動作
GET, POST, PUT, DELETE のそれぞれの場合で、どのように記述するのか、パラメータはどうやって受け取るのかを確認して行ってください。

###GET
####ソースコード(users.js)

// ユーザのサンプルデータ
var userList = [
  {
    id: "1",
    name: "Daisuke",
  },{
    id: "2",
    name: "Mitsuru",
  }
]

// GET
router.get('/', function(req, res, next) {
  res.json(userList);
});

####動作

$ curl http://localhost:3000/api/v1/users
[
  {
    "id": "1",
    "name": "Daisuke Akimoto"
  },
  {
    "id": "2",
    "name": "Mitsuru Motomiya"
  }
]

###POST
####ソースコード(users.js)

// POST
router.post('/', function (req, res) {
  res.json('POST '  + req.body.id + ' OK');
});

####動作

$ curl http://localhost:3000/api/v1/users -X POST -d 'name=Megumi'
"POST Megumi OK"

###PUT
####ソースコード(users.js)

// PUT
router.put('/:id', function (req, res) {
  res.json('PUT '  + req.params.id + ' Change ' + req.body.name);
});

####動作

$ curl http://localhost:3000/api/v1/users/2 -X PUT -d 'name=Megumi' 
"PUT 2 Change Megumi"

###DELETE
####ソースコード(users.js)

// DELETE
router.delete('/:id', function (req, res) {
  res.json('DELETE '  + req.params.id + ' OK');
});

####動作

$ curl http://localhost:3000/api/v1/users -X POST -d 'name=Megumi'
"DELETE 3 OK"

上記でとてもシンプルなRESTサーバの基本部分ができました。後はこれを拡張して様々な目的のRESTサーバを作っていけると思います。


筆者参考

札幌圏でリモート開発、在宅勤務を中心としたシステム開発の会社を経営しています。

ローラハウス

25
31
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?