【備忘録】Express環境構築

はじめに

サーバーサイドの勉強を始めようかと思い、汎用性が高そうなTypeScriptを使って実装できるExpressの勉強を始めました。
Expressの環境構築手順を備忘録としてまとめておきます。

環境構築

プロジェクトのフォルダを作成

mkdir sample-project
cd sample-project

npmを初期化

-yをつけると、初期設定をデフォルトで始められます。

npm init -y

Expressをインストール

npm install express

TypeScriptをインストール

npm install typescript --save-dev

nodeの型定義をインストール

TypeScriptを使って、パッケージを利用する場合、型の情報が必要みたいなので、インストールします。

npm install @types/node --save-dev

expressの型定義をインストール

npm install @types/express --save-dev

Tips
以下のように、複数指定もできる

npm install typescript @types/node @types/express --save-dev

また短縮系として以下の書き方も可能

npm i typescript @types/node @types/express -D

tsconfig.jsonを作成

TypeScriptのファイルをコンパイルする設定ファイル作成

npx tsc --init

tips

npxは、プロジェクト内でnpm installしたパッケージを使用できるコマンド

作成したら、TypeScriptファイルを配置する場所と、コンパイルしたjsファイルを出力するフォルダを設定します。

/* 下記で定義した設定以外はデフォルトのまま */
{
  "compilerOptions": {
    "outDir": "./build",
  },
  /* includeはcompilerOptionsの外なので注意 */
  "include": [
    "src/**/*"
  ],
}

動作確認

上記まで完了したら、動作確認が可能です。
プロジェクトにsrcフォルダを作成し、その配下にindex.tsを作成します

src/index.ts

import express from 'express';
const app = express();
const port = 3001;

app.get('/', (req, res) => {
    res.status(200).send('Hello World!');
});

app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

ファイルを作成後、以下を実行すると、build/index.jsが作成されるはずです。

npx tsc

build/index.jsが作成されたら、起動してみます。

node build/index.js

Server is running on port 3001が出力されたら成功です。
ブラウザで、localhost:3001を入力すると、Hello World!が表示されます。
終了したい場合は、ターミナルでCtrl+Cを押すと終了します。

オプション

ここからはLinterなど、オプションの導入手順を記載します

Linterをインストール

TypeScriptのESLintをインストール

npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

Airbnbのルールをインポート

npm i eslint-config-airbnb-base eslint-plugin-import eslint-config-airbnb-typescript -D

設定ファイルを作成

touch tsconfig.eslint.json .eslintrc.yml

tsconfig.eslint.json

{
    "extends": "./tsconfig.json",
}

.eslintrc.yml

root: true
env:
    browser: true
    es2021: true
parser: "@typescript-eslint/parser"
plugins: 
    - "@typescript-eslint"
parserOptions:
    ecmaVersion: latest
    sourceType: module
    project: "./tsconfig.eslint.json"
    tsconfigRootDir: "./"
ignorePatterns:
    - "node_modules/"
    - "build/"
extends:
    - airbnb-base
    - airbnb-typescript/base
    - plugin:@typescript-eslint/recommended-requiring-type-checking
rules:
    import/prefer-default-export: off
    "@typescript-eslint/quotes":
        - error
        - double

lintを実行

lintを実行します。

npx eslint .

動作確認 で作成したファイルのままの場合、エラーが出ると思います。

下記を実行すると、自動で修正できるところは修正してくれます。

npx eslint . --fix

Formatterをインストール

prettierをインストール

Prettierとはコードを整形するツールです。
下記の記事がわかりやすかったです。

インストールは以下でできます。

npm i prettier -D

コードを整形

以下でコードを整形できます。

npx prettier --write .

ビルドコマンドを追加

TypeScriptのコンパイルとコード整形が同時にできるようにbuildコマンドを設定したいと思います。

package.jsonのscriptsにbuildというコマンドを定義します。

package.json

{
  "scripts": {
+   "build": "tsc && prettier --write .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

scriptsに追加したものは、npm run buildという形で実行できます。

おわりに

オプションの部分は別途追記していきたいと思います。