Koa(v2)をとりあえず動かしてみた #JavaScript

Koa は Express の後継？といわれる、Node.js 用のフレームワークです。開発には Expess のチームが携わっているようです。

公式ページ：http://koajs.com/
GitHub：https://github.com/koajs/koa

キャッチアップがてら 2系を手元で動かしてみたので、本稿はそのメモです。 まだ良く分かってないので、間違えてることろがあればコメント等でご指摘いだけると幸いです！

なお、今回のソースコードは GitHub に置いておきます。必要に応じて参照ください。
⇒ https://github.com/hkusu/koa2-example

私の環境

OS：OS X 10.11.5（El Capitan）
Node：6.2.1
npm：3.10.7

ローカル環境の構築

前提として Koa v2 では ES7(正式には未決定？) の async/await を先取りして利用する必要があるため、Babel でソースコードを変換することとします。

まず、必要な Node モジュールをインストールします。

$ npm install -S babel-register babel-preset-es2015-node babel-plugin-transform-async-to-generator koa@2

Koa は @2 を指定しないと、現時点では v1 が降ってくるので。

babel-register は、Node の起動時に Babel をフックするのに利用します。babel-preset-es2015-node は、よくフロントエンド環境で用いられる babel-preset-es2015 でも良さそうですが、Node を実行する環境の Node バージョンに合わせて必要な ES2015 の機能を取り込んでくれるらしいので、今回は -node の方を採用しました。またモジュール名で想像がつくと思いますが async/await を実現する為のものが babel-plugin-transform-async-to-generator です。

package.json と .babelrc は次のようになりました。

package.json

{
  "name": "koa-app",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "start": "node -r babel-register ./app.js"
  },
  "license": "MIT",
  "dependencies": {
    "babel-plugin-transform-async-to-generator": "^6.16.0",
    "babel-preset-es2015-node": "^6.1.1",
    "babel-register": "^6.14.0",
    "koa": "^2.0.0"
  }
}

.babelrc

{
  "presets": ["es2015-node"],
  "plugins": [
    "transform-async-to-generator"
  ]
}

package.json に定義してあるとおり Node の起動時に -r babel-register を指定することで、以降に読み込まれるソースコードが .babelrc の設定内容に従って Babel 変換されます。

アプリケーション(WEBサーバ)のコード

「Hello World!」をブラウザに表示して、コンソールに HTTP リクエストのメソッドの種類と URL を出力するだけの簡単なものです。

app.js

import Koa from 'koa'

const app = new Koa()

app.use(async (ctx, next) => {
  try {
    await next()
    console.log(`${ctx.method} ${ctx.url}`)
  } catch (err) {
    ctx.body = err.message
    ctx.status = err.status || 500
    console.error(err.message)
  }
})

app.use(async ctx => {
  ctx.body = 'Hello World!'
})

app.listen(3000)

ctx は context の略でしょうか。

動作確認

コンソールで $ npm start し、ブラウザで http://localhost:3000 にアクセスしてみます。

app.js に書いたとおりコンソールにアクセスが記録されました！

ほか

私は IDE には WebStorm を利用している(現時点でバージョン2016.2.3)のですが、WebStorm からアプリケーションを起動するようにすると、ブレークポイントを張ってデバッグすることができます。

まだ async/await まわりは怪しいですが。

また Koa の API（app.useなど）が解決できず警告(波線)が出てたのですが、Koa の型定義を導入したらとりあえず警告は消えました。

〜以上〜