NestJSでREST API開発時に使える設定とかまとめ

背景

NestJS に俺の考えた最強の ESLint + Prettier の設定を導入するぞ！！で NestJS に ESLint と Prettier を導入されている方がいたので、これを参考にしてみました。

必要なもの

VScode
nvm

基本的には VScode さえあれば全てが事足ります。

nvm は以下のコマンドで導入できます。場合によってはxcode-select --installが必要になるので入れておきましょう。後は画面に表示される手順に従ってディレクトリを作成したりします。

1
brew install nvm

NodeJS のバージョン設定

NestJS は最新の NodeJS だと動かないことがあります。16.15.0 では動作することがわかっているので、とりあえずこのバージョンを使っておきます。

なので.nvmrcというファイルを作成して、

1
v16.15.0

とだけ書いておきます。これでnvm useとすれば明示的に 16.15.0 が使用されるようになります。

ただ、これだといちいちプロジェクトを開くたびにnvm useと入力しなければならず、めんどくさいです。

というわけで.zshrcに以下のコマンドを書きます。

これは[Visual Studio Code] [MacOS] .nvmrc で指定したバージョンに自動で切り替えてプロジェクトをスタートするの記事がとても参考になりました。

1
source ~/.nvm/nvm.sh
2
# place this after nvm initialization!
3
autoload -U add-zsh-hook
4
load-nvmrc() {
5
  if [[ -f .nvmrc && -r .nvmrc ]]; then
6
    nvm use
7
  elif [[ $(nvm version) != $(nvm version default)  ]]; then
8
    echo "Reverting to nvm default version"
9
    nvm use default
10
  fi
11
}
12
add-zsh-hook chpwd load-nvmrc
13
load-nvmrc

当たり前ですがnvmは導入済みである必要があるので入れておきましょう。

ESLint

ESLint を導入することで世間一般で使われているコーディング規約を学ぶことができます。チームでコードを書くときなどは、ルールを統一しておかないとごっちゃになるので入れておくのが無難です。

NestJS の場合は.eslintrc.ymlを作成して以下のように記述するとかなりキツめの設定が反映されます。要らないと思ったらいくつか無効化しても良いと思います。

1
root: true
2
env:
3
  node: true
4
  es2022: true
5
parser: "@typescript-eslint/parser"
6
parserOptions:
7
  project: ./tsconfig.json
8
  sourceType: module
9
extends:
10
  - eslint:recommended
11
  - plugin:@typescript-eslint/recommended
12
  - prettier
13
plugins:
14
  - import
15
  - sort-keys-fix
16
  - typescript-sort-keys
17
  - unused-imports
18
rules:
19
  import/order:
20
    - error
21
    - groups:
22
        - builtin
23
        - external
24
        - internal
25
        - parent
26
        - sibling
27
        - index
28
        - object
29
        - type
30
      newlines-between: always
31
      alphabetize:
32
        order: asc
33
  import/no-duplicates: error
34
  sort-keys-fix/sort-keys-fix: error
35
  typescript-sort-keys/interface: error
36
  unused-imports/no-unused-imports: error

Prettier

.prettierrc.ymlを作成して以下のような内容を書き込みます。

1
trailingComma: all
2
tabWidth: 2
3
semi: true
4
singleQuote: false
5
jsxSingleQuote: false
6
printWidth: 100

Swagger

NestJS で作ったドキュメントを OpenAPI で公開したい場合には Swagger を使うと良いと習ったのでそれも実装します。

ValidationPipeを使わない人は存在しないと思われるのでデフォルトで入れてあります。また、ビルドすると自動でdocs内にindex.htmlが作成されるのでこれを GitHub Pages で公開しておけば常に最新のドキュメントが見れるようになります。

1
import { ValidationPipe } from "@nestjs/common";
2
import { NestFactory } from "@nestjs/core";
3
import { SwaggerModule, DocumentBuilder, OpenAPIObject } from "@nestjs/swagger";
4
import { AppModule } from "./app.module";
5
import { config } from "dotenv";
6
import { exec } from "child_process";
7
import { mkdir, writeFileSync } from "fs";
8
import * as path from "path";
9
config({ path: ".env" });
10

11
async function build(documents: OpenAPIObject) {
12
  const build = path.resolve(process.cwd(), "docs");
13
  const output = path.resolve(build, "index");
14
  mkdir(build, { recursive: true }, () => {});
15
  writeFileSync(`${output}.json`, JSON.stringify(documents), {
16
    encoding: "utf8",
17
  });
18
  exec(`npx redoc-cli build ${output}.json -o ${output}.html`);
19
}
20

21
async function bootstrap() {
22
  const app = await NestFactory.create(AppModule);
23
  app.useGlobalPipes(
24
    new ValidationPipe({
25
      disableErrorMessages: true,
26
      transform: true,
27
    })
28
  );
29
  const options = new DocumentBuilder().build();
30
  const documents = SwaggerModule.createDocument(app, options);
31
  build(documents);
32
  SwaggerModule.createDocument;
33
  SwaggerModule.setup("documents", app, documents);
34
  await app.listen(process.env.PORT || 3000);
35
}
36
bootstrap();

redoc-cliを利用しているのでそれだけ入れ忘れないようにしましょう。

もし入っていない場合はyarn add redoc-cliで導入できます。

ただ、この設定を書くと何もしないアロー関数があるとかで eslint さんに怒られます。なんとかしたいです。

まとめ

ここまでを全部くっつけたやつをNestJSとしてテンプレート化してみました。

自分のレポジトリがごちゃごちゃしてきたので NodeJS を使うものは分けたいところですね。

記事は以上。