バリデーションライブラリzodを導入し、型安全なコーディングを行うための下準備としてESLint、Prettier、tsconfigルール設定等の環境調整を行いました。

11

現在の依存関係

Next.js: 14.x
React: 18.x
TypeScript: 5.x
Tailwind CSS: 3.x
ESLint: 8.x（初期環境構築を行った際から変更なし）

追加/変更ファイル

my-project/
│
├── src/
├── .eslintrc.json        # ESLintの設定ファイル
├── .prettierrc           # Prettierの設定ファイル
├── .eslintignore         # ESLintの除外ファイル
├── .prettierignore       # Prettierの除外ファイル
├── package.json          # プロジェクトの依存関係
└── tsconfig.json         # TypeScriptの設定ファイル

各設定ファイルの説明

全体としては、eslint-config-nextとeslint-plugin-prettierの設定により、両方のツールが競合しないような動作とTypeScriptの型安全なルールの調節を行いました。

.eslintrc.json

初期の環境設定として追加しているeslint-config-nextをベースにPrettierとの競合を防ぐ設定を行いました。eslint-config-prettierとeslint-plugin-prettierを追加し、Prettierとの連携を円滑にする意図があります。

next/core-web-vitals: Next.js向けのESLintルール
plugin:@typescript-eslint/recommended: TypeScript向けのESLintルール
plugin:prettier/recommended: Prettierとの競合を防ぐ設定
@typescript-eslint/consistent-type-assertions: 型アサーションの使用を制限し、assertionStyle": "neverの指定で完全に禁止
@typescript-eslint/no-explicit-any": "error": 暗黙的なany型の使用禁止
@typescript-eslint/no-unused-vars: 未使用の変数をチェックし、引数名の先頭に_がついている場合は無視する

.prettierrc

VSCodeの拡張機能と連携し、コードを保存した際に自動フォーマットするように設定を行いました。

.eslintignoreと.prettierignore

フォーマットや静的解析からnode_modulesとbuildディレクトリを除外するように定義しました。こちらの設定は今後の開発で随時変更する予定です。

vscode/settings.json

VSCodeで保存時に自動フォーマットを適用するための設定ファイルを定義しました。

editor.formatOnSave": true: 保存時に自動でフォーマット
editor.defaultFormatter: "esbenp.prettier-vscode: Prettierをデフォルトフォーマッタに設定
source.fixAll.eslint": explicit: ESLintのルールに基づいて自動修正

TypeScriptのルール定義

tsconfig.json

既存ルールを土台として、これまでに学習した中で学んだ範囲で想像可能なものを追加しました。

noImplicitAny: 暗黙的なany型を禁止して、型安全性を向上
strictNullChecks: nullやundefinedの扱いを厳格にしてエラーを早期発見
strictFunctionTypes: 関数の互換性チェックを強化
strictBindCallApply: bind、call、applyの型チェックを厳格にする
noImplicitThis: thisが暗黙的にanyにならないようにする
alwaysStrict: 常に厳格モードを適用

注意点

現在、/src/components/memos/MemoForm.tsxにuseStateの警告（@typescript-eslint/no-unused-vars）が発生していますが、将来的に使用予定であるため、現時点では修正を行いません。

TODOコメントで意図を明示しています。

参考文献

no-unused-vars

kei615ykhm / logic-loom-nextjs14

ESLint、Prettier、tsconfigルール設定等の環境調整 #17

関連Issue

11