> ## Documentation Index > Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt > Use this file to discover all available pages before exploring further. # ツリー コンポーネント > YiDA のツリー コンポーネントの使い方を解説します。データ構造、展開・折りたたみの挙動、チェックボックスの連動、各種プロパティやイベントを網羅し、階層データの表示・操作を効率化する方法を紹介します。 ## 使用シーン * 大量の階層データを表示する場合は、ツリー コンポーネントを使用します。展開・折りたたみや連動選択のインタラクションにより、データを直感的に操作できます。 ## コンポーネント例 ## コンポーネント プロパティ | プロパティ | 説明 | タイプ | デフォルト | | --------------------- | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `canDrop` | ノードがドロップ対象になれるかを判定するために発火するイベント。 | `(info: any) => boolean` | - | | `checkStrictly` | チェックボックスを完全に制御された状態にします。 | `boolean` | `false` | | `checkStrictly` | 選択されたノードの返却方法を定義します。`all`：選択されたすべてのノードを返します。`parent`：すべての子ノードが選択されている場合に親ノードのみを返します。`child`：すべての子ノードが選択されている場合に子ノードのみを返します。 | `'all' \| 'parent' \| 'child'` | `'parent'` | | `checkStrictly` | チェックボックスを完全に制御された状態にします。 | `boolean` | `false` | | `checkable` | チェックボックスを表示するかどうか。 | `boolean` | `false` | | `checkedKeys` | デフォルトで選択されるノード。 | `string[]` | `['0-0-0']` | | `checkedKeys` | デフォルトでチェックされるノード。 | `string[]` | `["0-0-0"]` | | `dataSource` | ノード データ。 | [TreeDataSource\[\]](/ja/open/yida/components/interface#treedatasource) | `[ { key: "0-0", label: "0-0", children: [ { key: "0-0-0", label: "0-0-0", children: [ { key: "0-0-0-0", label: "0-0-0-0", children: [ { key: "0-0-0-0-0", label: "0-0-0-0-0", }, ], }, { key: "0-0-0-1", label: "0-0-0-1", }, ], }, { key: "0-0-1", label: "0-0-1", children: [ { key: "0-0-1-0", label: "0-0-1-0", }, { key: "0-0-1-1", label: "0-0-1-1", }, ], }, ], }, ]` | | `defaultExpandAll` | デフォルトですべてのノードを展開します。 | `boolean` | `true` | | `defaultExpandedKeys` | デフォルトで展開されるノード。 | `string[]` | `['0-0-0']` | | `draggable` | ドラッグをサポートするかどうか。 | `boolean` | `false` | | `editable` | 編集をサポートするかどうか。 | `boolean` | `false` | | `expandedKeys` | 展開されているノード。 | `string[]` | `['0-0-0']` | | `isLoadData` | 非同期読み込みを有効にするかどうか。 | `boolean` | `false` | | `loadData` | 非同期読み込み時に発火するイベント。 | `(data: TreeDataSource) => Promise` | - | | `multiple` | 複数選択をサポートするかどうか。 | `boolean` | `false` | | `onCheck` | チェックボックスがチェックまたは解除されたときに発火するイベント。 | `(checkedKeys: string[], extra: any) => void` | - | | `onDragEnd` | ドラッグが終了したときに発火するイベント。 | `(info: any) => void` | - | | `onDragEnter` | ドラッグ中のノードがターゲットに入ったときに発火するイベント。 | `(info: any) => void` | - | | `onDragLeave` | ドラッグ中のノードがターゲット ノードから離れたときに発火するイベント。 | `(info: any) => void` | - | | `onDragOver` | ドラッグ中のノードがターゲット ノードの上を移動しているときに発火するイベント。 | `(info: any) => void` | - | | `onDragStart` | ノードのドラッグが開始されたときに発火するイベント。 | `(info: any) => void` | - | | `onDrop` | ドラッグ中のノードがターゲット ノードの内側、前、または後ろにドロップされたときに発火するイベント。 | `(info: any) => void` | - | | `onEditFinish` | ノードのコンテンツの編集が完了したときに発火するイベント。 | `(key: string, label: string, node: TreeDataSource) => void` | - | | `onExpand` | ノードが展開または折りたたまれたときに発火するイベント。 | `(expandedKeys: string[], extra: any) => void` | - | | `onSelect` | ノードが選択または選択解除されたときに発火するイベント。 | `(selectedKeys: string[], extra: any) => void` | - | | `processDataSource` | データの前処理関数。 | `(data: any) => TreeDataSource[]` | - | | `selectable` | ノードを選択可能にするかどうか。 | `boolean` | `true` | | `selectedKeys` | デフォルトで選択されるノード。 | `string[]` | `['0-0-0']` | | `showLine` | ノード間の接続線を表示するかどうか。 | `boolean` | `true` |