ゼロから始めるNode.js ～環境構築編～

node.jsを始めたいという諸兄に送るゼロから始める環境構築

OS : CentOS 6.6 (32bit)
Memory : 4GB
CPU : i3-3217U @ 1.80GHz
過去お正月の特売で手に入れたIntel NUCを開発環境にしてます。

# node.jsバージョン管理ソフトのインストール

node.jsは今現在も開発が進んでおり未だリリースバージョンではないので開発者の皆様は導入された方が懸命であるかと思います。
2015年6月現在で個人的に知ってるのは以下のあたり。

* [nvm](https://github.com/creationix/nvm)
* [nodebrew](https://github.com/hokaccha/nodebrew)
* [nave](https://github.com/isaacs/nave)

バージョン管理ソフトは色々ありますが今回はnvmで進めます。
bashならnvmで足りるがzsh環境だとnodebrewのほうが良いという記事を見かけました。
その辺は環境に合わせてください。

## nvm

先ほどの[nvmのgithub](https://github.com/creationix/nvm)へアクセスするとインストールは以下のコマンドをたたけと言われるので実行。

```
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash
```
ユーザディレクトリに.nvm/というgitレポジトリがクローンされてるはずです。
出来てなかったら以下のコマンドでcloneしましょう。

```
$ git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags` 
```

nvm コマンドを使うにはレポジトリ内のnvm.shをsourceしとく必要があります。
.bash_profileあたりに突っ込んどくと意識しないで楽なので突っ込んどきましょう

```
$ echo 'source ~/.nvm/nvm.sh' >> ~/.bash_profile
```

これでログインしなおせばnvmコマンドが使えるようになりました。

### Node.jsのインストール可能なバージョンを確認する
```
$ nvm ls-remote
        v0.1.14
        v0.1.15
        v0.1.16
        v0.1.17
        v0.1.18
~~~~~~~~~~~略~~~~~~~~~~~~~~~~~
        v0.12.2
        v0.12.3
->      v0.12.4
        v0.12.5
    iojs-v1.0.0
    iojs-v1.0.1
    iojs-v1.0.2
    iojs-v1.0.3
    iojs-v1.0.4
```
今現在使っている環境ではv0.12.4を使用してるのでマークついてます。
これ書いてる間に最新版の0.12.5がリリースされたようですガッデム。

### インストールしてみる
```
$ nvm install v0.12
######################################################################## 100.0%
Now using node v0.12.5 (npm v2.11.2)
```

マイナーバージョンをフルで入れなくても自動的にlatestを入れる仕様

### インストール済みの状況を確認する

```
$ nvm ls
        v0.8.18
       v0.11.13
        v0.12.2
        v0.12.4
->      v0.12.5
default -> stable (-> v0.12.5)
node -> stable (-> v0.12.5) (default)
stable -> 0.12 (-> v0.12.5) (default)
unstable -> 0.11 (-> v0.11.13) (default)
iojs -> iojs- (-> N/A) (default)
```
->のついてるのが今現在使用してるnodeのバージョンです

### nodeのバージョンを切り替える
```
$ nvm use v0.12.4
Now using node v0.12.4 (npm v2.10.1)
$ nvm ls
        v0.8.18
       v0.11.13
        v0.12.2
->      v0.12.4
        v0.12.5
default -> stable (-> v0.12.5)
node -> stable (-> v0.12.5) (default)
stable -> 0.12 (-> v0.12.5) (default)
unstable -> 0.11 (-> v0.11.13) (default)
iojs -> iojs- (-> N/A) (default)
```

### 次回以降のデフォルト起動を安定版にする
```
$ nvm alias default stable
default -> stable (-> v0.12.5)
```
このdefaultというエイリアスをstable設定しておくと新しくinstallしたりしても次回接続した時には安定版の最新を見るようになります。
また開発時に常にあるバージョンを開発の起点にしたい場合は`$ nvm alias default v0.12.4`のようにstableのところを任意のバージョンにしましょう。

# Node.js で Hello World!
以下のようなjsファイル作ってみましょう。

``` js:hello.js
var hello = "Hello World!";
console.log(hello);
```

実行してみます。

```
$ node hello.js
Hello World!
```

**YEAH!　HELLO WORLD!!!!**

そんなテンションあがるわけねーですね？
じゃ次いこーやっとこ本題。

# Node.js フレームワークを使ってサクサクWEBアプリ作る

現代ではjQueryやらbootstrapだとかサーバとのやりとりを仲介してよろしくやってくれるライブラリが出てたりします。
上記のライブラリ、使ったことある人はわかるかと思うのですがJavascriptなのでサーバとのやりとりではJSONが多いです。
そうなるとサーバ側も受け取る際にパース面倒くせーとか出力するときもパース面倒くせーってなります。

そんな面倒なところを一手に制御してくれて便利ーなフレームワークで今回オススメしたいのはこちらです。

## Express

Node.jsを調べると大体このフレームワーク出てきます。
前述のようにjQueryがやりとりするrestfullなAPI作るのを目的としていたらこれほど導入が簡単なフレームワークはないと思います。

### expressひな形作成ツールのインストール
nodeのインストールできてれば難しいことはないですね
最低限のひな形が出来てて便利！ってことで以下のツールをグローバルオプション`-g`をつけてインストールしちゃいましょう。

```
$ npm install -g express-generator
```

### ひな形を作ってみる

```
$ express hello

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

   install dependencies:
     $ cd hello && npm install

   run the app:
     $ DEBUG=hello:* npm start
```

helloってディレクトリができますがとりあえず指示にしたがって必要なパッケージのインストールを行います。

```
$ cd hello && npm install
```

npm install する際に何も指定しなければカレントディレクトリにあるpackage.jsonというファイルを読んで必要なモジュール類をnode_modulesに入れてくれます。
これで実行する準備が整いました。
実行してみましょう

```
$ DEBUG=hello:* npm start

> hello@0.0.0 start /root/hello
> node ./bin/www

  hello:server Listening on port 3000 +0ms
```

はい、起動できちゃいました。
起動してるサーバの3000ポートにブラウザでアクセスしてみましょう！

![capture-20150626-155929.png](https://qiita-image-store.s3.amazonaws.com/0/81557/57e4f65f-59ba-191a-40a2-332cb7759fb1.png)

出ました？出ちゃいました？
これでWebアプリ作る準備が整っちゃいました！
あとは煮るも焼くも自由です。

### このアプリを削除しよう

そう思ったら先ほど`$ express hello`で作ったhelloディレクトリをポーイしましょう

```
$ rm -rf hello
```

どう？簡単でしょ？（どっかの画家風に

## expressの構成を簡単に説明

express-generatorで作ると以下のような構成になってます。

```
$ ll
合計 28
-rw-r--r--  1 user user 1430  6月 26 15:54 2015 app.js
drwxr-xr-x  2 user user 4096  6月 26 15:54 2015 bin
drwxr-xr-x 10 user user 4096  6月 26 15:57 2015 node_modules
-rw-r--r--  1 user user  323  6月 26 15:54 2015 package.json
drwxr-xr-x  5 user user 4096  6月 26 15:54 2015 public
drwxr-xr-x  2 user user 4096  6月 26 15:54 2015 routes
drwxr-xr-x  2 user user 4096  6月 26 15:54 2015 views
```

#### bin/www

binの中にはwwwしか入ってません。Webサーバ起動用のファイルです
`$ npm start`でこのファイルを起動しています。

#### app.js

本体。
bin/wwwで起動した直後走るファイルでこのあたりで起動用のシーケンスなど書き込みます。
またここで各uriなど振り分け先を書いときます。
つまり各uriでの実際の動作はroute/*.jsに書く形になります。

#### node_modules

インストールされたライブラリ郡。
開発していく上で`$ npm install ****`するとこのディレクトリに格納されます。
階層を意識せずに`require('モジュール名')`で呼び出せるので楽ちん

#### package.json

npm が参照したりするファイル。
`npm start`で実行されるコマンドがここに書いてある。
複雑なコマンドもここに書いてしまえば`npm start`で一発起動！便利！

#### public

クライアント側で参照するファイル群。
jQueryみたいなライブラリとか表示したい画像とか。

#### routes

各URIで実行するサーバ側での処理を書いたファイル群
`/hoge.json`にアクセスしたらDBのテーブル情報をjsonにして返すとかそういうURIごとに違う細かい処理を書くところ

#### views

HTMLテンプレートのファイル群が格納されます。
express-generatorの初期設定ではJadeと呼ばれるHTMLテンプレートエンジンが使用されています。
Jadeはテンプレートエンジンとしては最遅らしい分書きやすさなどが良い感じです。





# 終わりに

かなり駆け足で勧めさせて頂きました。
まずは下準備。
次にプログラムとかかければいいなーと思います。