JS Notes

JavaScript設計 -JS Notes-

このページでは、 JavaScript の設計方針や実装ルールをまとめています。

🔧 設計方針

• 可読性・保守性・拡張性を最優先
  • 1ファイル 1責務
  • 1関数 1役割
  • 名前は意味が明確なものに
  • UI 変更に強い構造を意識

🗂️ レイヤー構造（責務分離）

※一部抜粋

📂 root/
└─ 📁 assets/
   └── 📁 js/
       ├── 📁 calculate/       # 計算ロジック（純粋関数）
       ├── 📁 core/            # アプリケーションロジック（main.js, validation.js）
       ├── 📁 data/            # 静的データ（JSON）
       ├── 📁 events/          # イベント登録
       ├── 📁 i18n/            # 翻訳辞書
       ├── 📁 storage/         # LocalStorage
       ├── 📁 ui/
       │   ├── 📁 updates/
       │   │   ├── derived.js   # UI 派生フィールド更新
       │   │   └── helpers.js   # UI 更新の基礎関数
       │   └── load-css.js      # CSS を読み込むユーティリティ
       └── 📁 utils/
           └── dom-helpers.js   # DOM 操作の基盤ユーティリティ

• UI の構造とアプリケーションロジックを混在させない
  例：UI → getValue → validation → calculation → derived → UI
  • UI：DOM から値を取得
  • validation：妥当性チェック
  • calculation：計算処理
  • derived：UI更新

DOM 操作

• UI の構造を知らない汎用 DOM ユーティリティは utils/dom-helpers.js で管理
  • $(): ID 要素を取得
  • q() / qa(): セレクタで単一要素 / 複数要素を取得
  • al(): イベント登録
  • ce(): 要素生成

UI 更新

• UI更新に関する処理は、js/ui/updates/ に集約し、責務分離
• 汎用的な UI の表示更新（ラベル・アイコン画像・クラス操作）はすべて updates/update-helpers.js で管理
  • updateText()
  • updateIcon()
  • updateImage()
  • updateLink()

イベント

• イベントハンドラは events/bind-events.js に集約

---

トップページに戻る