teme-qualia / household-account-book

家計簿管理アプリ 練習用
0 stars 0 forks source link

Node.js + Express.js (TypeScript)で開発環境を作れるか検討 #12

Closed hironaeee closed 1 year ago

hironaeee commented 1 year ago

IDE: VSCode

hironaeee commented 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のデバック設定

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)を実行

// index.ts
let message: string = 'hello world'
console.log(message)

デバッグ実行ボタンで、プログラムが実行できることを確認します。