ITエンジニアの雑談@rascalroom

インフラからフロントまで。若輩エンジニアの勉強まとめ。

アプリ製作 #Sails.jsの構造について &全体的に

 

 

#sails new { } をするといろんなディレクトリやファイルができるので、

その中から僕がよく触るものについて紹介していきます。

細々した説明は、追々説明していきます。まずは概要ということで。

(  "こまごま" って  "細々" って書くんですね。)

 

 

api

models

みなさんご存じ、MVCモデルの "M(モデル)" 。

RDBではテーブル、ドキュメント指向DBではドキュメントのスキーマを定義するファイルが置かれるディレクトリですね。

 

ファイルの中身は、

RDBのカラムを書いているかのような、横に羅列していく構文ですが、

ちゃんとJSON形式のような階層構造も表現できるので、

 柔軟な対応ができつつ、シンプルなつくりになっている印象です。

 

モデルを定義するだけで、Blueprint APIによるCRUDが実装できるのは魅力。

ただセキュリティは考慮しないと、思わぬトラブルが発生する恐れがあるので注意が必要ですね。

 

 

controllers

こちらもおなじみ、 MVCモデルの "C(コントローラー)" 。

 サーバーサイドの処理はここで済ませます。

アクションを定義するところですね。

 

req.query.{  } でパラメータを取得したり、

 

res.{  } でレスポンスを操作したり、

 

sails.sockets で websocket 扱ったり。

 

書き方うんぬんは、使ってみて勉強ですかね。

 

Nodeなので、JavaScriptでコードが書けますので。

 

 

views

予想通りに、 MVCモデルの "V(ビュー)" 。

HTMLを記述するところで、ユーザーさんに見せる部分になります。

 

ただ、普通のHTMLとは異なり、

テンプレートエンジンを用いることになります。

 

 

(ejs)

<% %> のような記法で書きます。

controllerで、res.view( ) からデータを受け取ることができます。

詳しいところは下記を参考に。

qiita.com

 

 

(jade)

YAMLライクな記法みたいです。

扱ったことないので、わかりません。。。

こちら参考になります。

blog.mismithportfolio.com

 

 

layouts

layout.ejs

全viewの共通部分を記述しておくファイル。

headerやfooterを書いてますね。

 

また後述する asset で定義した JavaScript や CSS は、このファイル内に自動的に反映されます。

Asset pipeline というやつです。

 

views/{    }/{   }.ejs は、

<%- body %> に読み込まれます。

 

 

config

routes.js

"ルーティング" です。

URLルーティングと呼ばれるやつですね。

 

この手のフレームワークでは避けて通れない路なので、

必修科目ですね。

 

端的に言えば、

URLパスをどのページに紐づけるか。

 

viewを直接見に行くもよし、

controllerを経由するもよし、

 

とりあえずこのルーティングをしないと、

ページが見られません。

 

小難しい話は、調べれば出てきます。

記述の仕方については、今後説明しますので。

 

 

datastores.js

使用するデータベースを定義するファイル。

モデルを反映させるデータベースですね。

 

mysql を使用する場合は、

rascal@RascalRoom:~# npm install sails-mysql --save

 

mongo を使用する場合は、

rascal@RascalRoom:~# npm install sails-mongo --save

 

複数のデータベースを扱うこともできます。

 

 

models.js

モデルについての設定を行うファイル。

 

schema や migrate の設定を変更することが多いです。

 

migrate: 'alter'

としておけば lift 時にデータベースに反映します。

 

あとはモデルの共通スキーマも登録できます。

"createdAt" "updatedAt" "id" はデフォルトで登録されています。

 

 

assets

assets は "資産" って意味らしいです。

js や css を資産と表現するのは、なかなか好きです。

 

js

クライアントサイドの js を書いたファイルを置きます。

特筆することはありません。

JavaScript です。

 

dependencies

 ここにも JavaScript ファイルを置きます。

 

「assets/js との違いは?」というと、

 

ロードされるタイミングが違います。

assets/js よりも早くロードが行われるので、

先に読み込ませたい関数やクラス、ライブラリ等はこちらに置きましょう。

 

よく配置するのは、

jQuery や Vue.js 等のライブラリファイル。

あとは、クラスの定義をよくするので、そういったものは全部ここに置いてます。

 

 

style

スタイルシートです。

CSS です。

 

あまり書くことはありませんが、

 

1つだけ気を付けていることが、

「すべての View に反映される」ところですね。

 

それはそれでメリットでもあるのですが、

あの View の、あの部分だけ変えたいときには、

id や name などの管理に気を配らないと、

ごちゃごちゃします。

 

id のネーミングなどは、意識しておきましょう。

 

 

まとめ

Sails.js もバージョンの違いで、「あのファイルがない」とか、「こんな記法だっけ」とか、あります。

使い始めたときにネットで調べるとよくありました。

「何を信じればいいか」わからなくなりますので根気よく試しましょう。

 

ちなみに僕が使っているバージョンは、

" 1.2.2 "

になります。

 

メジャーバージョンが上がらない限りは、構成に変化はないと思ってます。

 

次回からは、さらに各要素を個別で、細かいところまで紹介していきます。