フロントエンド新規プロジェクトに採用したほうがいいライブラリ

![1_HSisLuifMO6KbLfPOKtLow.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/e8155c95-a5a3-cbf6-238b-b1e5af6cf3d3.jpeg)
この記事では良さそうなフロントエンドライブラリをいくつか紹介したいと思います。
Reactの画像を拾ってきましたが、Vueのプロジェクトでも使えます。
# 筆者の実行環境
| node | npm | react|
|:-----------:|:------------:|:------------:|
| v14.15.0      | v6.14.8 | v17.0.1|

- Reactの使用言語はTypeScriptにします。

```
npx create-react-app [プロジェクト名] --template typescript 
```

# prettier
prettierはコード整形ツール、馴染身のある人はかなり多いと思います。
TypeScript使用上の変更点とESLintとの併用などを紹介します。
[公式ドキュメント](https://prettier.io/docs/en/index.html)

ライブラリインストール。

```
npm install --save-dev --save-exact prettier
or
yarn add --dev --exact prettier
```

prettier用のconfigファイルを作成。

```
echo {}> .prettierrc.json
```

整形対象外のものは`.prettierignore`を新規作成して、中に対象ディレクトリ/ファイルを指定できます。

#### 整形の自動化

自動化できるものは自動化してきましょう。

自動化用のライブリをインストール。

```
npx mrm@2 lint-staged
```
インストール完了後、`package.json`に以下の内容が追加されたと思います。

```text
:package.json
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
    }
  },
  "lint-staged": {
    "*.{js,css,md}": "prettier --write"
  }
```

`husky`はgitフックの管理ツール。
追加された内容は git pre-commitの段階でprettierを実行し、コード整形してくれます。
ReactでTypeScriptを使用する場合には、以下の追加修正を加えましょう。
Vueの場合にはtsxは不要です。

```
...
"lint-staged": {
  "*.{js,css,md,ts,tsx}": "prettier --write"
}
...
```

#### ESLintとの併用処理

ESLintと併用処理するためのライブラリのインストール。

```
npm install --save-dev eslint-config-prettier
```
`package.json`のeslintConfigの項目に `prettier`を足して完了です。

```
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },
```

# commitlint

コミットメッセージは、たとえ個人開発でも、ちゃんとした意味を持たせるべきです。
単に`fix`のようなメッセージでコミットしたら、たとえ本人でも、時間が経てばどんな変更をしたのかすぐに忘れてしまい、わからなくなるでしょう。
そういったコミットメッセージを自動で弾いてくれるライブラリが`commitlint`です。
[リポジトリ](https://github.com/conventional-changelog/commitlint#cli)

インストール。

```
npm install --save-dev @commitlint/{config-conventional,cli}
or
yarn add @commitlint/{config-conventional,cli}
```
configファイルを初期化します。

```
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
```

`package.json`の`husky`の`hooks`項目に下記の内容を追記します。

```text:package.json
{
  "husky": {
    "hooks": {
      ...
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}
```
設定は以上で完了しました。
この状態ではコミットメッセージは以下のルールを従う必要があります。

```
タグ名: コミットメッセージ
```
使用できるタグ名は以下から選べます。

```
- build
- ci
- chore
- docs
- feat
- fix
- perf
- refactor
- revert
- style
- test
```

commitlintが機能してる状態で、
タグを使用せずにコミットメッセージ`hoge`でコミットしてみたら、ちゃんと弾いてくれました。

```
> git commit -m "hoge"
husky > pre-commit (node v14.15.0)
✔ Preparing...
✔ Hiding unstaged changes to partially staged files...
✔ Running tasks...
✔ Applying modifications...
✔ Restoring unstaged changes to partially staged files...
✔ Cleaning up...
husky > commit-msg (node v14.15.0)
⧗   input: hoge
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings

```
また、コミットメッセージのルールカスタマイズもできます。

例えば、コミットメッセージを全部大文字に限定したい場合、`commitlinnt.config.js`を下記のように修正を加えます。

```javascript:commitlint.config.js

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-case": [2, "always", ["upper-case"]],
  },
};
```

この状態で小文字のコミットメッセージでしたら、弾かれます。

```
> git commit -m "fix: xxx"
husky > pre-commit (node v14.15.0)
✔ Preparing...
✔ Running tasks...
✔ Applying modifications...
✔ Cleaning up...
husky > commit-msg (node v14.15.0)
⧗   input: fix: xxx
✖   type must be upper-case [type-case]

✖   found 1 problems, 0 warnings
```
その他のルールは[こちら](https://commitlint.js.org/#/reference-rules)を参考にしてください。

# json-server

mockの方法、色々試しましたが、結果`json-server`にたどり着きました。
公式の説明に下記もの書かれてました。

![5A3370B9-CCF6-403C-B4A3-438B1D3D87C3_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/3617d4ee-5856-e669-7ece-a6483a276d65.jpeg)

30秒未満のコーディングでゼロから完全なRESTAPI mockサーバーを入手できる、
実際試してみましたが、確かに30秒未満でした。


**インストール**

```
npm install -g json-server
```

インストール終了後、プロジェクトに `db.json`というファイルを作ってください。
そして中身に下記の内容を追加してください。

```json:db.json
{
  "users": []
}
```

json-serverを起動します。

```
json-server --watch db.json
```

起動したら、下記のログが表示されます。

```
  ...
  Resources
  http://localhost:3000/users
  ...
```
この状態でサーバにリクエスト送ると、空のレスポンスが返ってきます。
`db.json`は空だから当然の結果です。

![17067A2E-1A67-4E09-92F8-9B65E6D547CA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/e96fab8e-56f0-3afc-9b0c-4b1fa8095de5.jpeg)


次はデータを追加してみます。

![C47AE9CC-F73E-4970-9867-E9A5596904D6.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/99670100-84d9-1903-c234-5d40005e216e.jpeg)

レスポンスを見ればわかりますが、`id`は自動的に付与されました、非常に便利です。
`db.json`にも追加されたデータが反映されました。

```json:db.json
{
  "users": [
    {
      "name": "jack",
      "id": 1
    }
  ]
}
```
* 2022/03/31の追記
db.jsonにデーター存在する場合、追加する際には`id`が必要です。


データを修正してみます。
`id = 1`の`name`を`rose`に修正し、PUTリクエストを送信します。

![3969E9C3-E58D-4928-BC87-EEA3517878D6.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/adaa8232-f534-40ff-06ba-3683f524c0e1.jpeg)

`db.json`のデータが修正されたことが確認できました。

```db.json
{
  "users": [
    {
      "name": "rose",
      "id": 1
    }
  ]
}
```

#### json-serverのプロダクト中の運用

あくまで個人的にやっていることです、参考までに読んでいただけると幸いです。

> `db.json`の扱い方

json-serverにとって、db.jsonは仮のデータベースのようなものです。
プロジェクトのディレクトリに置いてるだけだとやや不適切です。

`__json_server_mock__`フォルダを親ディレクトリに作っておき、`db.json`を中に入れましょう。
入れたら下記のようなディレクトリ構成になります。

```
|-- [プロジェクト名]
...
|-- |-- src など
...
|-- |-- __json_server_mock__
|-- |-- |-- db.json
```
フォルダ名を `__`で囲むことで、中に入ってる物はプロジェクトのサポート役として直接影響しないことを明記するという意味です。

次は`package.json`にscriptを足します。

```text:package.json
...
  "scripts": {
    ...
    "json-server": "json-server __json_server_mock__/db.json --watch --port 3001"
  }
...
```

追加後 `npm run json-server`コマンドでjson-serverを立ち上げられます。

他に`swagger`のようなmockサーバも存在したりしますが、
基本バックエンドエンジニアが用意していただけないと無理そうなので、納期が厳しい仕事でしたら、あんまり期待しない方が良いですね。

#### json-serverのミドルウェア
通常では`json-server`rest api形式のAPIしか対応できませんが、
ミドルウェア追加することで、さらに使い勝手よくすることができます。

`__json_server_mock__`フォルダの配下に`middleware.js`ファイル新規し、以下の内容を追加します。


```javascript:__json_server_mock__/middleware.js

module.exports = (req, res, next) => {
    if (req.method === 'POST' && req.path==='/login'){
        if (req.body.username === 'jack' && req.body.password === '123456') {
            return res.status(200).json({
                user:{
                    'token': '123'
                }
            })
        }else{
            return res.status(400).json({'message':'no!'})
        }
    }
    next()
}
```

上記の内容はjson-serverにPOSTのリクエスト、しかもpathが/loginの際に使われます。

`package.json`の `scripts`に以下の内容追加します。

```json:package.json
 "scripts": {
...
    "json-server": "json-server __json_server_mock__/db.json --watch --port 3001 --middlewares ./__json_server_mock__/middleware.js"
  },
```
追加後、`json-server`を再起動すれば、`/login`のmock apiは使えるようになったはずです。