zeit/microをTypeScriptで使いたい！ #JavaScript

忙しい人はここだけ読めば大丈夫です。

はじめに

もともとNodeJSでサーバサイドをごにょごにょやる人間だったのですが、ここ一年くらいはフロントエンドばかりやっていました。

そんな状況でまたNodeJSを触れる機会があり、最近のフレームワークの中で何がいいか調べた結果、 zeit/microがすごくよかったのでご紹介します。

ちなみにフレームワークの遍歴としては、

express -> koajs -> restify or fastify -> zeit/micro

という感じです。

`zeit/micro`とは

まず、zeitはクラウドでサーバレス環境を提供しているサービスです。
https://zeit.co/

それに加えて、その環境のコマンドラインツールや強力なプロダクトをOSSで公開しています。

JavaScriptで実装された（Electron製の）ターミナルであるhyperやReactのサーバサイドレンダリングに特化したフレームワークであるNext.jsもzeit製です。

本題に戻りまして、今回ご紹介するmicroというフレームワークは軽量かつシンプルにAPIサーバを実装でき、マイクロサービスに向いていると謳っています。

使い方はとても簡単で、

$ npm install --save micro

index.js

// req, resは標準モジュールの`http`にあるオブジェクト
// req: IncomingMessage
// res: ServerResponse
module.exports = (req, res) => {
    res.end('Welcome to Micro')
}
// or
module.exports = () => 'Welcome to Micro'

package.json

{
    "main": "index.js",
    "scripts": {
        "start": "micro"
    }
}

これだけで動いてしまいます。

`TypeScript`で`micro`を触りたい

TypeScriptでの利用例が少ないのか、microというワードのググラビリティが悪いのかわかりませんが、あまり情報が出てきません。

とはいえ、ちゃんと型定義ファイルは用意されていて使えるようになっているので安心して使い倒していきましょう。

環境構築

microはasync/awaitを多用するのでデフォルトでサポートしているNodeJS 8系以上を使うといいでしょう。
npmクライアントはyarnを使っているので、適宜読み替えてください。

$ yarn add micro microrouter
$ yarn add -D micro-dev typescript ts-node @types/micro @types/microrouter @types/node@8.x.x

package.json

{
    "engines": {
        "node": "8.x.x"
    },
    "scripts": {
        "start": "micro ./build/index.js",
        "dev": "node -r ts-node/register/transpile-only node_modules/.bin/micro-dev ./src/index.ts",
        "build": "tsc -b"
    }
}

tsconfig.json （お好みの設定で）

{
    "compilerOptions": {
        "target": "esnext",
        "lib": ["esnext"],
        "module": "commonjs",
        "rootDir": "./src",
        "outDir": "./build"
    },
    "include": ["./src/**/*"],
    "exclude": ["node_modules"]
}

src/index.ts

import { send, createError, sendError } from "micro";
import { router, get } from "microrouter";

export = router(
    // 直接ボディを返す
    get("/", () => "hello world."),
    // sendメソッドで返す
    get("/hoge", async (_, res) => {
        await send(res, 200, { fuga: true });
    }),
    // エラーレスポンスを返す
    get("/error", async (req, res) => {
        const error = new Error("panic!");
        const httpError = createError(500, "internal server error.", error);

        await sendError(req, res, httpError);
        // これでもいける
        // throw httpError;
    }),
);

# 開発用
$ yarn dev
# プロダクション用
$ yarn build && yarn start

devコマンドで使用しているmicro-devは、
ソース変更時のホットリロードやログをいい感じに表示してくれる機能がついてくるので絶対使った方がいいです。
また、エラーを返す時もスタックトレースまで返してくれるのでデバッグも多少楽になります。
（もちろんmicroコマンドで起動した時はスタックトレースは返しません。）

最後に

microはめちゃくちゃいいものなのでもっとmicro人口が増えるといいな〜と思いながら記事を書きました。
少しでもmicroの魅力が伝わったら嬉しいです。

zeit/microをTypeScriptで使いたい！

はじめに

zeit/microとは

TypeScriptでmicroを触りたい

環境構築

最後に

`zeit/micro`とは

`TypeScript`で`micro`を触りたい