nodejs入門、暑いからexpress3でメモアプリを作ろうその１準備編

皆さんこんばんわ。最近は暑い日が続いておりますが、いかがでしょうか？
僕はもう暑さんにうんざりしています。

さて、こんな暑い日は部屋に引きこもってエアコンの涼しさを感じつつコードを書くのが一番良いかと思います。
ということで、前々からちょこちょこ触っていましたが、真剣にnodejs触っていこうかと思います。

とうことで今回は準備から。
※今回はnodeをインストールしていてnpmが実行できる環境になっている事を想定しています。

まずはexpress3を用意しましょう。

npm install -g express

expressのひな形生成

$ express --sessions --css sass memo

ひな形を生成したら、その後はpackage.jsonを修正します。
今回はQとnode-devとmongooseを使いたいので以下のように記述しましょう

{
  "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をするだけ

cd memo
$ npm install

...
[email protected] node_modules/q

[email protected] node_modules/sass

[email protected] node_modules/node-dev
├── [email protected]
├── [email protected]
└── [email protected]

[email protected] node_modules/express
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/jade
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected])

[email protected] node_modules/mongoose
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected])

こんなにも簡単にライブラリを揃えることができました。
nodeって素敵ですね。まあPHPにもComposerありますけどね。

とりあえず起動してみる

さて、無事にライブラリも入ったところでとりあえずnodeを立ち上げましょう

$ node app.js
Express server listening on port 3000

はいあとはブラウザで、

http://localhost:3000

にアクセスすればとりあえず起動できます。

まずはbootstrap使った見た目の調整

せっかくbootstrap3 RC1来たし、ちょっと先に見た目の調整してみましょうということで、やってみます。
まずは、layoutファイルを作りましょう。

views/layouts/base.jade

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

extends layouts/base.jade

block content
  h1= title
  p Welcome to #{title}
  span(class="label label-success") hoge

簡単にjadeの説明をすると、継承型のテンプレートエンジンになります。
blockを定義したファイルをextendsで継承して、ごりごり書いていく感じですね。
あとはタグの属性もPHP関数みたいな感じ？に書けるので僕は非常に書き易いです。
変数定義もできるし、ループも使えるし、そして、HTMLの要に忌々しい閉じた

ブラウザリロードすると動いているかと思います。
とりあえず今日はこの辺まで！また次回をお楽しみに！

まずはexpress3を用意しましょう。

expressのひな形生成

とりあえず起動してみる

まずはbootstrap使った見た目の調整

カテゴリ