LoginSignup
15
22

More than 5 years have passed since last update.

@bonk

ライブラリを検討 jsのtreeライブラリ

Last updated at Posted at 2016-08-11

多分最初のほうに見たのがこのページ。自分で調べていくうちに納得感が深まった。
http://qiita.com/alingogo/items/b49d48f1b024f6022a85

今回の私の要求

  • まだ決めていないのでReactでも使える選択肢にしておきたい
  • PCでもスマホ（iOS）でもD&Dしたい
  • 実装はできればスマートにして拡張性もある程度確保したい
  • 性能的なこともわからないなりに考慮しておきたい
  • １万円程度なら有料でもいいかも
  • D3.jsとかと整合性があるといいかも

途中経過として

いろいろ試行錯誤した

  • 基本はjQuery系が多い
    • jQuery系でもスマホでのD&D対応は少ない
  • React系やピュア系は少ない
    • もっと粒度の小さなライブラリはあるので独自実装になるのかな
    • jQuery系のラッパーがあるがどこまでフォローできるのか若干不安
  • 他
    • ポインターイベントというのが以前は流行っていたらしいが縮小
  • スマホのD&Dについて
    • 最初はなんとか対応しているものを探したが難しそうなので、低コストで対応させることを考える方向へ

下記の方針を考えた

  • 比較的簡単に使えそうならReactベースにして（基本はReact上で動かすこととして）頑張る
  • 上記でいいのがなければjQueryベースで（Reactに整合性をつけるのを）頑張る
  • D&Dについては別途ライブラリを仲介して対応させたいが、ダメなら改変する

調べたり使ってみたりをちょっとした

  • react-fancytreeという命名のjstreeのラッパーがあった
    • なんか命名がわかりにくい
    • でもライブラリ自体は試す価値あるかもな
  • fancytree
    • D&Dの拡張をするのが少し迷う
    • スキンの機構があって拡張性よさそうだけど詳しくは見てない
  • jstree
    • スマホに対応させるコードをネット上で見つけた（比較的シンプルなフックの仕方ができるみたいで好印象）
    • 若干見た目とかはfancytreeより地味な気はする
  • pointer event polyfill
    • ポインターイベントとしてデバイスの差異を吸収する機構かな
    • 使ってみたい気はする
    • 既存のイベントを上書きするのではなくてポインターイベントを定義する形式
      • まあ、普通は上書きしちゃダメだよな
      • 呼び出し側を改変しないといけないので、考慮されていない場合には若干強引になりそう
      • pepに対応したライブラリや独自実装したライブラリは結構あるが大御所がPEP.jsかな
      • Hummer.js的なやつとか、対応が弱い系統のライブラリとかを考えると気が重い

D&D

PEP

  • https://github.com/jquery/PEP
    • メインストリーム、大御所っぽい、大元のプロジェクトは頓挫してるのかな。
    • 開発は続いていて、最近0.4が出たみたい。
    • 呼び出しがポインターイベント一つではなくて
 ポインターイベントのマウス系とか、一応、定義はわけておいて、
 フォークできるようにしておいたほうがいい気もする。
  • https://github.com/borismus/pointer.js
    • すでに非推奨

イベント制御

Tree(React)

  • jquery.fancytree
    • Fancytreeのラッパー
  • react-fancytree
    • jstreeのラッパー
  • https://github.com/jaredly/treed
    • かなり包括的で、自分の考えるような課題に対しても近い気がするし、目的意識が明確でいい。
    • でもまだまだ開発中
  • https://github.com/pqx/react-ui-tree
    • babelあたりからTreeという命名に対してwarningが上がった気がするけど動いた
    • 使いやすそうだけど結構シンプルな印象
    • mousedownとかのイベントで記述
    • 比較的フラットなディレクトリ構造
  • https://gabchang.github.io/jab-react-tree/
    • 上記のフォークライブラリ
    • なんか綺麗にまとめられていたのでメモ
  • https://github.com/react-component/tree
    • rc-treeという名前のライブラリ
    • 独自のツリーライブラリかな
    • jQueryは依存している
    • 軽快でシンプル、若干動きが空回りしている気もする
    • ちゃんとreactベースで記述されているっぽい
      • mousedown,mouseupとかでソースを検索してもマッチせずonMouseLeaveとかでマッチした
 * でもスマホだとドラッグできない。これは、、react-dndで解決できるのかも。試す価値あるかな。
  • https://github.com/alexcurtis/react-treebeard
    • D&Dのサンプルはない
    • コードは綺麗かもcomponentsとかのディレクトリがあって見たことある感じがする

