コンパイラかく語りき

import { Fun } from 'programming'

Node.jsフレームワークの新興勢力、nodalで英単語アプリケーションを作る その1

先日、Node学園 19時間目に参加した際にnodalというNode.jsのフレームワークを知りました。

というか、自分、Expressしか知りませんでした。しかも名前だけ。KoaとかHapiとか、色々あるんですね。

 

Node学園では、nodalは新進気鋭の新興勢力として紹介されていました。なので、新しいものをまず触ってみよう!と思い、ちょっとアプリケーションを作ってみようと思います。

 

このポストでは、以下の公式ページに従って、作業を進めていきます。

github.com

 

インストール

何はともあれインストール。

ちなみに、初回のインストールには失敗しましたw Nodeのバージョンが古かったため、nodalのコマンドが全てエラーになる事態に。

f:id:chuck0523:20160212060820p:plain

 

ちゃんと4系以上にしなさいよと書いてありました。

f:id:chuck0523:20160212060905p:plain

 

Node.jsの公式を見てみると、どうやら5.6.0が最新のstableのよう。

せっかくなので、思い切って5.6を入れました。と言っても、nodebrewを使っているので安心なんですけどね。

chuckwebtips.hatenablog.com

 

さて、いよいよnodalのインストールです。

$npm install -g nodal

f:id:chuck0523:20160212061109p:plain

きちんと関連パッケージがインストールされました。nodalは現在バージョン0.7.3なんですね。

 

ちなみにこちらがコマンド一覧。

f:id:chuck0523:20160212061632p:plain

見やすいですね。好感が持てます。

 

新規プロジェクト作成

では、新規プロジェクトを作成していきます。今回は英単語アプリケーションを作成する予定です。TOEIC900点レベルの英単語を扱う予定なので、After900という名前にします。

 

$ nodal new After900

 

プロジェクト作成コマンドを入力すると、いくつかの設定事項を聞かれます。

f:id:chuck0523:20160212062111p:plain

ほおほお、Herokuサポートしれくれるんですね。嬉しいです。

Task Schedulerってなんだろう。。とりあえずYesにしました。

 

そして作成後にこんなメッセージが。

f:id:chuck0523:20160212062233p:plain

なんだかポップでいいですね。僕みたいな初心者向けな感じがしてきました。

 

ちなみに、生成されたディレクトリ構造はこんな感じ。

f:id:chuck0523:20160212062352p:plain

app,config,db,initializers,test,node_modulesは、ふんふんって感じ。

middleware, renderware, staticあたりがよくわからないぞ。。。わくわく。

 

サーバ起動

以下のコマンドでローカルサーバを起動することができます。

$ nodal s

 

そしてローカルホストの3000番にアクセスすると、以下のようなWelcome画面になります。

f:id:chuck0523:20160212070640p:plain

 

ルーティング

次にHTTPリクエストがどのようにさばかれるかを見るために、ルーティングの設定を見てみます。

こちらが、./app/router.js

gistfa95ffe05c56e90f32b3

 

Nodalでは、module.exports = (function() { /*...*/ }) () というIIFE型のモジュールパターンが標準なようです。exportに一貫性を持たせてわかりやすくするためだとか。ふーん。

 

ここでは、MiddlewareとRenderwareがコントローラに追加されています。

実行フローとしてはこんな感じ。

f:id:chuck0523:20160212071611p:plain

これはDjangoのルーティングスタイルに習っているのだとか。

 

コントローラ

indexルートにアクセスした時、何が起こるのかは、./app/controllers/index_controller.jsを見てね。とのこと。

gist718414d1f8b50cc03b09

 

indexルートにアクセスするち、IndexControllerのインスタンスが新しく作られるらしい。

メソッド内にthis.paramsというものがあるけど、これはクライアントからのリクエストパラメータを内部に含むらしい。あと、this.appとすることで、アプリケーションのグローバルなプロパティにアクセスできるとか。

 

そして、getメソッドは、HTTPのGETリクエストがコントローラにたどり着いたときに呼ばれるらしい。ルート周りで利用可能なメソッドは以下のとおり。

f:id:chuck0523:20160212072441p:plain

 

あるいはCRUD風に書いてもOK。

f:id:chuck0523:20160212072511p:plain

 

コントローラ内部から文字列をレンダーするには、this.render()を使う。なんかReactっぽい??JSONもレンダーできるらしい。その他の利用可能なレスポンドについてはAPIドキュメントを参考とのこと。

 

コントローラ内でthisの仕様

ES6のアロー関数はthisのための新しいコンテキストを生成しないらしい。匿名のアロー関数を使って、コントローラのインスタンスへの参照を保持することがベストプラクティス。self = this; はアンチパターンらしい。

 

CLIでコントローラ生成

CLIでコントローラを作ります。まずはTopページのためのコントローラを作成します。

 

$ nodal g:controller Top

 

これで.controllers/にコントローラが作成されます。

パスの指定もOKらしい。

 

$ nodal g:controller path/to/conrollerName

 

作成されたコントローラがこちら。

gist8f80544300e22305f206

 

モデル

モデルの作成はカンタンだそうです。プロジェクトにモデルは必須ではありませんが、以下のようにしてモデルを作成できます。

今回は英単語を格納するwordというモデルを作成します。

 

$ nodal g:model Words

 

生成されたモデルファイルがこちら。

gistb2e85d7114f56e40471e

 

ちなみに、コントローラの作成はroutingの追記も行ってくれますし、モデルの作成はマイグレーションの作成も行ってくれます。

f:id:chuck0523:20160212074711p:plain

 

ちなみに、Nodalは現在PostgreSQLしかサポートしていません。エッジが効いてますね。

 

スキーマは、サーバの起動時にschema.jsonを自動的にロードするNodal.my.schemaからセットされるようです。そのため、スキーマへの変更はアプリケーションのシャット・ダウンとリロードが必要です。

 

特別なモデル

Nodalには2つの特別なモデルが既に用意されています。UserとAccessTokenです。Userは使いたかったので非常にありがたいです。

 

まあ、両方作っておきます。

$ nodal g:model --user

$ nodal g:model -access_token

 

 モデルのマイグレート

モデルとともに、マイグレーションが生成されています。モデルデータをスキーマにロードするために、データベースに関するコマンドを打ちます。

 

$ nodal db:create

 

その結果、以下のエラーが。

f:id:chuck0523:20160212080020p:plain

 

あれ??ひょっとしてPostgresが起動してない??

対応しました。↓

chuckwebtips.hatenablog.com

 

Postgresを起動した結果、以下のとおりDBが作成できました。

f:id:chuck0523:20160215002954p:plain

 

次に、マイグレーションに備えて準備をします。

$ nodal db:prepare

f:id:chuck0523:20160215003350p:plain

 

そして最後に、マイグレーションを実行します。

$ nodal db:migrate

 

ちなみに、マイグレーションを取り消したい場合は、

$ nodal db:rollback

とすれば良いようです。

 

 

まとめ

というわけで、今回はここまで。

Node.jsの新興フレームワーク、Nodalを使ってWebアプリケーションを作成する準備を整えました。