【npm編】Node.js & TypeScriptの実行環境構築手順まとめ

今回はNode.js + TypeScriptにおける実行環境をnpmを用いて構築する手順を備忘録としてまとめていきます。
本格的に実装していくための準備として、必要最低限のファイルを作成します。

開発環境

• Node.js：v18.19.1
• npm：v10.2.4
• TypeScript：v5.4.2

構築の流れ

前提
  Node.jsがinstallされていること
  実装するためのエディターはインストールされていること

ゴール：ファイル実行後、コンソール上に「Hello World!!」と出力されればOK

もしNode.jsのインストールがまだであれば下記の記事を参考にしてください

あわせて読みたい

Node.jsバージョン管理：Voltaの導入方法と基本的な使い方 今回は、業務でNode.jsのバージョン管理ツールである『Volta』を導入し、かなり良かったので備忘録としてまとめていきたいと思います。「Volta」は、プロジェクトフォル…

初期化コマンドの実行

package.jsonを生成するためのコマンドを実行

$ npm init --yes

--yesを引数に付与すると、各質問に回答せずにpackage.jsonファイルが生成される
 公式Doc

ライブラリのインストール

Node.jsをTypeScriptで実装・実行するために必要な下記3つのライブラリをインストール

1. typescript：Node.jsをTypeScriptで実装するための静的型付け言語の基本的なライブラリ
2. @types/node@16：TypeScriptのためのNode.jsの型情報を提供するライブラリ
3. ts-node：TypeScriptファイルをJavaScriptにコンパイルし、Node.js上で実行するためのツール

$ npm install --save-dev typescript @types/node@18 ts-node

--save-dev引数を付けることでdevDependenciesセクションに追加される。
開発環境でしか使用しない場合は、基本的にこのオプションを付ける

設定ファイルの実装

tsconfig.jsonファイルを生成し、以下のように設定を追加します。

$ npx tsc --init

設定ファイルに関しては必要最低限の設定を実装します。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["./src/**/*.ts"]
}

package.json

{
  "name": "node_sample",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "npx tsc",
    "build:watch": "npx tsc --watch"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gorida/node_sample.git"
  },
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^18.19.22",
    "ts-node": "^10.9.2",
    "typescript": "^5.4.2"
  }
}

.gitignore

node_modules
dist

本当に必要最低限の設定しかしていないため、今後実装していく中で追加や変更していく

実行ファイルの実装

ファイルが実行できたことを確認できればいいので、一旦ログ出力のみを実装

拡張子に.tsがついたファイルを作成し、一旦ログ出力用のコードを追加

この後ビルドすることでjsファイルへコンパイルされ、Node.jsの実行環境でファイルが実行できるようになる

index.ts

console.log('Hello World!!');

簡単ですが、実装は以上。

ビルド実行&動作確認

ビルド実行

package.jsonに定義したscriptsの一つであるbuildを実行する
実際のコマンドの中身はnpx tscを実行している

ビルドが成功するとルート直下にdist/ディレクトリが生成され、その中にコンパイルされたindex.jsが格納されている。そして、そのファイルをnodeコマンドで実行

$ npm run build
> node_sample@1.0.0 build
> npx tsc

$ node dist/index.js
Hello World!!

無事に「Hello World」と出力されたことを確認できました

ちなみにts-nodeを使うと直接tsファイルを実行することも可能

$ npx ts-node src/index.ts
Hello World!!

最終的なディレクトリ構成

.
├── node_modules
├── dist
│   └── index.js
├── src
│   └── index.ts
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json

テンプレートリポジトリとして使用

Node.js & TypeScriptのプロジェクトを毎回一から作成するのが面倒なので、Github上でテンプレートリポジトリとして設定することが可能です。

具体的には以下の手順となります。

1. 対象リポジトリの「Settings」→「Template repository」にチェックを入れる
2. 新しいリポジトリを作成する際に「Repository template」より対象のリポジトリを選択

これで毎回一から作成することなく、テンプレートを用いて効率よく開発が始められます。

まとめ

今回はNode.js上でTypeScriptで実装した処理を実行するための手順を整理してみました。
作成したリポジトリをテンプレートとして流用可能となりますので、どんどん使っていければと思います。