Node.js + ExpressでREST API開発を体験しよう for Windows［準備編］

# <i class="fa fa-cubes" style="font-size:1em;"></i> はじめに
これからREST APIを作ってみようと思っているけど、どこから手を付けようか考えている人向けに、Node.js + Expressを使って、簡単なAPIを作る手順をまとめました。

APIを作るのであれば、phpでもJavaでも何でも良いですが、メモ帳で作れるので**仕事の開発環境に影響せず**、10分程度で動くものが**ラクに作れる**事から、試しにREST APIを作ってみる分にはNode.js + Expressを推奨します。

ちなみに、今回はWindows7を使って紹介していますが、Macでも基本的に同じです。

すでに準備ができている人は、作成編でAPIを作成してみましょう。
[Node.js + ExpressでREST API開発を体験しよう［作成編］](http://qiita.com/tamura_CD/items/e3abdab9b8c5aa35fa6b "作成編")

### <i class="fa fa-cube" style="font-size:1em;"></i> 使う道具

#### Node.js（Ver.6.9.1）
https://nodejs.org/ja/ 
サーバー側でJavascriptを動かす環境。
クライアント側でJavascriptを動かす環境であるブラウザとは、色々と違います。

#### npm（Ver.3.10.8）
https://www.npmjs.com/
node package manager。
Node.jsに追加できる様々なパッケージを管理するアプリケーション。
Node.jsと一緒にインストールされます。

#### Express（Ver.4.14.0）
http://expressjs.com/ja/
Node.js上で動作する、MVCフレームワーク。
WebアプリやAPIを作るなら、Expressを使った方が圧倒的に早いです。

#### express-generator
http://expressjs.com/ja/starter/generator.html
Expressを利用したアプリケーションの雛形を生成してくれる、Node.js向けパッケージ。
コマンドを叩くだけで、動くアプリが一瞬で生成されます。

# <i class="fa fa-cubes" style="font-size:1em;"></i> Node.jsの準備

## <i class="fa fa-cube" style="font-size:1em;"></i> Node.jsのインストール

下記サイトでインストーラをダウンロードします。
https://nodejs.org/ja/download/

![image07.png](https://qiita-image-store.s3.amazonaws.com/0/38099/4b454c57-22db-a4e0-8694-f9d1cd293933.png)

インストーラを起動して、画面に従って [Next] ボタンをクリックして進めます。
![image02.png](https://qiita-image-store.s3.amazonaws.com/0/38099/c02c9dd5-07af-6f24-310a-81bbe56eefee.png)

チェックボックスにチェックを入れて、 [Next] ボタンをクリックします。
![image03.png](https://qiita-image-store.s3.amazonaws.com/0/38099/933233e4-7220-fda7-d4d1-8f3bec034ad6.png)

任意のフォルダを選択して [Next] ボタンをクリックします。
![image14.png](https://qiita-image-store.s3.amazonaws.com/0/38099/14f451bb-38d0-7a4c-64e1-d73be9902a28.png)

「node.js」本体と、「npm」が選択されています。
特に変更せずに、 [Next] ボタンをクリックします。

![image05.png](https://qiita-image-store.s3.amazonaws.com/0/38099/7e14c280-d371-3117-7e74-c31006feaff1.png)

 [Install] ボタンをクリックします。
![image04.png](https://qiita-image-store.s3.amazonaws.com/0/38099/93ee077b-68b4-5bf7-e4ac-fb36068f07f0.png)

インストールが終わるまで待ちます。
![image06.png](https://qiita-image-store.s3.amazonaws.com/0/38099/11873557-7a2a-0256-5a3d-fa4c24dbd84c.png)

 [Finish] ボタンをクリックします。
これでインストールは完了です。
![image17.png](https://qiita-image-store.s3.amazonaws.com/0/38099/72da9aa1-aa04-d0c8-8eb7-87a1266fc2a0.png)

## <i class="fa fa-cube" style="font-size:1em;"></i> インストール完了の確認

Node.jsが正常にインストールされたか確認します。
コマンドプロンプトを起動して、`node -v`と入力します。
バージョンが表示されたら正常にインストールされています。
同様に、`npm -v`と入力して、npmが正常にインストールされているか確認しましょう。
![image12.png](https://qiita-image-store.s3.amazonaws.com/0/38099/4e5fe33c-dd40-86fd-b420-d4b33ccfbd72.png)

# <i class="fa fa-cubes" style="font-size:1em;"></i> Expressの準備

## <i class="fa fa-cube" style="font-size:1em;"></i> Expressのインストール

まずはExpressをインストールします。

コマンドプロンプトで、`npm install -g express`と入力します。
Expressのグローバルインストールが開始されます。

    -g オプションを付けないと、現在のフォルダ配下のみにインストールされます。
    システム全体にインストールするために、必ず付けて下さい。
![image00.png](https://qiita-image-store.s3.amazonaws.com/0/38099/ea28c458-bc06-5c84-f947-8da5ee58fcc9.png)

こちらも、正常にインストールされたか、`express --version`と入力して確認しましょう。
![001.png](https://qiita-image-store.s3.amazonaws.com/0/38099/7bd6f345-c179-290a-663e-3a9e3abecbf9.png)


## <i class="fa fa-cube" style="font-size:1em;"></i> express-generatorのインストール

次に、express-generatorをインストールします。

コマンドプロンプトで、`npm install -g express-generator`と入力します。
express-generatorがインストールされます。
![image18.png](https://qiita-image-store.s3.amazonaws.com/0/38099/9bd94201-594a-16cc-7f26-9c8bcf5572b7.png)

## <i class="fa fa-cube" style="font-size:1em;"></i> アプリの雛形の生成

express-generatorがインストールできたら、アプリの雛形を生成してみましょう。
コマンドプロンプトで、`express myapp`と入力します。
![image09.png](https://qiita-image-store.s3.amazonaws.com/0/38099/83bf2418-07bc-353f-9fa8-094cbd680897.png)

myappというプロジェクトフォルダと、各種ファイルが生成されます。
![image10.png](https://qiita-image-store.s3.amazonaws.com/0/38099/6c3f5650-48d7-c597-d5cb-c8f2dc96e4ea.png)

![image08.png](https://qiita-image-store.s3.amazonaws.com/0/38099/93f1d5f2-0c60-8880-e13f-a5cca972244d.png)

この状態では、まだmyappアプリは動きません。
アプリを動かすために必要なパッケージをインストールしましょう。

必要なパッケージは、myappフォルダにある、package.jsonの中に最初から記載されています。
コマンドプロンプトでmyappフォルダに移動して、`npm install`と入力します。
npmがpackage.jsonを見て、必要なパッケージをインストールしてくれます。
![image01.png](https://qiita-image-store.s3.amazonaws.com/0/38099/a157e38f-9802-283a-f52b-80b98e838e6b.png)

node_modulesフォルダが作られた事を確認しましょう。
![image16.png](https://qiita-image-store.s3.amazonaws.com/0/38099/bb37f6e0-01f3-8b2c-858d-8298a024c680.png)

これで、myappアプリを動かす準備ができました。

## <i class="fa fa-cube" style="font-size:1em;"></i> アプリの起動確認

コマンドプロンプトで、myappフォルダの中で`npm start`と入力します。
Node.jsが起動して、myappが動きます。
![image15.png](https://qiita-image-store.s3.amazonaws.com/0/38099/1a6f6fa7-0276-03fe-decc-c2b072c65e4c.png)

ブラウザで http://localhost:3000/ にアクセスします。
「Welcome to Express」という画面が表示される事を確認しましょう。
![image13.png](https://qiita-image-store.s3.amazonaws.com/0/38099/be5207f0-598c-ab3d-681c-95b57327cf26.png)

続いて、 http://localhost:3000/users にアクセスします。
「respond with a resource」という画面が表示される事を確認しましょう。
![image11.png](https://qiita-image-store.s3.amazonaws.com/0/38099/9c17811f-1c5a-97c3-014e-347da251155b.png)

ブラウザで実行するとピンと来ないかもしれませんが、**これはREST APIです。**
usersというエンドポイントに、GETメソッドのリクエストを送ると、"respond with a resource"という文字列をレスポンスとして返すAPIです。

これで、APIを作る準備は完了です。

## <i class="fa fa-cube" style="font-size:1em;"></i> Node.jsの停止

Node.jsを停止する時は、コマンドプロンプトでCtrl + C で停止できます。
![image15.png](https://qiita-image-store.s3.amazonaws.com/0/38099/ab1d0d52-48df-0d33-4ed6-2df2333a26e6.png)

# <i class="fa fa-cubes" style="font-size:1em;"></i> npmの補足説明

npmはパッケージを管理するために、さまざまな機能が用意されています。
今回の作業で使用した、npmのコマンドについて簡単に説明します。

### `npm -v`
npmのバージョンを確認します。
`npm -version`でもOKです。

### `npm install (パッケージ名)`
npmが管理しているパッケージをインストールします。
-g オプションを付けると、システム全体にインストールされます。
付けない場合は、選択しているプロジェクトフォルダのみにインストールされます。
`npm -i`でもOKです。

### `npm install `
選択しているプロジェクトフォルダのpackage.jsonに書かれている全てのパッケージを、プロジェクトにインストールします。

```json:package.json
{
  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {            // ← dependencies 以下のパッケージがインストールされます。
    "body-parser": "~1.15.2",  //   横の数字はバージョンです。
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "express": "~4.14.0",
    "jade": "~1.11.0",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0"
  }
}
```

### `npm start`
package.jsonのscriptsにはコマンドを登録する事ができます。
登録したコマンドは`npm run （登録名）`で実行する事ができます。
ただし、"start"のような一部の予約語は、`run`を省略する事ができます。

今回の`npm start`は、`node ./bin/www`というコマンドが実行されます。
これはNode.jsの起動コマンドで、wwwファイルには、メインファイルであるapp.jsをhttp://localhost:3000/ で起動する旨が書かれています。

```json:package.json
{
  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {            // ← start という名称でコマンドが登録されています。
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.15.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "express": "~4.14.0",
    "jade": "~1.11.0",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0"
  }
}
```

# <i class="fa fa-cubes" style="font-size:1em;"></i> まとめ

以上で準備は完了です。
次のページで、実際にAPIを作成してみしましょう。

[Node.js + ExpressでREST API開発を体験しよう［作成編］](http://qiita.com/tamura_CD/items/e3abdab9b8c5aa35fa6b "作成編")