Closed hironaeee closed 1 year ago
VSCodeのターミナルを起動します。
npm init --yes
npm i express
npm i -D typescript
npm i -D @types/node @types/express
package.jsonにパッケージが追加されます。
-D
オプションを付けるとdevDependencies
セクションに追加され
開発でのみ使用するパッケージはこちらへまとめておきます。
なお-D
オプションを付けない場合はdependencies
セクションに追加されます。
TypeScriptの設定ファイルを作成します。
npx tsc --init
tsconfig.json
が生成されます。
以下の行のコメントを外します。
sourceMap
はtsファイルとjsファイルのマッピングファイル(js.map)が作成されて
デバッグで使用されるそうです。
- //"sourceMap": true,
+ "sourceMap": true,
- // "outDir": "./",
+ "outDir": "out",
VSCodeのデバッグタブでデバッグ用のファイル.vscode/launch.json
を
作成します。
以下の行を変更します。
- "program": "${file}"
+ "program": "${workspaceFolder}/index.ts",
+ "preLaunchTask": "tsc: build - tsconfig.json",
+ "outFiles": [
+ "${workspaceFolder}/out/**/*.js"
+ ]
デバッグ実行は「▷」ボタンを押してできるようになります。
├─ controllers 処理内容をまとめたフォルダ
├─ models classをまとめたフォルダ
└─ routes ルーティングをまとめたフォルダ
expressのルーティングはapp.METHOD
で行えます。
公式ドキュメントより
const app = express()
// GET method route
app.get('/', (req, res) => {
res.send('GET request to the homepage')
})
// POST method route
app.post('/', (req, res) => {
res.send('POST request to the homepage')
})
第一引数にルートパスを、第二引数にコールバック関数を指定します。
このうち、第二引数のコールバック関数は処理が長くなりがち
なのでcontrollerファイルに分ける方針にしています。
// userContoller.ts
import express from 'express'
import accountUser from '../models/accountUser'
export const users = function(req: express.Request, res: express.Response) {
res.send('NOT IMPLEMENTED: accountUser List')
}
export const user = function(req: express.Request, res: express.Response) {
res.send('NOT IMPLEMENTED: accountUser')
}
// usrRoutes.ts
router.get("/users", userController.users)
router.get("/user", userController.user)
MDNのドキュメントにあったコードを参考にしています。(「日本語」を選択してるのに英語笑)
// index.ts
let message: string = 'hello world'
console.log(message)
デバッグ実行ボタンで、プログラムが実行できることを確認します。
IDE: VSCode