概要
NestJS を初めて触る人向けの、概要と初期環境構築の備忘録。
「NestJSとは何か？」そもそも基本概念を知りたい人、初歩的な環境構築を知りたい人向け。
| # | 内容 |
|---|---|
| 1 | 基本概念・環境構築（今回） |
| 2 | 基本３概念、モジュール/コントローラ/サービス とは |
| 3 | spec とは何か？ |
前提
- PC に「Node.js」がインストール済みであること
- 「Web アプリ」「フロントエンド（クライアントサイド）」「バックエンド（サーバサイド）」の言葉の意味がわかること
- 「Web サーバ」が何かを知っていること
- 「REST API」の基礎概念がわかること
環境
- Node.js： v18.15.0
- npm： v9.6.3
- NestJS： v9.3.0
- TypeScript： v4.7.4
NestJS とは
NestJS（ネストジェイエス）とは、一言で表すと 「TypeScript で使用できるバックエンドのフルスタックフレームワーク」
"フルスタック" ということは、そもそもフレームワークで TypeScript での記法・お作法が整理された上に、バックエンドでやりたいことはおおよそ全部できるように機能が揃っている ということ。少し違う表現をすると、「他にサードバーティのライブラリやモジュールを追加する必要がないフレームワーク」ということですね。
また、フロントエンドの Web アプリケーションフレームワークの中で、同様にフルスタックフレームワークである Angular にインスパイアされており、書き方が Angular に非常に近い。
PHP や Python、 Ruby などは既に主要なバックエンドの強力なフレームワークがあるが、TypeScript/JavaScript には、これといってそのような立ち位置のフレームワークはまだなかったので、そこに出てきたのが "NestJS" という印象。
初期構築手順
手動で１つ１つファイルを用意しても動くが、非常に効率が悪く、現実的ではないので、専用の公式コマンドツールを利用する。
コマンドツール 「Nest CLI」 をグローバルインストール（nest コマンドが PC で使用できるようになる）
npm install -g @nestjs/cli
※ 入らなかったら頭に sudo 付けて再挑戦💪
インストール成功したか確認
# バージョン確認コマンド
nest -v
# ちなみにヘルプコマンド
nest -h
プロジェクト作成する
# プロジェクト生成コマンド
nest new demo-nestjs
# 対話形式
# パッケージ管理ツールはどれにする？
? Which package manager would you ❤️ to use? (Use arrow keys)
❯ npm
yarn
pnpm
# 処理中のインジケータがオシャレ
▹▹▸▹▹ Installation in progress... ☕
🚀 Successfully created project demo-nestjs
👉 Get started with the following commands:
$ cd demo-nestjs
$ npm run start
Thanks for installing Nest 🙏
Please consider donating to our open collective
to help us maintain this package.
🍷 Donate: https://opencollective.com/nest
これで構築完了！
サーバ起動して動作確認してみる
# 生成されたプロジェクトディレクトリに移動
cd demo-nestjs
# 開発モードでサーバ起動
npm run start:dev
# 結果: 以下のように、出力が止まったら起動完了. リクエスト待ち状態
[15:24:35] Starting compilation in watch mode...
[15:24:37] Found 0 errors. Watching for file changes.
[Nest] 51875 - 2023/04/15 15:24:37 LOG [NestFactory] Starting Nest application...
[Nest] 51875 - 2023/04/15 15:24:37 LOG [InstanceLoader] AppModule dependencies initialized +12ms
[Nest] 51875 - 2023/04/15 15:24:37 LOG [RoutesResolver] AppController {/}: +16ms
[Nest] 51875 - 2023/04/15 15:24:37 LOG [RouterExplorer] Mapped {/, GET} route +2ms
[Nest] 51875 - 2023/04/15 15:24:37 LOG [NestApplication] Nest application successfully started +1ms
👉 サーバ停止は control + C（Mac）/ Ctrl + C（Windows）
👉 バックエンドツールなので画面はない。
👉 curl コマンドや API 動作確認ツールで http://localhost:3000 に GET でリクエストを飛ばし、HTTP 200 で Hello World! と応答が返ってくれば成功。
（ポート設定は src/main.ts でデフォルト 3000 番になっている）
上図は、適当なツールから実際に GET リクエストを飛ばして HTTP 200（成功）が返ってきた例
おまけ： 生成されたファイルの意味
プロジェクト作成時に自動生成されたリソースの概要を説明する。
基本的に src のファイル以外はあまり覚えなくても良い。
| ファイル | 説明 | |
|---|---|---|
| src | app.controller.spec.ts | コントローラの単体テストコード |
| app.controller.ts | コントローラ（要求の受付/要求元への応答 を担当する領域） | |
| app.module.ts | コントローラとサービスをまとめて管理する、「モジュール」という名の箱 | |
| app.service.ts | サービス（詳細なデータ処理を書く領域） | |
| main.ts | 最初にアクセスされるエントリーファイル、Web サーバも兼ねる | |
| test | app.e2e-spec.ts | E2E テストコード |
| jest-e2e.json | テスト設定ファイル | |
| .eslintrc.js | 設定ファイル | |
| .gitignore | バージョン管理対象外を設定するファイル | |
| .prettierrc | 設定ファイル | |
| nest-cli.json | Nest CLI 設定ファイル | |
| package-lock.json | node モジュールの依存関係定義ファイル | |
| package.json | node モジュールの定義ファイル | |
| README.md | 本プロジェクトの概要説明書 | |
| tsconfig.build.json | TypeScript の設定ファイル | |
| tsconfig.json | TypeScript の設定ファイル | |