NodeでAPI環境をシンプルに【TypeScript Nodemon】

挨拶

今回は、Node.jsとTypescriptを使用してAPI（Express）を構築するまでの準備から「HelloWorld！！」と返答するまでのプログラム構築までを記録としてシェアしていきます。今回構築した環境を以下に示します。ここに示しているライブラリはAPIを構築するにあたって最低限必要なライブラリとなります。

もしExpressでWEBページを出す場合はTailwindでデザインしましょう。Tailwindの布教記事を置いておきます。

それでは初めて行きます。

シンプルな環境構築

事前準備

Nodeのインストールは、いろいろな手法がありますがすでにインストールされている方もいるかと思います。バージョンだけ確認しましょう。以下のコマンドをコマンドプロンプトに入力してください。

node -v

バージョンが返ってきた場合は、問題ありませんので次に進みましょう。以下成功例

node -v
v16.15.0

もし、Nodeのインストールがまだの方は、ネットにたくさん記事がありますのでどこかの記事に入信しましょう。僕が入信している方の記事を紹介しておきます（心の中の師匠です..）。僕はVoltaを使用しています。

今回は、パッケージマネージャとして「yarn」を使用しています。この辺はお好みなのですが以下のパターンがありますね。比較記事を掲載しておきます。

• npm
• yarn
• pnpm

この辺りは宗派みたいなものなので、好きに切り替えてください。異なる点としては「動作スピード」・「パッケージ対応」ぐらいですので、不安な人は「npm」でも問題ありません（サンプルがたくさんあります）。ただ、説明は「yarn」で進めていきます。

いいツイートを見つけたのでシェアしておきます。

【超ザックリ解説】npm VS yarn

両者ともJavaScript＆TypeScriptのWeb開発に必要不可欠なパッケージマネージャー。

ところが、両者には決定的な違いがある。混同するなかれ。#駆け出しエンジニアと繋がりたい#今日の積み上げ#プログラミング pic.twitter.com/PvL8ijgbK7

— Shota Nukumizu (@Nameless_SN) February 1, 2023

とりあえずパッケージインストール

とりあえず作業ディレクトリを用意しましょう。コマンドラインツールを使って作る方法を紹介しますが、Windowsの方はファイルを作ってVSCodeで開いてTerminalを開くのもありです。

mkdir api-test
cd api-test
yarn init -y

上のコマンドを順番に入力しましょう。VSCodeの場合は、「api-test」というファイルを作成して、VSCodeで開きTerminalに「yarn init -y」と入力しましょう。入力したディレクトリに「package.json」が表示されると成功です。

あとは以下のコマンドのコメント部分を無視して一行ずつコピー＆ペーストをしましょう。

プログラム構築

パッケージの説明は後にして、とりあえずプログラムを動くように構築していきましょう。目指すファイル構造はこちらです。

「package.json」・「yarn.lock」はコマンドを打ったことで作成されているかと思います。今回作成する必要があるのは「app」フォルダだけになります。コマンドでもGUIでもいいので「app」ファイルを作成しましょう。

「app」フォルダ内に「app.ts」というファイルを作成してください。「app.ts」のファイルの中身は以下をコピペしてください。コードの理解としては僕もこれからですが、「body-parser」は送信されたHttp通信のbodyをいい感じに読めるように変換してくれるというものだと思っています。と思って調べたら、「Express」に標準搭載されている可能性が出てきました。ですが、不安なので書いておきます。

コードの実行

コードは作成できたので動くか確認していきます。起動コマンドとしてはいかになります。

とりあえず、「ts-node」を利用して実行してみましょう。実行したターミナルに「”listen on port　4242」と表示されていればもんだありません。http://localhost:4242/helloworldにアクセスしてみて、画面に「hello, world」と表示されれば成功です。

起動コマンドが二つある理由について説明します。Typescriptを使用している場合では、実行するためにJavascriptにビルドする必要があります。そのビルドの面倒を解消してくれるのが、「ts-node」か「nodemon」になります。開発の場合では、どちらか一方だけあれば問題ないと思います。

何方でもよいといわれるのであれば「nodemon」をお勧めします。理由としては「nodemon」ではファイルの変更を検知して自動でビルドを走らせてくれるからです。

比較のために「ts-node」でファイルを実行してから、「hello, world」を「I love you」に変更・保存をしてアクセスしてみてください。おそらくですが、画面に表示されているメッセージは「hello, world」のままになっているかと思います。コマンドを終了して、もう一度実行して開くとメッセージは切り替わります。

その一方で「nodemon」を実行した場合だと、ファイルを保存したタイミングで自動的にビルドが走り少し時間がたつと画面が更新されます。

開発者としては、実行してコードを変更するだけなのでとても楽になります。

最後に、いちいち「yarn ~~~」とパスを指定するのも面倒なので、「yarn watch」と「yarn start」と打てば実行できるように「package.json」に追記をします。

保存して、ターミナルで「yarn watch」と打って動作すれば完了です。これにて環境構築は終了となります。

コードとしては「app.ts」を変更していくことでAPIが作れるようになります。

おわりに

お疲れ様でした。超特急で実装までまとめました。最近の環境構築では、Dockerのオールインワンスタイルなどいろいろありますが、コマンドになれるみたいな意味も込めてポチポチやっています。特にNodeのパッケージ群に関しては、エラーメッセージで解消することがほとんどなので、詰まったら調べてみましょう。そしてメモを取るとなおよいと思います。

今回作成したメモはREADME.mdで公開しているので読んでみるのもありだと思います。ついでに、このメモがいい具合で取れたので報告したブログも載せておきます。

次は、このプロジェクトをベースにAPIを作成していきたいと思います。その前にいったんリンターであるESLintの説明を入れていきます。

ではまた！

About 龍：Ryu 107 Articles

2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中（業務もね）//

Twitter YouTube