組織階層管理

7階層の組織構造を管理（本社 > リージョン > エリア > 拠点 > 部署 > チーム > グループ）

現在のビュー: 全組織構造
表示する組織図の時点
大規模組織対応: レイジーローディング技術により10,000ノード以上を高速表示 初期ロード2階層のみ、展開時に動的取得
初期ロード < 2秒
組織ツリー
テスト株式会社（本社） 10,458名 (7階層)
東日本リージョン 6,245名 (5エリア)
西日本リージョン 4,213名 (4エリア)
使い方
  • 展開/折りたたみ: アイコンをクリック（配下組織を動的読み込み）
  • 組織選択: 組織名をクリックすると右側に詳細を表示
  • 検索: 検索ボックスで組織名を入力
組織詳細

左のツリーから組織を選択してください

実装時の参照ドキュメント
  • 研究報告書 Section 1: 組織階層表示のUI設計
  • 研究報告書 Section 5: パフォーマンス最適化
  • organization_hierarchy_design.md: データベース・UI設計
Rails 8 + Hotwire 実装メモ

1. レイジーローディング（Turbo Frames）:

<%= turbo_frame_tag "org_tree_children_#{unit.id}",
                      src: lazy_children_organization_unit_path(unit),
                      loading: "lazy" %>

2. ツリー展開（Stimulus Controller）:

// app/javascript/controllers/org_tree_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  toggleNode(event) {
    // Turbo Frameが自動的にLazy Load
  }
}

3. ドラッグ&ドロップ（Sortable.js）:

// app/javascript/controllers/sortable_controller.js
import Sortable from 'sortablejs'

export default class extends Controller {
  connect() {
    Sortable.create(this.element, {
      onEnd: this.updateOrder.bind(this)
    })
  }
}