Tree(jQuery)

  • https://github.com/mar10/fancytree
    • メインの候補
    • 見た目が豊かな印象
    • touchイベントとかは考慮されていなさそう
  • https://www.jstree.com/
    • メインの候補
    • わからないけど現時点では拡張する際にはこちらのほうがいいのかも
    • D&Dの拡張機能のコードにはtouchstartが含まれてはいた
  • https://github.com/dragosu/jquery-aciTree
    • サンプルを見てみると綺麗で軽快
    • コードも比較的シンプルっぽい
    • phpファイルが含まれているけどなんだろう。。ajaxのサンプルかな。
    • イベント制御でスマホに対応させるのが楽ならありかも
      • 独自のイベント名をどこかのオブジェクトで管理していてそこだけやれば拡張できるとか
    • iOS対応させた事例っぽいのもみかけた

Tree(pure)

他だったり複合的なもの

今の所の状況

onDragStartでmouseイベントにマッピングしてるならスマホも対応できるってことかしらどうかしら。

  • jsTree
    • いいね
  • fancyTree
    • よさそうだけど一歩踏み込みにくい
  • rc-tree
    • もしかして伏兵かもしれない
  • PEP.js
    • 使いたいけど使いどころが微妙

追加で調べる

追加のソリューション

  • http://redux.js.org/docs/introduction/Examples.html

    • Examples | Redux
    • これを拡張するのが実はいいのかもしれない

  • https://github.com/teleport/react-dnd-treeview

    • react-dndをつかってるやつ、でも、typescriptだ。。
    • スマホではD&Dが機能しない、、
    • ソースを眺めたがmousedownもDragStartもない。typescriptだからかな。。ちがうな。
 http://gaearon.github.io/react-dnd/
 isDragging、dragSourceとかこの辺だな。 結果的には、後述する試行錯誤で動いた。
 typescriptの部分を眺めてみたけど食わず嫌いするほど学習コストはかからないかもしれない。


  • https://github.com/cheton/react-infinite-tree

    • インフィニティなのででかいツリーが扱えるみたい。
    • D&Dもイベントとしてはあるけど再描画しないでカウントするだけみたいになってる。

    • もうちょっと調べてみたけどtree自体の機能としてはかなり優秀なのではないかという気もした。
 具体的な操作とかは実装することになるのかもだけど、
 イベントも用意されている、es2015で記述、大きなツリーを扱うという土台の部分が意識されている
      cheton/flattree: Convert hierarchical tree structure to flat structure.
      https://github.com/cheton/flattree

      NeXTs/Clusterize.js: Tiny vanilla JS plugin to display large data sets easily
      https://github.com/NeXTs/Clusterize.js

      Infinite Tree
      http://cheton.github.io/infinite-tree/

      cheton/infinite-tree: A browser-ready tree library that can efficiently display a large amount of data using infinite scrolling.
      https://github.com/cheton/infinite-tree

React DnD

iOSで動かないんだけど、、backendのライブラリのバージョンとかが影響するという記事はあった。。
これかなあ。。

Rolling back to 0.2.7 solves the issue.

って0.2.5なんだけど動いてない。。ち、ちくしょう。。

Reactでドラッグアンドドロップを実装したいので、react-dndを使ってみた | WebDesign Dackel
http://webdesign-dackel.com/2015/06/04/react-dnd/

