やりたいこと
- Node.jsのWebアプリケーションフレームワークである
Express.jsをTypeScriptで構築する - プロジェクトを始める際の初期のセットアップを行う
-
localhost:8000にアクセスすると任意の文字列を表示させる
全体像
Express.jsのプロジェクト作成
$ mkdir type-express && cd type-express
$ npm init -y
$ npm install typescript ts-node @types/node --save-dev
$ npx tsc --init // tsconfig.json が作られる
$ npm install express
$ npm install @types/express --save-dev
$ npm install nodemon --save-dev
$ mkdir src && touch index.ts
tsconfig.json の設定
tsconfig.json
{
"compilerOptions": {
"target": "es2022", /* コンパイル後の JavaScript のバージョンを指定 */
"module": "NodeNext", /* NodeNext -> 最新の Node.js の ECMAScript モジュールシステムを使用するように指定 | これにより、最新の import/export 構文を使用可能となる */
"moduleResolution": "Node16", /* Node.js スタイルのモジュール解決方法を使用する宣言 | import 文でモジュールを探す方法を指定する */
"baseUrl": "src", /* モジュールの相対パスの基準となるディレクトリを src に設定 */
"sourceMap": true, /* ソースマップファイルの生成を有効化 | れにより、デバッグ時に TypeScript のソースコードを参照できるようになる */
"outDir": "dist", /* コンパイルされた JavaScript ファイルの出力先を dist ディレクトリに設定 */
"esModuleInterop": true, /* CommonJS モジュールを ES6 モジュールのように扱えるようにする設定 | import * as foo from 'foo' の代わりに import foo from 'foo' と書けるようになる */
"forceConsistentCasingInFileNames": true, /* ファイル名の大文字小文字の一貫性を強制する指定 */
"noImplicitAny": true, /* 暗黙的な any 型を禁止 */
"skipLibCheck": true /* 宣言ファイル（.d.ts）の型チェックをスキップする指定 */
},
"include": ["src/**/*"], /* コンパイル対象のファイルを指定 | ワイルドカード を使って、src ディレクトリとそのサブディレクトリにあるすべてのファイルが対象と指定している */
}
開発効率化ライブラリ -nodemon- の導入
nodemonとは
Node.jsアプリケーションの開発を効率化するツール
- ファイル変更の監視：ソースコードに変更があると自動的に検知する
- 自動再起動：変更を検知すると、アプリケーションを自動的に再起動する
- TypeScriptなどのトランスパイル言語のサポート：設定により、直接TypeScriptファイルを実行できる
ルートディレクトリに nodemon.jsonファイルを作成
nodemon.json
{
"watch": ["src"],
"ext": ".js,.ts",
"exec": "npx ts-node ./src/index.ts"
}
-
"watch": ["src"]srcディレクトリ内のファイルを監視する指定 -
"ext": ".js,.ts"拡張子が.jsまたは.tsのファイルの変更を監視する設定 -
"exec": "npx ts-node ./src/index.ts"変更を検知したときに実行するコマンドを指定（この場合、ts-nodeを使用してsrc/index.tsファイルを実行する、という記述になる）
エントリーファイルの設定
src/index.ts
import express, { Express, Request, Response } from 'express'
const app: Express = express()
app.get('/', (req: Request, res: Response) => {
res.send('Hello World!')
})
app.listen(8000, () => {
console.log('Server is running on http://localhost:8000')
})
ローカルサーバー起動
package.json
{
"name": "type-express-ec",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npx nodemon" // <-追記!!
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/express": "^4.17.21",
"@types/node": "^20.14.9",
"ts-node": "^10.9.2",
"typescript": "^5.5.3"
},
"dependencies": {
"express": "^4.19.2"
}
}
$ npm start