Sails.jsと触れ合ってみた


Sailsがどこまで人気かわからないんですが、同僚がSails使って面白い事していたので僕もつられてSails触ってみる事にしました。

## そもそもSailsとは？
SailsはNode.jsのフレームワークの一つです。
Node.jsのMVCフレームワークってSinatraっぽいフレームワークかrailsっぽいやつにわかれるんですが、Sailsは名前からも想像出来る通りRuby on Rails Likeなフレームワークです。

Node.jsのフレームワークの情報が知りたい人は以下のサイトを見ると良いかと思います。

[Node Frameworks](http://nodeframework.com/index.html#home)

## インストール
まあNode.jsなんでインストールは簡単なわけですよ。そうnpmを使うから。

```shell
sudo npm -g install sails
```

## プロジェクトを作成する
ほぼRailsとコマンドを一緒ですね。

```
$ sails new sailstest
debug: Building new Sails.js app in ./sailstest...

info: New app created!
```

## HTTPサーバーでアクセスしてみる
sailsは普通にliftというコマンドをたたけばHTTPサーバとして動くようです。

```
$ sails lift

info: Starting app...

info:
info:
info:    Sails              <|
info:    v0.10.5             |\
info:                       /|.\
info:                      / || \
info:                    ,'  |'  \
info:                 .-'.-==|/_--'
info:                 `--'-------'
info:    __---___--___---___--___---___--___
info:  ____---___--___---___--___---___--___-__
info:
info: Server lifted in `/Users/polidog/workspace/nodejs/sailstest3`
info: To see your app, visit http://localhost:1337
info: To shut down Sails, press <CTRL> + C at any time.

debug: --------------------------------------------------------
debug: :: Mon Nov 03 2014 10:23:26 GMT+0900 (JST)

debug: Environment : development
debug: Port        : 1337
debug: ----------------------------

```

あとはブラウザから「http://localhost:1337」にアクセスすれば表示されるはずです。
![スクリーンショット 2014-02-12 23.11.10.png](https://qiita-image-store.s3.amazonaws.com/0/2095/9f01a8cd-2bc6-ad11-0ff4-adcc23e1a1e4.png "スクリーンショット 2014-02-12 23.11.10.png")


まあここまではなら猿でもわかるわけですよ。ここからここから。

## 簡単にユーザー登録を作ってみる
コマンドラインからまずはcontrollerとmodelを生成します。

```shell
$ sails generate api user
$ sails lift
```
これでコントローラとモデルが`api/`ディレクトリの中に生成されます。
[http://localhost:1337/user/](http://localhost:1337/user/)に直接アクセスするとjsonを吐いてくれます。
さて、では次のようにアクセスしてみましょう。
[http://localhost:1337/user/create/?name=polidog](http://localhost:1337/user/create/?name=polidog)

するとどうなるでしょうか？
以下のようにjsのレポンスが帰ってくると思います。

```json
{
  "name": "polidog",
  "createdAt": "2014-02-12T14:59:48.492Z",
  "updatedAt": "2014-02-12T14:59:48.492Z",
  "id": 2
}
```

では再び[http://localhost:1337/user/](http://localhost:1337/user/)にアクセスしてみましょう。
次は登録されているはずなので以下のようなjsonを返します。

```json
[
  {
    "name": "polidog",
    "createdAt": "2014-02-12T15:02:00.797Z",
    "updatedAt": "2014-02-12T15:02:00.797Z",
    "id": 1
  }
]
```
![スクリーンショット 2014-02-13 0.02.53.png](https://qiita-image-store.s3.amazonaws.com/0/2095/4f085513-ff9b-e416-2705-d739f3eaec41.png "スクリーンショット 2014-02-13 0.02.53.png")


ちょー便利。何もしなくてもここまでできるのは素敵ですね。

## 適当にviewを表示してみる
まずはコントローラに追記をしてみましょう。

```api/controller/user.js
module.exports = {

  _config: {},

  test: function(req,res){
  	res.view();
  }
};
```

次にviewを作成します。

```views/user/test.ejs
test
```
これであとは[http://localhost:1337/user/test](http://localhost:1337/user/test)にアクセスしましょう。
すると以下のようなメッセージが表示されます。
![スクリーンショット 2014-02-13 0.13.33.png](https://qiita-image-store.s3.amazonaws.com/0/2095/587a0a96-b5cf-5618-c404-b508533e02b0.png "スクリーンショット 2014-02-13 0.13.33.png")

## jadeを使ってみる
どうです？簡単ですね？
え、jadeが使いたい？そうですね僕もjadeが使いたいです。ってことで試してみた。

### 1. まずは`config/views.js`のengineの値を変更する

```config/views.js
--engine: 'ejs',
++engine: 'jade',
```
### 2. 次にviews/layout.jadeを作成する
layout用のjadeを用意しましょう。

```views/layout.jade
!!! 5
head
  title New Sails App
  meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1")
  link(rel="stylesheet", href="/styles/importer.css")
  body
    <%- body %>

    script(src="";/js/dependencies/sails.io.jp)

```

### 3. views/homepage.jadeを用意する
こんな感じ。

```views/homepage.jade
div#hoge.container
	p これはテストです。
```

###  4. npm updateを行う
まずはpackage.jsonにjadeを追加

```package.json
{
    "name": "sailstest",
    "private": true,
    "version": "0.0.0",
    "description": "a Sails application",
    "dependencies": {
        "sails": "0.9.8",
        "grunt": "0.4.1",
        "sails-disk": "~0.9.0",
        "ejs": "0.8.4",
        "optimist": "0.3.4",
        "jade": "1.1.5"
    },
    "scripts": {
        "start": "node app.js",
        "debug": "node debug app.js"
    },
    "main": "app.js",
    "repository": "",
    "author": "polidog",
    "license": "MIT"
}
```

あとはnpm updateを行う

```
$ npm update
```

これだけ。

### 5.ブラウザで確認する
最後にブラウザで表示の確認をしてみましょう。
先ほどのと一緒の[http://localhost:1337/user/test](http://localhost:1337/user/test)にアクセスしましょう。
すると表示が以下のようになっています。

![スクリーンショット 2014-02-13 0.29.17.png](https://qiita-image-store.s3.amazonaws.com/0/2095/554aeef7-37b8-4f53-d423-06675fde8f02.png "スクリーンショット 2014-02-13 0.29.17.png")

## 最初からjadeを使う
もちろん最初からjadeをしているする事も出来るわけです。

```shell-session
$ sails new project_name --template=jade
```

これで最初からjadeを使う事ができますよー。

## 注意
Sails0.10.5だとどうやらうまくJadeが使えないぽいです。

## 最後に
結構簡単にsailsは扱えると思います。
ちなみに他にもまだまだ機能が沢山あります。その辺は次回また紹介します。
おしまい。