Dragging over and dropping to drop targets don't work anymore · Issue #34 · yahoo/react-dnd-touch-backend
https://github.com/yahoo/react-dnd-touch-backend/issues/34

panzi/react-dnd-touch-pointer-events-backend: Touch (iOS, Android, ...) and Pointer Events (Windows Phone) backend for React Drag and Drop
https://github.com/panzi/react-dnd-touch-pointer-events-backend

これかな。。でも、最初から入ってるんだけどな。

NOTE*: This is buggy due to the difference in touchstart/touchend event propagation compared to mousedown/mouseup/click. I highly recommend that you use react-dnd-html5-backend instead for a more performant native HTML5 drag capability.

ソース。。わからん。

export const DraggableApp = DragDropContext(
  HTML5DragDropBackend
  // TouchDragDropBackend({ enableMouseEvents: true })
)(App);

シュミレーターのバージョンを5sから6sにしてもダメだな。。

おあ、ポインターのバックエンドを使ったらいけた。
なんでやねんー。HTML5DragDropBackendに差し替えたのは。（倒置）
ってか、これまだスター1だな。。
というか、フォークを眺めたらhtml5のバックエンドのやつもいろいろありそう。。

const PointerDragDropBackend = require("react-dnd-touch-pointer-events-backend").default;
...
export const DraggableApp = DragDropContext(
  PointerDragDropBackend
  //HTML5DragDropBackend
  // TouchDragDropBackend({ enableMouseEvents: true })
)(App);

発見。試してはいない。。

冒頭でも書きましたがreact-dndの1.1.1ではタッチデバイスへがサポートされていません。
標準では対応していませんが、こちらにある200行程度のコードで対応させられるみたいです。

react-dnd-treeviewを眺める

es2015に変換する仕組みがよく分からなくて調べた。

tscでlib以下にes2015のこーどが吐き出されるみたい。

treeをドラッグする処理がコンパクトに記述されている。
ふーむ、こんなコード量でかけるものなのか。。

また、特に気になるポイントはimmutable.jsかな。。
これはどういう。。

immutable.js qiita - Google 検索
https://www.google.co.jp/search?num=100&safe=off&espv=2&q=immutable.js+qiita&oq=immutable.js+qiita&gs_l=serp.3...7736.7736.0.7989.1.1.0.0.0.0.158.158.0j1.1.0....0...1c.1.64.serp..0.0.0.c-9JPRB9Kqo

React使い必見！ Immutable.jsでReactはもっと良くなる by 森脇 健斗 | Wantedly Engineer Blog
https://www.wantedly.com/companies/wantedly/post_articles/28935#_=_

reduxのstore(state管理)のようなことをするライブラリかな。。
便利メソッドがくっついている。
reduxなどでも、状態変更の際の比較のときもimmutable.jsだと効率的に処理できるのね。たぶん。

immutable.js を使ってみる | スマホ神 – JavaScript 受託開発 –
http://smart.ataglance.jp/2015-06-04-try-immutable-js/

これがどういうものなのかわかりやすい。
クライアントサイドでのデータの想定外の改ざんとかに対応できたりするのかしら。

React + Redux + TypeScriptとImmutable.js - Qiita
http://qiita.com/uryyyyyyy/items/6143feba20554fe55a82

JSでListやMapなどのコレクションを扱えるもの。
TypeScriptで使うと、ネイティブのArrayやObjectと比べて使えるメソッドが増えるのでオススメです。
（逆にJSで使うのであれば、ネイティブの型と混同しがちなのでlodashとかの方が良いのではないでしょうか？）

lodashってどこかで見たな。。なるほど。。

Angular 2アプリケーションをimmutable.jsとReduxで構築する | プログラミング | POSTD
http://postd.cc/angular2-with-immutablejs-and-redux/

React、Redux、Immutable.jsを使ったTodoアプリの作り方 - WPJ
https://www.webprofessional.jp/2016/06/2239/

immutable-jsに関する12件の投稿 - Qiita
http://qiita.com/tags/immutable-js

