新規開発時のおすすめ設定やライブラリ
はじめに
npx create-next-app@latest
などの直後にすべきおすすめの設定を紹介します。もちろん途中から導入もOKですので、気になる項目があったら試してみてください。
pnpm
でscripts
を統一する
pnpm とは、JavaScript パッケージマネージャです。パッケージのインストールが高速な事や、便利な機能が多数あります。その中でおすすめの機能が、Running multiple scriptsです。
以下のpackage.json
の場合pnpm lint
を実行する事で、lint:
から始まるscript
が実行されます。
{
"scripts": {
"lint": " pnpm -r /^lint:.*/",
"lint:ecmascript": "eslint ...",
"lint:style": "stylelint ...",
}
}
開発時にはeslint
やstylelint
など様々なlinterを使用します。lint:
から始める事で実行漏れを防ぎ、一貫性のあるscripts
になります。
以下のように、生成処理をまとめるのも良いと思います。
{
"scripts": {
"generate": "pnpm -r /^generate:.*/",
"generate:styleType": "// cssから、型ファイルを生成する",
"generate:endpointType": "// APIドキュメントから、型を生成する",
}
}
未使用なコードやファイルを検出する
未使用なコードやファイルがあると、全体の可読性が下がり良くありません。knip
を使い未使用なコードやファイルを検出します。
以下のservice.ts
のgetData
は、どこからも使用されていません。knip
を使用する事で、このような処理が検出可能です。
// 未使用の処理
export const getData = () => '...';
export const validName = (name: string) => '...';
export const setName = (name: string) => '...';
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:
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などの設定は、厳しく始めたほうが開発が楽になります。ぜひ検討してみてください。

ちょっと株式会社(chot-inc.com)のエンジニアブログです。 フロントエンドエンジニア募集中! カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion