環境構築
プロジェクトを作成し、Express + TypeScript の開発環境をセットアップします。
このレッスンで作るもの
Express + のプロジェクトをゼロから作成します。レッスンの最後には、開発サーバーが起動できる状態になります。
プロジェクトフォルダの作成
を開いて、お好きな場所にフォルダを作成します。
mkdir attendance-api
cd attendance-apiVSCodeでフォルダを開きます。
code .Step 1: プロジェクトを初期化する
で以下のコマンドを実行して、Node.jsプロジェクトを初期化します。
npm init -ypackage.json が作成されます。このファイルはプロジェクトの設定ファイルです。
-y は全ての質問に「はい」と答えるオプションです。後から package.json
を編集できるので、今は気にしなくてOKです。
Step 2: 必要なをインストールする
Express のインストール
npm install expressと型定義のインストール
npm install -D typescript @types/express @types/node tsx-D は「開発時のみ使う」という意味です。本番環境には含まれません。
- - TypeScript
- @types/express - Expressの型定義（TSがExpressのコードを理解するために必要）
- @types/node - .jsの型定義
- tsx - TypeScriptファイルを直接実行するためのツール
の違い
| 種類 | 役割 | |
|---|---|---|
| express | 本番用 | 本体 |
| 開発用 | TSをJSに変換する | |
| @types/express | 開発用 | Expressの型情報 |
| @types/node | 開発用 | .jsの型情報 |
| tsx | 開発用 | TSファイルを直接実行（不要） |
Step 3: の設定
TypeScriptの設定ファイルを作成します。
npx tsc --inittsconfig.json が作成されます。内容を以下に置き換えてください。
npm と npx の違い
ここでは npx tsc --init を使いましたが、Step 2 では npm install を使っていました。この2つは似ていますが、役割が異なります。
npm はのインストールや管理を行うツールです。npm install express のように、
をプロジェクトに追加するときに使います。
npx はのコマンドを一時的に実行するためのツールです。npx tsc --init は、
インストール済みの tsc（TypeScript）コマンドを実行しています。
| コマンド | 役割 | 例 |
|---|---|---|
| npm | のインストール・管理 | npm install express |
| npx | のコマンドを実行 | npx tsc --init |
npx を使うと、グローバルインストールしなくてもプロジェクト内ののコマンドを実行できるので便利です。
{
"compilerOptions": {
"target": "ES2020",
"module": "Node16",
"moduleResolution": "Node16",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*"]
}重要な設定項目だけ説明します。
| 設定 | 説明 |
|---|---|
| strict: true | 厳格な型チェックを有効にする（型の恩恵を最大限受けられる） |
| outDir | 後のJSファイルの出力先 |
| rootDir | ソースコードの格納先 |
tsconfig.json は の設定ファイルです。今は中身を理解しなくても大丈夫なので、そのままコピーして使ってください。
Step 4: ソースフォルダを作成する
ソースコードを格納する src フォルダを作成し、エントリーポイントとなるファイルを作ります。
mkdir srcsrc は ソースコードを格納するフォルダーです。これは執筆者の好みではなく、業界の標準的な習慣です。
src/index.ts を作成して、以下の内容を書きます。
console.log("Hello, Express!");Step 5: 開発用スクリプトを設定する
package.json にスクリプトを追加します。"scripts" セクションを以下のように書き換えてください。
"scripts": {
"dev": "tsx watch src/index.ts",
"build": "tsc",
"start": "node dist/index.js"
}| コマンド | 説明 |
|---|---|
| npm run dev | 開発サーバーを起動（ファイル変更を自動検知） |
| npm run build | TypeScriptをJavaScriptに |
| npm start | 済みのJSを実行（本番用） |
スクリプトとは
package.json の "scripts" には、よく使うコマンドに短い名前をつけて登録できます。
開発サーバーを起動する際に毎回 tsx watch src/index.ts と入力するのは面倒ですよね。
そこで "dev" という名前を付けておけば、npm run dev だけで同じコマンドが実行されるようになります。
"dev": "tsx watch src/index.ts"
↓ npm run dev と入力するだけで
↓ tsx watch src/index.ts が実行される
これにより、長いコマンドを覚えなくても npm run dev で開発を始められます。
また、 npm run dev で開発サーバーが起動するという共通ルールが慣例的に存在してるので、
チームやプロジェクトが変わってもこのコマンドを覚えておけば新しいプロジェクトに参加したときもすぐに開発を始められます。
Step 6: 動作確認
開発サーバーを起動してみましょう。
npm run devに以下のように『Hello, Express!』と表示されれば成功です。
Ctrl + C でサーバーを停止できます。
現在のフォルダ構造
現在のフォルダー構成です。srcとindex.ts以外は自動生成されるはずですので、
もし存在しない場合は、操作に漏れがないか確認しましょう。
- index.ts← 作成するファイル
- package.json
- package-lock.json
- tsconfig.json
次のステップ
開発環境の準備ができました。次のレッスンでは、Expressを使って最初のサーバーを立ち上げます。