MacにNode.jsとExpressの環境を作る

nvm

Node Version Manager(nvm)を使ってnode環境を用意します

install

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

~/.bashrcに以下のコマンドが追加される

export NVM_DIR="/Users/okisanjp/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

.nvmが作成される

[okisanjp@mbp13 ~]$ ll .nvm/
total 240
-rw-r--r--  1 okisanjp  staff    763  1 30 11:00 CONTRIBUTING.md
-rw-r--r--  1 okisanjp  staff   1084  1 30 11:00 LICENSE.md
-rw-r--r--  1 okisanjp  staff   5212  1 30 11:00 Makefile
-rw-r--r--  1 okisanjp  staff  11087  1 30 11:00 README.markdown
-rw-r--r--  1 okisanjp  staff   1846  1 30 11:00 bash_completion
-rwxr-xr-x  1 okisanjp  staff   7750  1 30 11:00 install.sh
-rwxr-xr-x  1 okisanjp  staff    310  1 30 11:00 nvm-exec
-rwxr-xr-x  1 okisanjp  staff  70948  1 30 11:00 nvm.sh
-rw-r--r--  1 okisanjp  staff   1473  1 30 11:00 package.json
drwxr-xr-x  9 okisanjp  staff    306  1 30 11:00 test

ここに色々まとまって入るようです

shellを読み込み直す

.bashrcを読みなおしておきます

exec $SHELL -l

nvmコマンドの確認

[okisanjp@mbp13 ~]$ nvm --version
0.30.2

使えるようになりました

Node.jsのインストール

nvmが使えるようになったので任意のバージョンのNode.jsをインストールします

インストール可能なバージョンの確認

[okisanjp@mbp13 ~]$ nvm ls-remote
        v0.1.14
        v0.1.15
.
.
.
v0.10.40

インストール

[okisanjp@mbp13 ~]$ nvm install v4.2
Downloading https://nodejs.org/dist/v4.2.6/node-v4.2.6-darwin-x64.tar.gz...
######################################################################## 100.0%
WARNING: checksums are currently disabled for node.js v4.0 and later
Now using node v4.2.6 (npm v2.14.12)

確認

[okisanjp@mbp13 ~]$ node -v
v4.2.6

[okisanjp@mbp13 ~]$ nvm ls
->       v4.2.6
         system
node -> stable (-> v4.2.6) (default)
stable -> 4.2 (-> v4.2.6) (default)
iojs -> N/A (default)

nvm use

使うバージョンを明示するにはnvm useを使う

[okisanjp@mbp13 ~]$ nvm use v4.2.6
Now using node v4.2.6 (npm v2.14.12)

幾つかのバージョンを切り替えるときに便利ですね

Expressを入れる

[okisanjp@mbp13 ~]$ npm install -g express-generator
/Users/okisanjp/.nvm/versions/node/v4.2.6/bin/express -> /Users/okisanjp/.nvm/versions/node/v4.2.6/lib/node_modules/express-generator/bin/express
express-generator@4.13.1 /Users/okisanjp/.nvm/versions/node/v4.2.6/lib/node_modules/express-generator
├── sorted-object@1.0.0
├── commander@2.7.1 (graceful-readlink@1.0.1)
└── mkdirp@0.5.1 (minimist@0.0.8)

以前と違い、express-generatorというものでインストールするようになった模様です

Expressでアプリを作ってみる

サンプルアプリを作ってブラウザから確認してみます

任意のワークディレクトリでアプリを作成

私は~/workspaceに色々作っているのでそこで実行しました

[okisanjp@mbp13 ~]$ cd ~/workspace/
[okisanjp@mbp13 ~/workspace]$ express testapp

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

   install dependencies:
     $ cd testapp && npm install

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

フレームワークっぽい感じで雛形ができてるみたいですね

起動してみる

cd testappでアプリディレクトリへ移動し、npm installで依存ファイルをインストール

[okisanjp@mbp13 ~/workspace]$ cd testapp && npm install


debug@2.2.0 node_modules/debug
└── ms@0.7.1

cookie-parser@1.3.5 node_modules/cookie-parser
├── cookie@0.1.3
└── cookie-signature@1.0.6
.
.
.

ずらずらっとインストールされました

サーバーを起動してみる

[okisanjp@mbp13 ~/workspace/testapp]$ DEBUG=testapp:* npm start

> testapp@0.0.0 start /Users/okisanjp/workspace/testapp
> node ./bin/www

  testapp:server Listening on port 3000 +0ms

スクリーンショット 2016 01 30 11 17 10

やったー

テンプレートをいじってみる

詳しい勉強はおいおい・・・とりあえずテンプレートをちょこっといじってみます

[okisanjp@mbp13 ~/workspace/testapp]$ ll views
total 24
-rw-r--r--  1 okisanjp  staff   84  1 30 11:12 error.jade
-rw-r--r--  1 okisanjp  staff   66  1 30 11:12 index.jade
-rw-r--r--  1 okisanjp  staff  125  1 30 11:12 layout.jade

jadeというテンプレートエンジンがデフォルトのようです

Viewに新しい変数を渡してみる

お約束のメッセージを追加。index.jsとそれに対応するviewに追記

[okisanjp@mbp13 ~/workspace/testapp]$ git diff .
diff --git a/routes/index.js b/routes/index.js
index ecca96a..496e391 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -3,7 +3,7 @@ var router = express.Router();

 /* GET home page. */
 router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Express' });
+  res.render('index', { title: 'Express', oyakusoku: 'Hello World!' });
 });

 module.exports = router;
diff --git a/views/index.jade b/views/index.jade
index 3d63b9a..3b8ff88 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -3,3 +3,5 @@ extends layout
 block content
   h1= title
   p Welcome to #{title}
+  h2= oyakusoku