antfu

コーディングのプラクティス

コードの構成

• 単一責任：各ソースファイルの範囲と目的を明確にし、焦点を絞ります
• 大きなファイルを分割：ファイルが大きくなったり、扱う関心事が多くなったりしたら分割します
• 型の分離：型とインターフェースは必ず types.ts または types/*.ts に分けます
• 定数の抽出：定数は専用の constants.ts ファイルに移します

実行環境

• アイソモーフィックなコードを優先：可能な限り、Node、ブラウザー、ワーカーで動作する、実行環境に依存しないコードを書きます
• 実行環境を明示：コードが特定の環境に依存する場合は、ファイルの先頭にコメントを追加します：

// @env node
// @env browser

TypeScript

• 戻り値の型を明示：可能な限り、戻り値の型を明示的に宣言します
• 複雑なインライン型を避ける：複雑な型は専用の type または interface 宣言に切り出します

コメント

• 不要なコメントを避ける：コードは自己説明的にします
• 「方法」ではなく「理由」を説明：コメントには、コードが何をするかではなく、その理由や意図を記述します

テスト（Vitest）

• テストファイル：foo.ts → foo.test.ts（同じディレクトリ）
• describe／it API を使用します（test は使用しません）
• 複雑な出力には toMatchSnapshot を使用します
• 言語固有のスナップショットには、明示的なパスを指定して toMatchFileSnapshot を使用します

---

ツールの選択

@antfu/ni コマンド

コマンド	説明
ni	依存関係をインストール
ni <pkg> / ni -D <pkg>	依存関係／開発依存関係を追加
nr <script>	スクリプトを実行
nu	依存関係をアップグレード
nun <pkg>	依存関係をアンインストール
nci	クリーンインストール（pnpm i --frozen-lockfile）
nlx <pkg>	パッケージを実行（npx）

npm パッケージのバージョン確認

パッケージの最新バージョンを調べるには、fast-npm-meta を使用します。パッケージごとに数メガバイトになることもあるレジストリの全データをダウンロードする代わりに、小さなメタデータエンドポイントに問い合わせます。

nlx fast-npm-meta version vite              # 7.3.1
nlx fast-npm-meta version "nuxt@^3.5"       # 3.5.22 — range-aware
nlx fast-npm-meta version vite nuxt vue     # multiple at once
nlx fast-npm-meta version vite --json       # JSON for scripting
nlx fast-npm-meta full vite                 # full version list + dist-tags

最新バージョンだけが必要な場合は、npm view <pkg> version やレジストリから package.json を直接読み取る方法よりも、こちらを優先してください。

TypeScript の設定

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

ESLint の設定

// eslint.config.mjs
import antfu from '@antfu/eslint-config'

export default antfu()

タスクを完了したら、pnpm run lint --fix を実行してコードをフォーマットし、コーディングスタイルを修正します。

詳細な設定オプションについては、antfu-eslint-config を参照してください。

Git フック

{
  "simple-git-hooks": {
    "pre-commit": "pnpm i --frozen-lockfile --ignore-scripts --offline && npx lint-staged"
  },
  "lint-staged": { "*": "eslint --fix" },
  "scripts": {
    "prepare": "npx simple-git-hooks"
  }
}

pnpm カタログ

バージョン管理には、pnpm-workspace.yaml で名前付きカタログを使用します：

カタログ	目的
prod	本番環境の依存関係
inlined	バンドラーにインライン化される依存関係
dev	開発ツール（リンター、バンドラー、テスト）
frontend	フロントエンドライブラリ

デフォルトのカタログは避けてください。カタログ名はプロジェクトのニーズに合わせて変更できます。

---

参考資料

トピック	説明	参考資料
ESLint 設定	フレームワークのサポート、フォーマッター、ルールのオーバーライド、VS Code の設定	antfu-eslint-config
プロジェクトのセットアップ	.gitignore、GitHub Actions、VS Code 拡張機能	setting-up
アプリケーション開発	Vue／Nuxt／UnoCSS の規約とパターン	app-development
ライブラリ開発	tsdown によるバンドル、純粋な ESM の公開	library-development
モノレポ	pnpm ワークスペース、一元化されたエイリアス、Turborepo	monorepo