1. 製品
  2.   ビューア
  3.   JavaScript
  4.   jsTree
 
  

jsTree: jQueryでインタラクティブなツリー構造を構築

この強力なツリープラグインで階層データの作成、管理、可視化を実現

jsTree APIとは？

jsTreeは複雑なJSONデータをインタラクティブな階層ツリー構造に変換し、開発者にネストされたJSONオブジェクトを視覚化・操作する強力な手段を提供します。jQueryプラグインとして構築されており、生のJSONを展開/折りたたみ可能なノードツリーに変換します。APIレスポンス、設定ファイル、または任意の階層データセットの調査に最適です。

JSON可視化の主な機能:

  • JSONからツリーへの変換: JSON配列/オブジェクトを親子ノードとして自動レンダリング
  • インタラクティブな探索: ノードの展開/折りたたみで深いJSON構造を調査
  • 動的ローディング: 大規模なJSONデータセットを遅延ロードしてパフォーマンスを最適化
  • カスタムノードレンダリング: JSONデータ型（配列、オブジェクト、値）に基づいたノードのスタイリング
  • 検索＆フィルタ: 複雑なJSONツリー内でキー/値を素早く検索

フラットなJSONビューアとは異なり、jsTreeはデータの階層と関係性を保持するため、APIのデバッグやネストされたJSONスキーマのドキュメント作成に理想的です。

GitHub

GitHub の統計

名前：
言語：
出演者：
フォーク:
ライセンス：
リポジトリの最終更新日時

jsTreeを選ぶ理由

  • 実績あるソリューション: 10年以上の活発な開発実績
  • 軽量: jQueryのみを依存関係として必要
  • アクセシビリティ: WCAG 2.0準拠
  • 充実したドキュメント: 完全なAPIリファレンス
  • MITライセンス: 商用利用無料

インストール

jsTreeはパッケージマネージャー経由でインストールするか、CDNから直接含めることができます。

NPMインストール


npm install jstree

注意: jsTreeの前にjQueryを含めることを忘れないでください。

コード例

これらの例でjsTreeの機能を探求しましょう:

jsTree

例1: HTMLからの基本ツリー

jsTreeを作成する最も簡単な方法は、ネストされたHTMLリストを変換することです。このアプローチは、ツリー構造が静的である場合やプロトタイピング時に理想的です。プラグインはネストされたUL/LI構造を自動的に展開/折りたたみ機能を持つインタラクティブなツリーに変換します。基本的な実装には最小限のJavaScriptが必要で、シンプルなナビゲーションメニューやコンテンツ構造に適しています。

デモンストレーションされた機能:

  • HTMLからツリーへの変換
  • 展開/折りたたみ機能
  • 基本テーマ

例2: JSON経由でのデータロード

動的アプリケーションでは、jsTreeはJSONからデータをロードできます。このアプローチはより柔軟で、プログラム的にツリー構造を構築できます。JSON形式は直感的で、各ノードには"id"、"text"、"children"、"state"などのプロパティがあります。また、各ノードにアイコン、無効状態、その他の属性を指定できます。この方法は、ツリーデータがデータベースやAPIから来る場合に特に有用です。

例3: チェックボックスとドラッグ＆ドロップ

jsTreeはコア機能を拡張するプラグインを提供します。チェックボックスプラグインは各ノードに選択可能なチェックボックスを追加し、dndプラグインはドラッグアンドドロップ操作を可能にします。これらの機能は、ユーザーが複数の項目を選択したり階層を再編成したりする必要があるファイルマネージャーや権限システムなどのインターフェースを構築する際に不可欠です。これらのプラグインは、数百のノードがあってもツリーのパフォーマンスを維持します。

高度な機能

jsTreeはプロフェッショナルなワークフローをサポートします:

  • 遅延ローディング: オンデマンドでノードをロード:

    遅延ローディング

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • イベント処理: ツリー操作に応答:

    イベントリスナー

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('選択されたノード:', data.selected);
    });
  • カスタムテーマ: ツリーをスタイリング:

    カスタムテーマ

    
    $('#tree').jstree({
      'themes': {
        'name': 'custom',
        'dots': false,
        'icons': false
      }
    });

まとめ

jsTreeは階層データ可視化のための堅牢なソリューションを提供します。以下の用途に理想的です:

  • ファイルブラウザ: ディレクトリ構造のナビゲーション
  • ナビゲーションメニュー: マルチレベルメニューの作成
  • CMSインターフェース: コンテンツ階層の管理
  • 設定ツール: ネストされた設定の編集

豊富なプラグインシステムと活発なメンテナンスにより、jsTreeはウェブアプリケーションにおけるツリー構造の定番ソリューションであり続けています。

類似製品

 日本語