Fastify+TypeScript で新規プロジェクトを作成

Fastify

Fastifyを使う予定があるので使ってみる。

NodeのWebフレームワーク Fastifyは、Nodeのフレームワークの中でハイパフォーマンスらしい。

• fastify/fastify: Fast and low overhead web framework, for Node.js

Getting Startedを動かす

公式のGetting Startedを参考にして、動かしてみよう。

• fastify/fastify: Fast and low overhead web framework, for Node.js
• Getting Started

環境

$ node --version
v14.16.0

プロジェクトを作成

$ mkdir fastify-sample
$ cd fastify-sample/
$ yarn init -y
$ yarn add fastify

fastifyでリクエストをうけるファイルを作成

src/index.js

const fastify = require('fastify')({
  logger: true
})

fastify.get('/', async (request, reply) => {
  reply.type('application/json').code(200)
  return { hello: 'world' }
})

fastify.listen(3000, (err, address) => {
  if (err) throw err
  fastify.log.info(`server listening on ${address}`)
})

package.jsonに起動用のscriptを追加

packeage.json

{
  "name": "fastify-sample",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "node src/index.js"
  },
  "dependencies": {
    "fastify": "^3.14.0"
  }
}

起動して動作確認

$ yarn dev

http://127.0.0.1:3000 にアクセスすると {"hello":"world"} と表示される。

TypeScriptに対応する

型があると色々と理解がしやすいのでTypeScriptに対応しておきます。

• TypeScript and types support
• fastify/TypeScript.md at master · fastify/fastify

tsconfigは普通に npx tsc --init でも良いみたいですが、おすすめ設定があるということでそちらを今回は使ってみます。

• tsconfig/bases: Hosts TSConfigs to extend in a TypeScript app, tuned to a particular runtime environment

TypeScript関連を追加

$ yarn add -D typescript @types/node
$ yarn add -D @tsconfig/node14

tsconfig.jsonを作成

tsconfig.json

{
  "extends": "@tsconfig/node14/tsconfig.json"
}

tsからjsにドのスクリプトを追加

package.json

{
  ...
  "scripts": {
    "build": "tsc -p tsconfig.json"
  },
}

index.jsをtsに変更

src/index.ts

import fastify from 'fastify'
const server = fastify({
    logger: true
})

server.get('/', async (request, reply) => {
    reply.type('application/json').code(200)
    return {hello: 'world'}
})

server.listen(3000, (err, address) => {
    if (err) throw err
    server.log.info(`server listening on ${address}`)
})

起動する

$ yarn build
$ yarn dev

http://127.0.0.1:3000 にアクセスすると {"hello":"world"} と表示される

開発中はビルドなしで起動する

いちいちbuildして起動するのは面倒だ。 開発中はホットリロードで編集したらすぐ反映されて確認できたほうがうれしい。

tsをコンパイルなしで動かすには、ts-nodeとts-node-devがある。

ts-node-devのほうが、ファイルの変更を監視して、再起動を自動やってくれる。開発中は頻繁に編集して確認を繰り返しするのでts-node-devを入れるようにした。

• ts-node と ts-node-dev の違い - Qiita

ts-node-devを追加して開発体験をあげる。

ts-node-devを導入

$ yarn add -D ts-node-dev

package.jsonのdevでtsが動くようにする

package.json

{
  ...
  "scripts": {
    "dev": "ts-node-dev src/index.ts",
    "build": "tsc -p tsconfig.json"
  },
}

起動して確認する

$ yarn dev

http://127.0.0.1:3000 にアクセスすると {"hello":"world"} と表示される。

ここまでのファイル構成

$ tree -I node_modules -L 2
.
├── node_modules
├── package.json
├── src
│   └── index.ts
├── tsconfig.json
└── yarn.lock

まとめ

とりあえず、Fastify + TypeScriptで動かせるようになった。一番素朴な実装なのでこれをベースに色々試していきたいと思います。