【備忘録】Express環境構築

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

# 環境構築
#### プロジェクトのフォルダを作成
```bash
mkdir sample-project
cd sample-project
```

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

#### Expressをインストール
```bash
npm install express
```

#### TypeScriptをインストール
```bash
npm install typescript --save-dev
```

#### nodeの型定義をインストール
TypeScriptを使って、パッケージを利用する場合、型の情報が必要みたいなので、インストールします。
```bash
npm install @types/node --save-dev
```

#### expressの型定義をインストール
```bash
npm install @types/express --save-dev
```

:::note info
Tips
以下のように、複数指定もできる
```bash
npm install typescript @types/node @types/express --save-dev
```

また短縮系として以下の書き方も可能
```bash
npm i typescript @types/node @types/express -D
```
:::

#### tsconfig.jsonを作成
TypeScriptのファイルをコンパイルする設定ファイル作成
```bash
npx tsc --init
```

:::note info
tips

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

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

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

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

```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が作成されるはずです。

```bash
npx tsc
```

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

```bash
node build/index.js
```

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

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

## Linterをインストール
#### TypeScriptのESLintをインストール
```bash
npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
```

#### Airbnbのルールをインポート

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

#### 設定ファイルを作成

```bash
touch tsconfig.eslint.json .eslintrc.yml
```

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

```yaml:.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を実行します。

```bash
npx eslint .
```

:::note info
[動作確認](#動作確認) で作成したファイルのままの場合、エラーが出ると思います。
:::

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

```bash
npx eslint . --fix
```

## Formatterをインストール

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

https://qiita.com/Junpei_Takagi/items/3983cc735e71ea3917fdac

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

```bash
npm i prettier -D
```

#### コードを整形
以下でコードを整形できます。
```bash
npx prettier --write .
```

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

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

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

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

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