docs: add native Japanese translation of ECC documentation (ja-JP)

Translate everything-claude-code repository to Japanese including: - 17 root documentation files - 60 agent documentation files - 80 command documentation files - 99 rule files across 18 language directories (common, angular, arkts, cpp, csharp, dart, fsharp, golang, java, kotlin, perl, php, python, ruby, rust, swift, typescript, web) - 199 skill documentation files Total: 455 files translated to Japanese with: - Consistent terminology glossary applied throughout - YAML field names preserved in English (name, description, etc.) - Code blocks and examples untouched (comments translated) - Markdown structure and relative links preserved - Professional translation maintaining technical accuracy This translation expands ECC accessibility to Japanese-speaking developers and teams. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-05-18 23:03:06 +08:00 · 2026-05-16 20:12:58 +09:00
parent b66ae3fbe0
commit ec9ace9c54
376 changed files with 48957 additions and 0 deletions
--- a/docs/ja-JP/rules/web/coding-style.md
+++ b/docs/ja-JP/rules/web/coding-style.md
@@ -0,0 +1,96 @@
+> このファイルは [common/coding-style.md](../common/coding-style.md) を Web 固有のフロントエンドコンテンツで拡張します。
+
+# Web コーディングスタイル
+
+## ファイル構成
+
+ファイルタイプではなく、機能またはサーフェスエリアごとに整理する:
+
+```text
+src/
+├── components/
+│   ├── hero/
+│   │   ├── Hero.tsx
+│   │   ├── HeroVisual.tsx
+│   │   └── hero.css
+│   ├── scrolly-section/
+│   │   ├── ScrollySection.tsx
+│   │   ├── StickyVisual.tsx
+│   │   └── scrolly.css
+│   └── ui/
+│       ├── Button.tsx
+│       ├── SurfaceCard.tsx
+│       └── AnimatedText.tsx
+├── hooks/
+│   ├── useReducedMotion.ts
+│   └── useScrollProgress.ts
+├── lib/
+│   ├── animation.ts
+│   └── color.ts
+└── styles/
+    ├── tokens.css
+    ├── typography.css
+    └── global.css
+```
+
+## CSS カスタムプロパティ
+
+デザイントークンを変数として定義する。パレット、タイポグラフィ、スペーシングを繰り返しハードコードしない:
+
+```css
+:root {
+  --color-surface: oklch(98% 0 0);
+  --color-text: oklch(18% 0 0);
+  --color-accent: oklch(68% 0.21 250);
+
+  --text-base: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
+  --text-hero: clamp(3rem, 1rem + 7vw, 8rem);
+
+  --space-section: clamp(4rem, 3rem + 5vw, 10rem);
+
+  --duration-fast: 150ms;
+  --duration-normal: 300ms;
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+}
+```
+
+## アニメーション専用プロパティ
+
+コンポジタフレンドリーなモーションを優先する:
+- `transform`
+- `opacity`
+- `clip-path`
+- `filter`（控えめに）
+
+レイアウトに紐づくプロパティのアニメーションを避ける:
+- `width`
+- `height`
+- `top`
+- `left`
+- `margin`
+- `padding`
+- `border`
+- `font-size`
+
+## セマンティック HTML ファースト
+
+```html
+<header>
+  <nav aria-label="Main navigation">...</nav>
+</header>
+<main>
+  <section aria-labelledby="hero-heading">
+    <h1 id="hero-heading">...</h1>
+  </section>
+</main>
+<footer>...</footer>
+```
+
+セマンティック要素が存在するときに、汎用的な `div` ラッパースタックに頼らない。
+
+## 命名
+
+- コンポーネント: PascalCase（`ScrollySection`、`SurfaceCard`）
+- フック: `use` プレフィックス（`useReducedMotion`）
+- CSS クラス: kebab-case またはユーティリティクラス
+- アニメーションタイムライン: 意図を含む camelCase（`heroRevealTl`）
--- a/docs/ja-JP/rules/web/design-quality.md
+++ b/docs/ja-JP/rules/web/design-quality.md
@@ -0,0 +1,63 @@
+> このファイルは [common/patterns.md](../common/patterns.md) を Web 固有のデザイン品質ガイダンスで拡張します。
+
+# Web デザイン品質基準
+
+## アンチテンプレートポリシー
+
+汎用的なテンプレートに見える UI をリリースしない。フロントエンドの出力は意図的で、主張があり、プロダクトに固有であるべきである。
+
+### 禁止パターン
+
+- 均一なスペーシングで階層のないデフォルトのカードグリッド
+- 中央揃えの見出し、グラデーションブロブ、汎用 CTA の定番ヒーローセクション
+- 完成したデザインとして出す未変更のライブラリデフォルト
+- レイヤリング、深度、モーションのないフラットレイアウト
+- すべてのコンポーネントで均一な角丸、スペーシング、シャドウ
+- 1つのアクセントカラーだけの安全なグレー・オン・ホワイトのスタイリング
+- サイドバー + カード + チャートで視点のないダッシュボード量産レイアウト
+- 意図的な理由なしに使用されるデフォルトフォントスタック
+
+### 必要な品質
+
+すべての意味のあるフロントエンドサーフェスは、以下のうち少なくとも4つを示すべきである:
+
+1. スケールコントラストによる明確な階層
+2. 均一なパディングではなく、スペーシングの意図的なリズム
+3. オーバーラップ、シャドウ、サーフェス、またはモーションによる深度やレイヤリング
+4. 個性と実際のペアリング戦略を持つタイポグラフィ
+5. 装飾的ではなく、セマンティックに使用される色
+6. デザインされたと感じるホバー、フォーカス、アクティブ状態
+7. 必要に応じたグリッドを打ち破るエディトリアルまたはベントーレイアウト
+8. ビジュアルの方向性に合ったテクスチャ、グレイン、または雰囲気
+9. 注意をそらすのではなく、フローを明確にするモーション
+10. 後付けではなく、デザインシステムの一部として扱われるデータビジュアライゼーション
+
+## フロントエンドコードを書く前に
+
+1. 具体的なスタイルの方向性を選ぶ。「クリーンミニマル」のような曖昧なデフォルトを避ける。
+2. パレットを意図的に定義する。
+3. タイポグラフィを意図的に選択する。
+4. 少なくとも少数の実際のリファレンスを集める。
+5. 関連する ECC のデザイン/フロントエンドスキルを使用する。
+
+## 価値あるスタイルの方向性
+
+- エディトリアル / マガジン
+- ネオブルータリズム
+- 実際の深度を持つグラスモーフィズム
+- 規律あるコントラストのダークラグジュアリーまたはライトラグジュアリー
+- ベントーレイアウト
+- スクローリーテリング
+- 3D 統合
+- スイス / インターナショナル
+- レトロフューチャリズム
+
+自動的にダークモードをデフォルトにしない。プロダクトが実際に求めるビジュアルの方向性を選択する。
+
+## コンポーネントチェックリスト
+
+- [ ] デフォルトの Tailwind や shadcn テンプレートに見えないか？
+- [ ] 意図的なホバー/フォーカス/アクティブ状態があるか？
+- [ ] 均一な強調ではなく階層を使用しているか？
+- [ ] 実際のプロダクトのスクリーンショットで信憑性があるか？
+- [ ] 両テーマをサポートする場合、ライトとダークの両方が意図的に感じられるか？
--- a/docs/ja-JP/rules/web/hooks.md
+++ b/docs/ja-JP/rules/web/hooks.md
@@ -0,0 +1,129 @@
+> このファイルは [common/hooks.md](../common/hooks.md) を Web 固有のフック推奨事項で拡張します。
+
+# Web フック
+
+## 推奨 PostToolUse フック
+
+プロジェクトローカルのツールを優先する。リモートの使い捨てパッケージ実行にフックを接続しない。
+
+### 保存時フォーマット
+
+編集後にプロジェクトの既存フォーマッタエントリポイントを使用する:
+
+```json
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Write|Edit",
+        "command": "pnpm prettier --write \"$FILE_PATH\"",
+        "description": "Format edited frontend files"
+      }
+    ]
+  }
+}
+```
+
+`yarn prettier` や `npm exec prettier --` による同等のローカルコマンドも、リポジトリが所有する依存関係を使用する場合は問題ない。
+
+### リントチェック
+
+```json
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Write|Edit",
+        "command": "pnpm eslint --fix \"$FILE_PATH\"",
+        "description": "Run ESLint on edited frontend files"
+      }
+    ]
+  }
+}
+```
+
+### 型チェック
+
+`--incremental` を使用して再実行時に前回の `.tsbuildinfo` を再利用する（変更のないコードでは30-60秒ではなく1-3秒）。`timeout` でラップして、停止した tsc が OS によって回収されるようにする — これにより、編集が tsc の完了よりも速く発生した場合のマルチプロセス蓄積を防止する。
+
+```json
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Write|Edit",
+        "command": "timeout 60 pnpm tsc --noEmit --pretty false --incremental --tsBuildInfoFile node_modules/.cache/tsc-hook.tsbuildinfo",
+        "description": "Type-check after frontend edits (incremental + timeout-capped)"
+      }
+    ]
+  }
+}
+```
+
+**両方のフラグが重要な理由:**
+- `--incremental` なしでは、すべての編集でプログラム全体をゼロから再チェックする。実際の Next.js プロジェクトでは、これが急速に積み重なる: 5-10秒間隔の編集 + 30-60秒の tsc 実行 = N個の並行 tsc プロセス。
+- `timeout` なしでは、ハングした tsc（推移的依存関係の変更、再帰型で停止した型チェッカー）は終了せず、親シェルが終了したときに孤児になる。
+- `--tsBuildInfoFile` が必要なのは、`--noEmit` が通常 buildinfo の書き込みを抑制するため。パスを明示的に指定することでインクリメンタルが機能し続ける。
+
+Windows で GNU coreutils がない場合は、`timeout 60` を PowerShell ラッパーに置き換えるか、Stop/SessionEnd フックに頼って停滞した tsc プロセスを掃除する。
+
+### CSS リント
+
+```json
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Write|Edit",
+        "command": "pnpm stylelint --fix \"$FILE_PATH\"",
+        "description": "Lint edited stylesheets"
+      }
+    ]
+  }
+}
+```
+
+## PreToolUse フック
+
+### ファイルサイズガード
+
+まだ存在しない可能性のあるファイルからではなく、ツール入力コンテンツからの巨大な書き込みをブロックする:
+
+```json
+{
+  "hooks": {
+    "PreToolUse": [
+      {
+        "matcher": "Write",
+        "command": "node -e \"let d='';process.stdin.on('data',c=>d+=c);process.stdin.on('end',()=>{const i=JSON.parse(d);const c=i.tool_input?.content||'';const lines=c.split('\\n').length;if(lines>800){console.error('[Hook] BLOCKED: File exceeds 800 lines ('+lines+' lines)');console.error('[Hook] Split into smaller modules');process.exit(2)}console.log(d)})\"",
+        "description": "Block writes that exceed 800 lines"
+      }
+    ]
+  }
+}
+```
+
+## Stop フック
+
+### 最終ビルド検証
+
+```json
+{
+  "hooks": {
+    "Stop": [
+      {
+        "command": "pnpm build",
+        "description": "Verify the production build at session end"
+      }
+    ]
+  }
+}
+```
+
+## 順序
+
+推奨順序:
+1. フォーマット
+2. リント
+3. 型チェック
+4. ビルド検証
--- a/docs/ja-JP/rules/web/patterns.md
+++ b/docs/ja-JP/rules/web/patterns.md
@@ -0,0 +1,79 @@
+> このファイルは [common/patterns.md](../common/patterns.md) を Web 固有のパターンで拡張します。
+
+# Web パターン
+
+## コンポーネントコンポジション
+
+### コンパウンドコンポーネント
+
+関連する UI が状態とインタラクションのセマンティクスを共有する場合、コンパウンドコンポーネントを使用する:
+
+```tsx
+<Tabs defaultValue="overview">
+  <Tabs.List>
+    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
+  </Tabs.List>
+  <Tabs.Content value="overview">...</Tabs.Content>
+  <Tabs.Content value="settings">...</Tabs.Content>
+</Tabs>
+```
+
+- 親が状態を所有する
+- 子はコンテキスト経由で消費する
+- 複雑なウィジェットでは props のバケツリレーよりもこれを優先する
+
+### レンダープロップ / スロット
+
+- 動作は共有されるがマークアップを変える必要がある場合、レンダープロップまたはスロットパターンを使用する
+- キーボードハンドリング、ARIA、フォーカスロジックはヘッドレスレイヤーに保持する
+
+### コンテナ / プレゼンテーション分離
+
+- コンテナコンポーネントがデータ読み込みと副作用を所有する
+- プレゼンテーションコンポーネントは props を受け取り UI をレンダリングする
+- プレゼンテーションコンポーネントは純粋に保つべきである
+
+## 状態管理
+
+これらを個別に扱う:
+
+| 関心事 | ツール |
+|--------|--------|
+| サーバー状態 | TanStack Query、SWR、tRPC |
+| クライアント状態 | Zustand、Jotai、signals |
+| URL 状態 | search params、route segments |
+| フォーム状態 | React Hook Form または同等のもの |
+
+- サーバー状態をクライアントストアに複製しない
+- 冗長な計算済み状態を保存する代わりに値を導出する
+
+## 状態としての URL
+
+共有可能な状態を URL に永続化する:
+- フィルタ
+- ソート順
+- ページネーション
+- アクティブタブ
+- 検索クエリ
+
+## データフェッチ
+
+### Stale-While-Revalidate
+
+- キャッシュされたデータを即座に返す
+- バックグラウンドで再バリデーションする
+- 手作りする代わりに既存のライブラリを優先する
+
+### 楽観的更新
+
+- 現在の状態のスナップショットを取る
+- 楽観的な更新を適用する
+- 失敗時にロールバックする
+- ロールバック時に可視的なエラーフィードバックを出す
+
+### 並列ローディング
+
+- 独立したデータを並列にフェッチする
+- 親子のリクエストウォーターフォールを避ける
+- 正当な理由がある場合、次のルートや状態をプリフェッチする
--- a/docs/ja-JP/rules/web/performance.md
+++ b/docs/ja-JP/rules/web/performance.md
@@ -0,0 +1,64 @@
+> このファイルは [common/performance.md](../common/performance.md) を Web 固有のパフォーマンスコンテンツで拡張します。
+
+# Web パフォーマンスルール
+
+## Core Web Vitals 目標
+
+| メトリクス | 目標 |
+|-----------|------|
+| LCP | < 2.5秒 |
+| INP | < 200ms |
+| CLS | < 0.1 |
+| FCP | < 1.5秒 |
+| TBT | < 200ms |
+
+## バンドルバジェット
+
+| ページタイプ | JS バジェット（gzip 圧縮後） | CSS バジェット |
+|-------------|---------------------------|--------------|
+| ランディングページ | < 150kb | < 30kb |
+| アプリページ | < 300kb | < 50kb |
+| マイクロサイト | < 80kb | < 15kb |
+
+## ローディング戦略
+
+1. 正当な場合、クリティカルなアバブ・ザ・フォールド CSS をインライン化する
+2. ヒーロー画像とプライマリフォントのみをプリロードする
+3. 非クリティカルな CSS や JS を遅延読み込みする
+4. 重いライブラリを動的インポートする
+
+```js
+const gsapModule = await import('gsap');
+const { ScrollTrigger } = await import('gsap/ScrollTrigger');
+```
+
+## 画像最適化
+
+- 明示的な `width` と `height`
+- ヒーローメディアのみに `loading="eager"` と `fetchpriority="high"`
+- ビロウ・ザ・フォールドのアセットには `loading="lazy"`
+- フォールバック付きで AVIF または WebP を優先する
+- レンダリングサイズを大幅に超えるソース画像を配信しない
+
+## フォント読み込み
+
+- 明確な例外がない限り、フォントファミリーは最大2つ
+- `font-display: swap`
+- 可能な場合はサブセット化する
+- 本当にクリティカルなウェイト/スタイルのみをプリロードする
+
+## アニメーションパフォーマンス
+
+- コンポジタフレンドリーなプロパティのみをアニメーションする
+- `will-change` は狭い範囲で使用し、完了時に削除する
+- シンプルなトランジションには CSS を優先する
+- JS モーションには `requestAnimationFrame` または確立されたアニメーションライブラリを使用する
+- スクロールハンドラの乱発を避ける。IntersectionObserver または行儀の良いライブラリを使用する
+
+## パフォーマンスチェックリスト
+
+- [ ] すべての画像に明示的なサイズがある
+- [ ] 意図しないレンダーブロッキングリソースがない
+- [ ] 動的コンテンツによるレイアウトシフトがない
+- [ ] モーションがコンポジタフレンドリーなプロパティにとどまっている
+- [ ] サードパーティスクリプトが async/defer で読み込まれ、必要な場合のみ使用されている
--- a/docs/ja-JP/rules/web/security.md
+++ b/docs/ja-JP/rules/web/security.md
@@ -0,0 +1,57 @@
+> このファイルは [common/security.md](../common/security.md) を Web 固有のセキュリティコンテンツで拡張します。
+
+# Web セキュリティルール
+
+## コンテンツセキュリティポリシー
+
+本番環境では常に CSP を設定する。
+
+### ノンスベースの CSP
+
+`'unsafe-inline'` の代わりに、スクリプトにはリクエストごとのノンスを使用する。
+
+```text
+Content-Security-Policy:
+  default-src 'self';
+  script-src 'self' 'nonce-{RANDOM}' https://cdn.jsdelivr.net;
+  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
+  img-src 'self' data: https:;
+  font-src 'self' https://fonts.gstatic.com;
+  connect-src 'self' https://*.example.com;
+  frame-src 'none';
+  object-src 'none';
+  base-uri 'self';
+```
+
+オリジンはプロジェクトに合わせて調整する。このブロックをそのままコピーして使わない。
+
+## XSS 防止
+
+- サニタイズされていない HTML を注入しない
+- サニタイズなしで `innerHTML` / `dangerouslySetInnerHTML` を使用しない
+- 動的テンプレート値をエスケープする
+- どうしても必要な場合は、検証済みのローカルサニタイザーでユーザー HTML をサニタイズする
+
+## サードパーティスクリプト
+
+- 非同期で読み込む
+- CDN から配信する場合は SRI を使用する
+- 四半期ごとに監査する
+- 実用的な場合、重要な依存関係にはセルフホスティングを優先する
+
+## HTTPS とヘッダー
+
+```text
+Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
+X-Content-Type-Options: nosniff
+X-Frame-Options: DENY
+Referrer-Policy: strict-origin-when-cross-origin
+Permissions-Policy: camera=(), microphone=(), geolocation=()
+```
+
+## フォーム
+
+- 状態を変更するフォームには CSRF 保護
+- 送信エンドポイントにはレート制限
+- クライアント側とサーバー側の両方でバリデーション
+- 重い CAPTCHA デフォルトよりもハニーポットや軽量なアンチアビューズ制御を優先する
--- a/docs/ja-JP/rules/web/testing.md
+++ b/docs/ja-JP/rules/web/testing.md
@@ -0,0 +1,55 @@
+> このファイルは [common/testing.md](../common/testing.md) を Web 固有のテストコンテンツで拡張します。
+
+# Web テストルール
+
+## 優先順位
+
+### 1. ビジュアルリグレッション
+
+- 主要なブレークポイントでスクリーンショットを撮る: 320、768、1024、1440
+- ヒーローセクション、スクローリーテリングセクション、および意味のある状態をテストする
+- ビジュアル重視の作業には Playwright スクリーンショットを使用する
+- 両テーマが存在する場合は両方をテストする
+
+### 2. アクセシビリティ
+
+- 自動アクセシビリティチェックを実行する
+- キーボードナビゲーションをテストする
+- 動作軽減の動作を検証する
+- カラーコントラストを検証する
+
+### 3. パフォーマンス
+
+- 意味のあるページに対して Lighthouse または同等のものを実行する
+- [performance.md](performance.md) の CWV 目標を維持する
+
+### 4. クロスブラウザ
+
+- 最低: Chrome、Firefox、Safari
+- スクロール、モーション、フォールバック動作をテストする
+
+### 5. レスポンシブ
+
+- 320、375、768、1024、1440、1920 でテストする
+- オーバーフローがないことを検証する
+- タッチインタラクションを検証する
+
+## E2E の形式
+
+```ts
+import { test, expect } from '@playwright/test';
+
+test('landing hero loads', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('h1')).toBeVisible();
+});
+```
+
+- 不安定なタイムアウトベースのアサーションを避ける
+- 決定的な待機を優先する
+
+## ユニットテスト
+
+- ユーティリティ、データ変換、カスタムフックをテストする
+- 高度にビジュアルなコンポーネントでは、壊れやすいマークアップアサーションよりもビジュアルリグレッションの方がシグナルが高いことが多い
+- ビジュアルリグレッションはカバレッジ目標を補完するものであり、置き換えるものではない