Anthony Fu 流 JavaScript/TypeScript プロジェクトツールキット

コーディング規約

コードの整理

• 単一責任: 各ソースファイルは明確で焦点を絞った目的/スコープを持つ
• 大きなファイルの分割: ファイルが大きくなりすぎたり、多くの関心事を扱う場合は分割する
• 型の分離: 型とインターフェースは常に 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)

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