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


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` は次のようになりました。

```json: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"
  }
}
```

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

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

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

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

```javascript: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` にアクセスしてみます。

![スクリーンショット 2016-10-07 14.41.59.png](https://qiita-image-store.s3.amazonaws.com/0/35733/ede5cc44-6917-d42c-18f3-9c2278702e90.png "スクリーンショット 2016-10-07 14.41.59.png")

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

![スクリーンショット 2016-10-07 15.31.35.png](https://qiita-image-store.s3.amazonaws.com/0/35733/7eaafce1-1926-ffa2-4b79-264b0cc85753.png "スクリーンショット 2016-10-07 15.31.35.png")

## ほか

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

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

![スクリーンショット 2016-10-07 15.40.51.png](https://qiita-image-store.s3.amazonaws.com/0/35733/16fce839-ff6f-7275-5ad6-bd1765c47c85.png "スクリーンショット 2016-10-07 15.40.51.png")

![スクリーンショット 2016-10-07 15.44.08.png](https://qiita-image-store.s3.amazonaws.com/0/35733/c75d0be1-f25f-458e-f753-a507b1055e46.png "スクリーンショット 2016-10-07 15.44.08.png")

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

![スクリーンショット 2016-10-06 0.40.39.png](https://qiita-image-store.s3.amazonaws.com/0/35733/c6613d1e-2c63-bdd6-ccd5-4286ed923f07.png "スクリーンショット 2016-10-06 0.40.39.png")

〜 以上 〜