[Node.js] Express を TypeScript で書く - 環境整備まで

背景

backendをexpress、frontendをreactでシステムを構築するための練習として、
簡単なblogシステムを作ろうかなと思い、手を出してみました。

言語は typescript が好きなのでそれを活かしたプロジェクト作りをしていきたい。

この記録は環境構築の手順とか設計から製造までの記録を残してこうかなと。

前提とか

環境は以下を前提としてます。

• Windows 10
• Node.js 10.10.0
• Express 4.16.3
• TypeScript 3.0.3
• Visual Studio Code 1.26.1

準備とか

パッケージのインストール

npm はインストール済みであることを前提。

フォルダを作り、まずはいつもの npm init (たまに忘れる)

npm init

パッケージのインストール

npm install --save express

npm install --save-dev @types/express
npm install --save-dev typescrpt
npm install --save-dev tslint tslint-config-airbnb
npm install --save-dev awesome-typescript-loader source-map-loader
npm install --save-dev webpack-node-externals

webpackを使うのでまだインストールしてない人はこちらもやる。

npm install -g webpack webpack-cli

フォルダ構成

(root)
- /dist
- /node_modules
- /src
  - server.ts (エントリーポイント)
- package-lock.json
- package.json
- tsconfig.json
- tslint.json
- webpack.config.js

設定ファイル書き書き

とりあえず最低限のもののみ。必要になったら更新します。

package.json(一部抜粋)

{
    "scripts": {
        "start": "node dist/server.js"
    },
}

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist",
        "sourceMap": true,
        "module": "es6",
        "target": "es5",
        "moduleResolution": "node",
        "removeComments": true
    },
    "include": [
        "./src/**/*"
    ]
}

tslint.json

{
    "extends": ["tslint-config-airbnb"],
    "rules": {
        "ter-indent": [true, 4]
    }
}

webpack.config.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
    mode: 'production',

    entry: './src/server.ts',

    output: {
        filename: 'server.js',
        path: path.join(__dirname, 'dist')
    },

    devtool: 'source-map',

    resolve: {
        extensions: ['.ts', '.js', '.json']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'awesome-typescript-loader'
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                loader: 'source-map-loader'
            }
        ]
    },

    externals: [
        nodeExternals()
    ]
}

webpackの書き方は Typescript公式に乗ってるものを参考に少し書き換えた。
React & Webpack - Typesciprt

動作テスト用サンプルコード

src/server.ts

import * as Express from 'express';

const app = Express();

app.get('/', (req: Express.Request, res: Express.Response, next: Express.NextFunction) => {
    return res.send('Hello Nyanko.');
});

app.listen(3000, () => {
    console.log('Listen on port 3000.');
});

export default app;

expressの知識は初心者なので文法的にこれでいいのかとかは今は置いておく。
今日は動けばよい。

ビルドと実行

ビルド

webpack

実行

npm start

テスト

ブラウザでテストしてもいいのだけど、今後の事を考えて Chrome拡張の ARC(Advenced REST Client) を利用してます。GUIで出来るだけでなく、送信するヘッダや本文などを編集できたり履歴を残したりできるのでAPI開発には便利だとおもいます。

Advenced REST Client

http://localhost:3000/ にアクセスし、 Hello Nyanko が帰ってきたのでOK。

次はexpressをつかったルートマッピングとかそこらへん。

[Node.js] Express を TypeScript で書く - ルーティング編