新規開発時のおすすめ設定やライブラリ

はじめに

npx create-next-app@latestなどの直後にすべきおすすめの設定を紹介します。もちろん途中から導入もOKですので、気になる項目があったら試してみてください。

pnpmでscriptsを統一する

pnpm とは、JavaScript パッケージマネージャです。パッケージのインストールが高速な事や、便利な機能が多数あります。その中でおすすめの機能が、Running multiple scriptsです。

以下のpackage.jsonの場合pnpm lintを実行する事で、lint:から始まるscriptが実行されます。

package.json

{
  "scripts": {
    "lint": " pnpm -r /^lint:.*/",
    "lint:ecmascript": "eslint ...",
    "lint:style": "stylelint ...",
  }
}

開発時にはeslintやstylelintなど様々なlinterを使用します。lint:から始める事で実行漏れを防ぎ、一貫性のあるscriptsになります。

以下のように、生成処理をまとめるのも良いと思います。

package.json

{
  "scripts": {
    "generate": "pnpm -r /^generate:.*/",
    "generate:styleType": "// cssから、型ファイルを生成する",
    "generate:endpointType": "// APIドキュメントから、型を生成する",
  }
}

未使用なコードやファイルを検出する

未使用なコードやファイルがあると、全体の可読性が下がり良くありません。knip を使い未使用なコードやファイルを検出します。

以下のservice.tsのgetDataは、どこからも使用されていません。knipを使用する事で、このような処理が検出可能です。

service.ts

// 未使用の処理
export const getData = () => '...';

export const validName = (name: string) => '...';

export const setName = (name: string) => '...';

main.ts

import { validName, sendName } from './service';

export const main = (name: string) => {
  if (validName(name)) {
    setName(name);
  }
};

pnpm knipを実行すると、検出できます。

Unused exports (1)
getData  unknown  service.ts:1:14

ファイル名やディレクトリ名を統一する

Next.jsのpagesやappのディレクトリ名やファイル名はURLに直結します。その為以下のような場合は、一貫性が損なわれます。

pages/kebab-case.tsx
pages/CamelCase.tsx
pages/snake_case.tsx

それを防ぐ為に、ls-lintを使用して命名を統一します。
以下は、Next.js向けの設定例です。この設定でpages/配下は、ケバブケースのみ許可されます。

.ls-lint.yml

ls:
  pages:
    .dir: kebab-case
    .tsx: kebab-case

pages/に、CamelCase.tsxを配置し、ls-lintを実行すると以下のエラーが発生します。

pages/CamelCase.tsx failed for rules: kebabcase

pages/とsrc/を個別に設定したい場合は、以下の設定すると良いと思います。

ls:
  pages:
    .dir: kebab-case
    .tsx: kebab-case
  src:
    .dir: camelCase
    .tsx: PascalCase

複雑なコードを検出する

ESLintには、様々な設定があります。その中で、complexityについて紹介します。
complexityを使用すると、コードの複雑度合いを検出します。具体的には以下のような箇所です。

• 分岐処理が多いコード
• ネストが深いコード

複雑な箇所は、リファクタリング対象にして対応するのが良いと思います。complexityは、7 ~ 10ぐらいだと全体的に簡潔なコードにりますので検討してみてください。

// complexity: ['error', 2]の場合エラーになる

// TODO 複雑なので、リファクタリングする
const validId = (id: number) => {
  if (id > 0) {
    if (id < 100) {
      return true;
    }
  }
  return false;
};

最後に

lintなどの設定は、厳しく始めたほうが開発が楽になります。ぜひ検討してみてください。