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

16244 ワード
Mock TypeScript JavaScript json-server prettier JavaScript テキストリンク


この記事では良さそうなフロントエンドライブラリをいくつか紹介したいと思います。
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との併用などを紹介します。
公式ドキュメント

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

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に以下の内容が追加されたと思います。

: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です。
リポジトリ

インストール。

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項目に下記の内容を追記します。

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を下記のように修正を加えます。

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

その他のルールはこちらを参考にしてください。

json-server

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

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

インストール

npm install -g json-server

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

db.json
{
  "users": []
}

json-serverを起動します。

json-server --watch db.json

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

  ...
  Resources
  http://localhost:3000/users
  ...

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

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

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

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

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

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を足します。

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-serverrest api形式のAPIしか対応できませんが、
ミドルウェア追加することで、さらに使い勝手よくすることができます。

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

__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に以下の内容追加します。

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は使えるようになったはずです。