ローカルPCにNode.jsがインストールされている前提で進めます。
インストールがまだの方は下記を参考にインストールしてください。
完成物のgithub
クローンして npm installを流せばすぐ使えます！
作成手順
ターミナルを開き、作業ディレクトリを作成して移動します。（名前はなんでもOKです！）
mkdir ExpressTs
cd ExpressTs次に、package.jsonを作成します。
npm init -yExpressのセットアップ
expressをインストールします。
npm install expressnode_modules、package-lock.jsonが追加で作成されました。
git管理している場合、.gitignoreを作成しnode_modulesを管理から外しておきます。
touch .gitignore
echo node_modules >> .gitignore次に、app.jsを作成します。一旦JavaScriptファイルで確認します。
touch app.jsconst express = require("express");
const app = express();
const port = 3000;
app.get("/", (req, res) => {
res.send("Hello World!");
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});アプリを起動し、http://localhost:3000/にアクセスします。
node app.js
このように起動できていればOKです！
TypeScriptのセットアップ
TypeScriptと型定義ファイルをインストールします。
npm i -D typescript @types/node @types/expresstsconfig.jsonを作成します。
npx tsc --init作成されるとターミナルにはこのように表示されます↓
app.jsをapp.tsに変更します。
また、1行目はrequiredではなく、importにします。
import express from "express";
const app = express();
const port = 3000;
app.get("/", (req, res) => {
res.send("Hello World!");
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
修正ごとにコンパイルしたjsを実行するのは開発効率が悪いので、ts-nodeを入れてtsを実行するような形にします。
npm i -D ts-node実行します↓
npx ts-node app.tshttp://localhost:3000/ でHELLO WORLDが立ち上がればOKです。
nodemonで変更検知
nodemonを使って、ファイルの変更を検知して自動でコンパイルされるようにします。
変更ごとに毎回 npx ts-node app.tsを打つのは面倒です💦
npm i -D nodemon起動します。
npx nodemon app.tsこの状態で、app.tsを変更すると自動で再起動されます。
起動コマンドはnpm scriptsに追加しておきましょう。
{
"name": "expressts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"npx nodemon app.ts"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
},
"devDependencies": {
"@types/express": "^4.17.21",
"@types/node": "^20.11.0",
"nodemon": "^3.0.2",
"ts-node": "^10.9.2",
"typescript": "^5.3.3"
}
}
これで、
npm run devで起動できるようになりました🙌
