Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Sails.jsと触れ合ってみた

More than 3 years have passed since last update.

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

そもそもSailsとは?

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

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

Node Frameworks

インストール

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

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

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

簡単にユーザー登録を作ってみる

コマンドラインからまずはcontrollerとmodelを生成します。

$ sails generate api user
$ sails lift

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

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

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

では再びhttp://localhost:1337/user/にアクセスしてみましょう。
次は登録されているはずなので以下のような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

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

適当に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にアクセスしましょう。
すると以下のようなメッセージが表示されます。
スクリーンショット 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にアクセスしましょう。
すると表示が以下のようになっています。

スクリーンショット 2014-02-13 0.29.17.png

最初からjadeを使う

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

$ sails new project_name --template=jade

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

注意

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

最後に

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

polidog
web系エンジニアです。
http://polidog.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away