Fastify+TypeScript で新規プロジェクトを作成
2021.03.15
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Fastify
Fastifyを使う予定があるので使ってみる。
NodeのWebフレームワーク Fastifyは、Nodeのフレームワークの中でハイパフォーマンスらしい。
Getting Startedを動かす
公式のGetting Startedを参考にして、動かしてみよう。
環境
$ node --version
v14.16.0
プロジェクトを作成
$ mkdir fastify-sample
$ cd fastify-sample/
$ yarn init -y
$ yarn add fastify
fastifyでリクエストをうけるファイルを作成
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を追加
{
"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に対応しておきます。
tsconfigは普通に npx tsc --init でも良いみたいですが、おすすめ設定があるということでそちらを今回は使ってみます。
TypeScript関連を追加
$ yarn add -D typescript @types/node
$ yarn add -D @tsconfig/node14
tsconfig.jsonを作成
{
"extends": "@tsconfig/node14/tsconfig.json"
}
tsからjsにドのスクリプトを追加
{
...
"scripts": {
"build": "tsc -p tsconfig.json"
},
}
index.jsを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-devを追加して開発体験をあげる。
ts-node-devを導入
$ yarn add -D ts-node-dev
package.jsonのdevでtsが動くようにする
{
...
"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で動かせるようになった。一番素朴な実装なのでこれをベースに色々試していきたいと思います。
