バナナでわかる！NestJS入門！
はじめに
NestJSをこらから学習する方向けの記事となります。
やることは簡単。
プロジェクトをさくっと構築してREST APIでバナナを取得するだけです。
NestJSとは？
NestJSは、サーバーサイドアプリケーションを作るためのフレームワークです。サーバーサイドアプリケーションというのは、ウェブサイトの裏側で動くシステムのことです。NestJSでは、「モジュール」「コントローラー」「サービス」という3つの主要な部分を組み合わせてアプリケーションを作ります。これらを簡単に説明すると、次のようになります。
モジュール（Module）：パーツをまとめる箱
アプリケーションを実行する上で、アプリケーションが使う機能を登録するための機能です。
ルートモジュールが必ずあり、さらにその配下に各機能ごとのモジュールがぶら下がる構成になります。
コントローラー（Controller）：ルーティング担当
クライアントからのリクエストを受け付けて、レスポンスを返す役割を担います。
コントローラーにコードを書くと肥大化してしまうため、ルーティング処理をコントローラーに任せてビジネスロジックはサービスに書きます。
サービス（Service）：実際の処理
実現したい処理を書くところ。コントローラから呼び出します。
全体像については以下の記事の図がわかりやすいです。
使うもの
- VSCode or Cursorエディタ
- Rest Client
- Nest CLI
準備
まずはNestCLIをインストールします。
以下のコマンドを実行しましょう。
npm i -g @nestjs/cli
公式サイトはこちら（英語）
続いてプロジェクトを作成します。
以下のコマンドを実行して構築します。
nest new hello-nestjs
npmを選択してEnterを押します。
プロジェクトの構築が完了したら、以下のように表示されます。
作成したプロジェクトを、VSCodeまたはCursorエディタで開きましょう。
次に不要なファイルとフォルダを削除します。
app.controller.spec.ts, app.controller.ts, app.service.ts, testフォルダを削除します。
app.module.tsを以下のようにします。
import { Module } from '@nestjs/common';
@Module({
imports: [],
controllers: [],
providers: [],
})
export class AppModule {}
これで準備は完了です。
バナナをGETしよう！
モジュールを作成する
まずはじめに、モジュールを作成しましょう。
以下のコマンドを実行します。
nest g module animal-foods
animal-foodsモジュールが作成されます。
ルートモジュールであるapp.moduele.tsに、AnimalFoodsModuleが自動的に登録されます。
コントローラとサービスを作成する
続いてコントローラとサービスを作成しましょう。
以下のコマンドを実行し、コントローラを作成します。
nest g controller animal-foods --no-spec
--no-specオプションをつけることで、テストファイルが作成されなくなります。
以下のコマンドを実行し、サービスを作成します。
nest g service animal-foods --no-spec
これでコントローラとサービスが追加されました。
AnimalFoodsModuleの中に、コントローラとサービスが自動的に登録されます。
サービスを実装する
サービスクラスを実装してみましょう。
import { Injectable } from '@nestjs/common';
@Injectable()
export class AnimalFoodsService {
findBanana() {
return 'BA🍌NA🍌NA';
}
}
findBananaメソッドでバナナを見つけます。
コントローラを実装する
コントローラからサービスクラスであるAnimalFoodsServiceをインポートし、findBananaメソッドを呼び出します。
コントローラとサービスで実装を分けることにより、コントローラの肥大化を防ぎます。
import { Controller, Get } from '@nestjs/common';
import { AnimalFoodsService } from './animal-foods.service';
@Controller('animal-foods')
export class AnimalFoodsController {
constructor(private readonly animalFoodsService: AnimalFoodsService) {}
@Get()
findBanana() {
return this.animalFoodsService.findBanana();
}
}
Getデコレータをつけることにより、HTTP GETリクエストを受け取ることができます。
これでアプリケーションは完成です。
REST Clientでバナナを取得しよう
それでは完成したアプリケーションを実行し、バナナを取得しましょう。
まずはRest Clientを準備します。
以下の記事を参考にしてみましょう。
restclientフォルダを作成し、request.httpファイルを作成ます。
@baseUrl = http://localhost:3000/animal-foods
# 🍌
GET {{baseUrl}}
以下のコマンドを実行し、アプリを起動します。
npm run start:dev
Send Requestを実行してリクエストを送ります。
バナナがGETできればOKです。お疲れ様でした！
参考
Discussion