皆さんこんばんわ。最近は暑い日が続いておりますが、いかがでしょうか？
僕はもう暑さんにうんざりしています。
さて、こんな暑い日は部屋に引きこもってエアコンの涼しさを感じつつコードを書くのが一番良いかと思います。
ということで、前々からちょこちょこ触っていましたが、真剣にnodejs触っていこうかと思います。
とうことで今回は準備から。
※今回はnodeをインストールしていてnpmが実行できる環境になっている事を想定しています。
まずはexpress3を用意しましょう。
expressのひな形生成
1
|
$ express --sessions --css sass memo
|
ひな形を生成したら、その後はpackage.jsonを修正します。
今回はQとnode-devとmongooseを使いたいので以下のように記述しましょう
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app"
},
"dependencies": {
"express": "3.1.0",
"jade": "*",
"sass": "*",
"q": "*",
"node-dev": "*",
"mongoose": "*"
}
}
|
さて、これであとはnpm installをするだけ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
cd memo
$ npm install
...
q@0.9.6 node_modules/q
sass@0.5.0 node_modules/sass
node-dev@2.0.2 node_modules/node-dev
├── growl@1.7.0
├── dateformat@1.0.6-1.2.3
└── chokidar@0.6.2
express@3.1.0 node_modules/express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie-signature@0.0.1
├── buffer-crc32@0.1.1
├── cookie@0.0.5
├── debug@0.7.2
├── commander@0.6.1
├── mkdirp@0.3.3
├── send@0.1.0 (mime@1.2.6)
└── connect@2.7.2 (pause@0.0.1, bytes@0.1.0, formidable@1.0.11, qs@0.5.1)
jade@0.34.1 node_modules/jade
├── character-parser@1.0.2
├── mkdirp@0.3.5
├── commander@1.3.2 (keypress@0.1.0)
├── with@1.1.0 (uglify-js@2.3.6)
├── constantinople@1.0.1 (uglify-js@2.3.6)
├── transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)
└── monocle@0.1.50 (readdirp@0.2.5)
mongoose@3.6.15 node_modules/mongoose
├── regexp-clone@0.0.1
├── sliced@0.0.3
├── muri@0.3.1
├── hooks@0.2.1
├── mpath@0.1.1
├── ms@0.1.0
├── mpromise@0.2.1 (sliced@0.0.4)
└── mongodb@1.3.11 (bson@0.1.9, kerberos@0.0.3)
|
こんなにも簡単にライブラリを揃えることができました。
nodeって素敵ですね。まあPHPにもComposerありますけどね。
とりあえず起動してみる
さて、無事にライブラリも入ったところでとりあえずnodeを立ち上げましょう
1
2
|
$ node app.js
Express server listening on port 3000
|
はいあとはブラウザで、
http://localhost:3000
にアクセスすればとりあえず起動できます。
まずはbootstrap使った見た目の調整
せっかくbootstrap3 RC1来たし、ちょっと先に見た目の調整してみましょうということで、やってみます。
まずは、layoutファイルを作りましょう。
views/layouts/base.jade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
doctype 5
html(lang="ja")
head
title #{title}
meta(charset="utf8")
link(rel="stylesheet",href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css")
block stylesheets
body
block header
block content
block footer
script(scr="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js")
block javascripts
|
jade本当に便利ですよね。PHPだとtwigに慣れてると結構使い易いのかもしれません。概念的には似ているので。
ただし、jadeのほうが行数が減って嬉しいですw
で、ベースとなるjadeが完成したら、それを継承させてindex.jadeを改良してみましょう。
views/index.jade
1
2
3
4
5
6
|
extends layouts/base.jade
block content
h1= title
p Welcome to #{title}
span(class="label label-success") hoge
|
簡単にjadeの説明をすると、継承型のテンプレートエンジンになります。
blockを定義したファイルをextendsで継承して、ごりごり書いていく感じですね。
あとはタグの属性もPHP関数みたいな感じ？に書けるので僕は非常に書き易いです。
変数定義もできるし、ループも使えるし、そして、HTMLの要に忌々しい閉じた
ブラウザリロードすると動いているかと思います。
とりあえず今日はこの辺まで！また次回をお楽しみに！
