型安全なDrag and Dropの設計を考える TSKaigi 2025 

株式会社HRBrain 執行役員CTO 2018年に HRBrain に 10人目の社員、3人目のエンジニアとして 入社。TypeScriptも2018年からはじめました。 今もバックエンドとフロントエンドのプロダクションのコードを 本当にたくさん書いてます。 yudppp 

について HRBrain は「タレントマネジメント」「人事評価」「組織診断サーベイ」「労務管理」など 8種類のプロダクトを提供し ており、人事の様々な業務を効率化し、蓄積されたデータを活用して効果的な人事戦略を実現するためのタレントマネジ メントシステムです。 
 SaaSは一つのアプリケーションを、複数の会社、複数の運用を担う必要があるため、カスタマイズ性が求められます。カ スタマイズを直感的に扱えるようにするため、Drag and Dropを利用しています。 

利用例 例えば、管理する従業員の情報を設定 する画面で利用しています。 項目とグループといったドラックでき るオブジェクトがあり、どこにおける かはドラックしているオブジェクトの 情報とドラッグされる場所の情報、状 態によって変わっていきます。 このようなシンプルなリストの並び替 え以外のことをすることが多いです。 

Drag and Dropの失敗例 V ドラッグした要素の消S V ドラッグした瞬間にページが真っ白にな$ V インプット付きのアイテムの場合に、中のテキストが元の場所に居残る 

Drag and Dropの失敗例 t ドラッグした要素の消s t ドラッグした瞬間にページが真っ白になC t インプット付きのアイテムの場合に、中のテキストが元の場所に居残る ↓↓e t ドラッグしている要素と、置く要素の関係の定義が漏れていることが多い 

ドラッグできるオブジェクト 項目 グループ 

ドラッグできるオブジェクト 項目 グループ 

ドロップできる場所 項目 グループ 

ドロップできる場所 項目 グループ 

これを型に落とし込んでいく 

型の定義 ① // ドラッグする型の定義 // ドロップする場所の定義 // 全体のレイアウト export interface extends = : : export interface extends = : : export interface < , > { ; ; } < , > { ; ; } {} DraggableItem T P T P DropAreaItem T P T P LayoutData string unknown string unknown type payload type payload 

型の定義 ② // ItemとTargetの組み合わせで置けるのか、置いたときどうなるのか
 // 「移動元→移動先」という文字列にする // 「移動元→移動先」のすべての組み合わせごとに必ずルールを定義するようにする export interface extends extends : : : : => : : : : => | type extends extends = export type extends extends = in : extends infer extends infer extends ? : < < , >, < , >, > { ( , , ) ; ( , , ) ; } { : ; } < < , >, < , >, > ; 
 < < , >, < , >, > { [ < , >] < < , < , >>, < , < , >>, > ; }; Rule Item DraggableItem Target DropAreaItem LayoutData canDrop Item Target LayoutData onDrop Item Target LayoutData LayoutData canDrop RuleKey Item DraggableItem Target DropAreaItem Item Target RuleSet Item DraggableItem Target DropAreaItem LayoutData K RuleKey Item Target K IT Item TT Target Rule Extract Item DraggableItem IT Extract Target DropAreaItem TT LayoutData any any any any boolean false any any any any any any any any any any never item target layoutData item target layoutData `${ ["type"]}→${ ["type"]}` `${ ["type"]}->${ ["type"]}` 

型の定義 ③ export class extends extends : : : : => : : : => constructor : : = = : : => const = return as as = : : => if ! return const = as as < < , >, < , >, > { ; ( , ) ; ( , ) ; ( , < , , >) { .data initialData; . ( , ) { ruleSet[ (item, target)]; rule. (item , target , .data); }; . ( , ) { ( . (item, target)) .data ruleSet[ (item, target)]; this.data = rule. (item , target , .data); }; } } Layout Item DraggableItem Target DropAreaItem LayoutData LayoutData canDrop Item Target onDrop Item Target LayoutData RuleSet Item Target LayoutData canDrop Item Target getRuleKey canDrop onDrop Item Target canDrop getRuleKey onDrop any any any any boolean void this this rule any any this this this this rule any any this data item target item target initialData ruleSet item target item target ※発表用に簡略化しています(本当はcanDrop === falseの対応とか必要) 

使い方 ① // 全体のデータをどう持つか { [] } // ドラッグできるものの定義 < , >; < , >; ; 
 < , >; // 行と行の隙間で新しい行作るときのやつ < , { groupId: string, index: number }>; ; type = : type = type = type = | type = type = type = | LayoutData Group DraggableFieldItem DraggableItem Field DraggableGroupItem DraggableItem Group AnyDraggableItem DraggableFieldItem DraggableGroupItem RowDropArea DropAreaItem Row InsertRowDropArea DropAreaItem AnyDropAreaItem RowDropArea InsertRowDropArea groups "field" "group" "row" "insertRow" // ドロップできる場所の定義 

使い方 ② // 何がどこに置けて、置けたらどうなるのか
 < , , > { : { : ( , , ) target.fields. , : ( , , ) xxxx, }, : { : ( , , ) , : ( , , ) xxxx, }, : { : }, : { : ( , , ) , : ( , , ) xxxx, }, }; const : = => < => => => => => layoutRules length 6 true false true RuleSet AnyDraggableItem AnyDropAreaItem LayoutData canDrop onDrop canDrop onDrop canDrop canDrop onDrop 'field->row' 'field→insertRow 'group->row' 'group->insertRow' item target layout item target layout item target layout item target layout item target layout item target layout // 対象行の項目数が6未満だったら追加可能 // 頑張りどころでitemがtargetに移動したときにどうlayoutが変更されるか // 常に追加可能 // 常に不可 // 常に追加可能 

使い方 ③ export class extends constructor : --- const = new --- --- < , , > { ( ) { (data, layoutRules); } } (data) layout. (item, area) layout. (item, area) Layout LayoutState AnyDraggableItem AnyDropAreaItem LayoutData LayoutData Layout canDrop onDrop data super layout 

結局我々がやるべきこと • ドラッグ可能なアイテムの種類とドロップエリアの種類と、持つべきデータを定R • 置けるのか置けないのか、置いたあとにどう変化するかを表すRuleを本気で実装すG • 新しいアイテムが追加されたときに、実装漏れがないような作りにするこt • Viewの作り込みと分離することで、集中する領域を切り離すこt • 今回は話せていないが、あとはView側では当たり判定の範囲を綿密に計画する