ES6過渡期のMithril入門　②WebフレームワークKoaを導入

13323 ワード
Mithril.js CoffeeScript Node.js Koa CoffeeScript テキストリンク

0) WebフレームワークとしてKoaを導入したい理由

  • メジャーなフレームワークexpressと同じ作者が、少ないcallbackで簡潔に書けるKoaを開発(2013年頃～)
  • io.jsとnode.jsがマージされ、Koaを導入しやすくなっている。(2015年)
  • Koaは、モジュールを組み合わせることで、expressと同様の機能を持たせていける。
  • ES6が盛り上がる前に開発されたため、coffeescript等のAltJSでも書きやすい。
  • Koaサイトは(シンプルすぎるトップページだが)下にスクロールして現れるドキュメントはしっかりしている

1) Koaを導入し、coffeescriptでの開発を開始する。

先人の肩に乗る。

Koa登場当初のkoa入門が、今でも十分に参考になるクオリティなので、こちらを参考にさせてもらう。
途中に出てくるjadeをテンプレートとするapp.jsを参考にさせてもらう。引用:

引用app.js
var koa = require('koa');
var route = require('koa-route');
var serve = require('koa-static');
var views = require('co-views');
var app = koa();

// jadeをテンプレートエンジンとして設定。
var render = views(__dirname + '/views', { map : {html : 'jade'}});

// GET /views => render template engine
app.use(route.get('/views', function *(next) {
  // bodyに対してindex.jadeの変更を実施。
  this.body = yield render('index.jade', {name: "koa"});
}));

// GET /hello => 'Hello!'
app.use(route.get('/hello', function *() {
  this.body = 'Hello!!';
}));

// GET /hello/:name => 'Hello :name'
app.use(route.get('/hello/:name', function *(name) {
  this.body = 'Hello ' + name;
}));


// static file serve
app.use(serve(__dirname + '/public'));

app.listen(3000);

JS <--> coffeeの相互変換を準備

js2coffeeを導入し、coffeescriptに機械的に変換してみる。
js2coffeeは、Kosフレームワークのキモであるyieldに非対応など、制限があるが、作業は楽になる。

npm install -g js2coffee coffee-script

coffeesciprtでKoaの開発を開始

作業フォルダを用意し、node実行環境情報を構築

npm init
{package.jsonを構成するための必要情報を入力}
npm install koa koa-route koa-static co-views jade --save

npmに、 --saveオプションをつけることでデプロイ可能な構成を取ることができる。
Koa入門を参考にしつつ、作業フォルダを以下のような構成とする:

app.coffee : webアプリ本体 
package.json :基本情報・モジュール情報を記述したjson
./node_modules nodeのモジュールが入るフォルダ(npm --saveで自動生成)
./static : Koaが管理する静的フォルダ
./views : Koaが用いるテンプレート(今回はjade)を格納するフォルダ

routingやyieldの検証のため、appは、以下の様に記述した。

app.coffee
koa = require('koa')
route = require('koa-route')
serve = require('koa-static')
views = require('co-views')

app = koa()
# jadeをテンプレートエンジンとして設定。
render = views(__dirname + '/views', map: html: 'jade')
# GET /views => render template engine
app.use route.get '/views', (next) ->
  # bodyに対してindex.jadeの変更を実施。
  k = 'Koa入門'
  @body = yield render 'index.jade', {name: k}

# GET  => render template
app.use route.get '/hello', ->
  @body = yield render 'index.jade', {name: 'Hello!!'}

# GET  => [array]
app.use route.get '/array/:a1/:a2', (a1,a2) ->
  @body = yield [a1, a2]

# static file serve
app.use serve(__dirname + '/static')
port = 3003
console.log "Server starts at #{port} port."
app.listen port

テンプレートのjadeファイルも小改変

/views/index.jade
doctype html
html(lang="ja")
  head
    title koa-render

    style.
      body {
        font-family: Helvetica;
        text-align: center;
      }


      h1 {
        padding-top: 300px;
        font-weight: 200;
        color: #333;
        font-size: 6em;
      }
  body
    h1 h1: render #{name}
    hr
    h2 h2: render #{name}
    h3 h3: render #{name}

実行

coffeeコマンドに--nodejsオプション他をつけることで行う。

$ coffee --nodejs --harmony coapp.coffee                                                                                                          Server starts at 3003 port.

URI情報の過不足ある時のルーティング処理の結果は、けっこう興味深い。

2) KoaのstaticフォルダにMithrilを入れる。

staticフォルダに①のMithrilクライアントアプリをコピーすると、(実行時であっても)そのまま動作するはず・・動作した！

フォルダ構成を若干変更して:

tree static static
├── index.html
└── js
├── app.js
├── app.ls　＃おまけで入っている
├── client.js
├── mithril.min.js
└── mithril-extended.js

3) 次回はMithrilとKoaを組み合わせ。

MithrilとExpressを組み合わせた最速本の応用問題としていけるはず。
=> Mithrilの作りをきちんと理解したいひとには、『Mithril――最速クライアントサイドMVC』の購入をお勧めしておく。

その後は、本番環境云々を視野に、webpack等を導入したい。

C#作成されたワードアナライザの可視化インタフェース
Java JDK1.8ソース学習の道1 Object