Zenn
😄

【超初心者向け】NestJSでサンプルプロジェクトを作ってみる（Windows）

2023/07/30に公開
JavaScript
Node.js
初心者向け
NestJS
#
環境構築
tech

記事の概要

この記事では、今話題のフレームワークであるNestJSの入門として、次の流れで解説していきます。

  • 環境構築
  • サンプルプロジェクトの作成
  • 動作確認

超初心者向けなので、NestJSの入門でつまずいている方、諦めそうな方はぜひ一度読んでみてください。
きっと、最初の一歩を踏み出せると思います。

NestJSとは

Node.jsというサーバサイドでJavaScriptが動く環境向けのアプリケーションを効率的に作ることができるフレームワークです。
詳しくは、公式ドキュメントを日本語訳してくださっている記事がありますので、ご参照ください。
NestJS 公式ドキュメントver7日本語訳

環境構築

前提

今回はWindows10(64bit)と、Visual Studio Code（以下「VSCode」という。）で作っていきます。

Node.JSのインストール

NestJSはNode.jsのフレームワークなので、まずはNode.JSをインストールします。
Node.JS公式ホームページからインストーラをダウンロードしてインストールします。

NestJSプロジェクトの作成

インストールが完了したら、お好みのCLI（コマンドラインインターフェース）を起動してください。筆者はPowershellを使います。

続いて、プロジェクトを作成したいフォルダに移動します。

> cd C:\dev

次のコマンドを実行してプロジェクトを作成します。nest-sampleの部分はお好みのプロジェクト名を指定してください。

> npx -p @nestjs/cli nest new nest-sample

表示されたパッケージをインストールする必要があるかをどうか聞かれるので、yと回答します。

Need to install the following packages:
  @nestjs/cli@10.1.8
Ok to proceed? (y)

どのパッケージマネージャーが良いか聞かれるので、好みに合わせて選択します。

? Which package manager would you ❤️  to use? (Use arrow keys)
> npm
  yarn
  pnpm

筆者は、初心者なので、公式パッケージマネージャーであるnpmを選択しました。
選択にあたっては、こちらのブログを参考にさせていただきました。

パッケージマネージャーを選択すると、いよいよNestJSがインストールされます。

インストールの様子（長いので畳みます）
? Which package manager would you ❤️  to use? npm
CREATE nest-sample/.eslintrc.js (663 bytes)
CREATE nest-sample/.prettierrc (51 bytes)
CREATE nest-sample/nest-cli.json (171 bytes)
CREATE nest-sample/package.json (1956 bytes)
CREATE nest-sample/README.md (3340 bytes)
CREATE nest-sample/tsconfig.build.json (97 bytes)
CREATE nest-sample/tsconfig.json (546 bytes)
CREATE nest-sample/src/app.controller.spec.ts (617 bytes)
CREATE nest-sample/src/app.controller.ts (274 bytes)
CREATE nest-sample/src/app.module.ts (249 bytes)
CREATE nest-sample/src/app.service.ts (142 bytes)
CREATE nest-sample/src/main.ts (208 bytes)
CREATE nest-sample/test/app.e2e-spec.ts (630 bytes)
CREATE nest-sample/test/jest-e2e.json (183 bytes)

√ Installation in progress... ☕

🚀  Successfully created project nest-sample
👉  Get started with the following commands:

$ cd nest-sample
$ 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

npm notice
npm notice New minor version of npm available! 9.5.1 -> 9.8.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.8.0
npm notice Run npm install -g npm@9.8.0 to update!

インストールの最後に、npmの新しいマイナーバージョンが出ているよとアドバイスいただいたので、仰せの通りアップデートします。

> npm install -g npm@9.8.0

added 1 package in 13s

28 packages are looking for funding
  run `npm fund` for details

さて、CLIでプロジェクトが作成されているかどうか、確認しましょう。

> ls
    ディレクトリ: C:\dev
Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2023/07/12     20:47                nest-sample

プロジェクトフォルダの中身も見てみましょう。

> ls nest-sample


    ディレクトリ: C:\dev\nest-sample


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2023/07/12     20:47                node_modules
d-----        2023/07/12     20:45                src
d-----        2023/07/12     20:45                test
-a----        2023/07/12     20:45            663 .eslintrc.js
-a----        2023/07/12     20:47            391 .gitignore
-a----        2023/07/12     20:45             51 .prettierrc
-a----        2023/07/12     20:45            171 nest-cli.json
-a----        2023/07/12     20:47         296194 package-lock.json
-a----        2023/07/12     20:45           1956 package.json
-a----        2023/07/12     20:45           3340 README.md
-a----        2023/07/12     20:45             97 tsconfig.build.json
-a----        2023/07/12     20:45            546 tsconfig.json

見事、プロジェクトが作成されています！アガりますね！！

Visual Studio Codeでプロジェクトを開いてみる

ここからは、VSCodeを使っていきます。
インストールしていない方は、こちらからインストールしましょう。

フォルダーを開くから、先ほど作成したプロジェクトフォルダ（筆者はnest-sample）を開きます。

初めて開く場合は、フォルダ内のファイルの著者を信頼するかどうか聞かれます。もちろん信頼します。

VSCode上で、先ほど作成したプロジェクトフォルダを開くことができました。

動作確認

それでは、動作確認してみましょう！

実は、VSCodeでもCLIを使うことができます。
メニューバー＞表示＞ターミナルで開くことができます。

コマンドnpm run startでアプリケーションを実行します。

PS C:\dev\nest-sample> npm run start

> nest-sample@0.0.1 start
> nest start

[Nest] 18740  - 2023/07/27 19:58:01     LOG [NestFactory] Starting Nest application...
[Nest] 18740  - 2023/07/27 19:58:01     LOG [InstanceLoader] AppModule dependencies initialized +34ms
[Nest] 18740  - 2023/07/27 19:58:01     LOG [RoutesResolver] AppController {/}: +66ms
[Nest] 18740  - 2023/07/27 19:58:01     LOG [RouterExplorer] Mapped {/, GET} route +7ms
[Nest] 18740  - 2023/07/27 19:58:01     LOG [NestApplication] Nest application successfully started +8ms

エラーなく実行されたことを確認したら、ウェブブラウザ上でhttp://localhost:3000/にアクセスしてみましょう。

画面上にHello World!と表示されていれば、無事アプリケーションが実行されています！
感無量です！！！

あとがき

無事Hello world!が表示されましたでしょうか？

筆者は、触ったことのない開発環境や新しいフレームワークを使い始めることが苦手で、環境構築時点で思い通りにいかず、嫌になってしまうことがあります。
プログラミングを始めて間もない方は特に、同じ悩みを持たれている方も多いのではないでしょか。

今回は、そんな理由でソフトウェア開発を諦めてしまう方を一人でも減らしたいと思い、しつこいくらい詳しめに執筆してみました。
ソフトウェアエンジニアは、日本の、そして世界の未来を、テクノロジーの力で創っていくことができる素晴らしい職業だと思います。
日本のソフトウェアエンジニアが増え、この業界がもっともっと盛り上がることを願って、これからも執筆していこうと思っています！

Discussion