Immutable.jsでJSでも不変データ構造を扱う - Qiita
http://qiita.com/mizchi/items/19293593f28512ff495d

Immutable.jsを色々触ってみました - Qiita
http://qiita.com/ryoppy/items/9afa0038a04feeb5783c

React初学者のためのガイド - Qiita
http://qiita.com/ossan-engineer/items/f4a7594bbf7e9a4578d3

個人的JavaScriptで使えそうなライブラリメモ - Qiita
http://qiita.com/kubotak/items/e8b7bf652579ed792d9f

React+reduxでモダンなフロントエンド環境でのサービス開発 導入メモ | T2
http://makoto-tanaka.com/javascript/5875/

今の所の状況2

検討をいつまでやってるんだろう。。
この前の段階では小さなグローバルメニューを作るのに数ヶ月かけたり。。orz

やっぱり、既存のjQueryベースのライブラリの機能の充実さがいいなと思うので、
typescriptを勉強しつつそちらを使う方向を検討してみようかな。。

  • react-dnd-treeview
    • typescriptは悪くないし、基本的な動きもすでに実装済みだから導入は早そう
  • redux Examples treeview
    • reduxの構造になっているので嬉しい
    • ドラッグとかの処理は追加することになる
  • react-infinity-tree
    • まだ全体像が見えていないけどちょっと規模が大きい気もする
    • きっといろいろと優秀
  • immutable.js
    • とりあえずこれについては知っておいて損はない気がしてる
  • jsTree
    • いいね
    • 単純なツリー操作のUI（コンテキストメニューとか）とか他にもいろいろかと。。
  • fancyTree
    • よさそうだけど一歩踏み込みにくい
    • 単純なツリー操作のUI（コンテキストメニューとか）とか他にもいろいろかと。。
  • rc-tree
    • もしかして伏兵かもしれない
  • PEP.js
    • 使いたいけど使いどころが微妙

reactのイベント

いまいちわからん。

http://blog.koba04.com/post/2015/09/22/react-js-v014-changes/
touchイベントは0.14までは手動で指定していたらしい。関係ないけど。
ドラッグイベントはtouchイベントとは切り離されている。
タッチデバイスのドラッグをtouchmoveとして扱ってよいのかよくわかってない。
ポインターイベントはその辺の整合性を取る処理をどのくらい含んでいるのか。

手法メモ

検索

いいかもしれないと思ったのは、ライブラリを見つけてから、
フォークを覗いて、気になるワードを検索してみる。
結局見つからなかったけど。

フォーク

フォークって怖いんだけどやっていいものなのかしら。

いろいろあってわからん。AIでQ&Aしてほしい。

github fork ライセンス - Google 検索
https://goo.gl/t1TwXB

Github で Fork してから Pull Request をするまでの流れ | けーこ in サンフランシスコ
http://goo.gl/plwzE

GitHub初心者はForkしない方のPull Requestから入門しよう | qnyp blog
http://goo.gl/KOBLC

オープンソースプロジェクトで上手いことやってくための10の方法 - Qiita
http://goo.gl/m1jVSw

プログラマがGitHubとどう関わっているのか垣間見て感じたこと | Act as Professional
https://goo.gl/d6cI65

GitHub 上で公開されているソースコードの半分はライセンス的に問題あり | スラド オープンソース
http://goo.gl/pfmI7v

github - MITライセンスのソフトウェアをフォークした場合のライセンス表記 - スタック・オーバーフロー
http://goo.gl/971Owq

GitHubに置いたコードのライセンス: うなうなぎのブログ
http://goo.gl/vpBD6p

githubでライセンスを設定する - Qiita
http://goo.gl/vwHtYi

パッケージマネージャー

ideはやい（みためよりはやさでinstallにつかう）
https://github.com/alexanderGugel/ied

pnpmべんり（こわいのでsearchにつかう）
http://ricostacruz.com/pnpm/

きっとそのうちどちらかに絞れそうなきがする

15
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
22