# フロントエンドコーディング規約（WordPress ブロック/UI）

## 対象
`src/` 配下の JS/SCSS（`blocks` `js` `toolbar` `scss`）に適用します。

## 基本ルール
1. 依存は `@wordpress/*` を優先し、その後に内部モジュールを読み込む。
2. React コンポーネントは `PascalCase`、関数は `camelCase` を使う。
3. ブロック単位の実装は `src/blocks/<block-name>/` に集約する。
4. UIロジックは可読性を優先し、重複処理は helper 化する。

## Gutenberg とデータフロー
1. エディタ挙動の真実源は block `attributes` とする。
2. 属性更新は必要範囲に限定し、無差別なリセットを避ける。
3. 副作用は `useEffect` / callback に閉じ、依存配列を適切に管理する。
4. `window` 直アクセスは WordPress 実行都合がある場合のみに限定する。

## UX とエラーハンドリング
1. UIメッセージは既存に合わせ日本語で統一する。
2. AJAX/通信失敗は握りつぶさず、ログとユーザー向け対応を実装する。
3. 既存の編集フロー（検索・登録・編集導線）を壊さない。

## スタイル方針
1. SCSS 変更は `src/scss/` の既存構造に沿って追加する。
2. クラス命名は既存パターンを優先し、並行スキームを増やさない。
3. エディタ表示とフロント表示の双方で崩れがないことを確認する。

## 必須チェック
```bash
npm run fix
npm run build
```

## 手動確認
- ブロック追加・編集がエディタ上で正常に動く
- 登録済み商品/未登録商品の分岐が意図どおり動く
- 意図しないフロント表示差分が出ていない