SVGの図を描けるライブラリ「JointJS」をざっくり紹介する

この記事は JointJS Advent Calendar 2023 の 1日目の記事です。

はじめに

この記事はライブラリ「JointJS」について、知らない人向けにざっくり紹介する記事となります。

実際のJointJSの使い方については次回以降の記事で紹介していきますので、使い方が知りたい方はそちらを参照してください。

JointJSとは？

JointJSを一言で説明すると、JavaScriptでSVGの図や表を描くことができるライブラリです。

基本機能はオープンソースで、無料で使用することができます。拡張ライブラリのJointJS+を使用する場合、料金が発生します。

JointJSで作れる図の例

JointJSのHPにデモ用サンプルからいくつか抜粋して紹介します。（詳しく知りたい方はHPを直接見たほうが良いかと思います）

シーケンス図

テンプレート化したノードのオブジェクトと、それらをつなぐ線で構成するような図はJointJSを使用すると描きやすいです。

ツリー

階層構造のあるようなデータでは、各ノードをカスタム要素として定義したり、データ構造をJavaScriptで制御することで、少ないコードでも複雑な図形を描くことができます。

図形描画ツール

生成したSVGの要素をドラッグ&ドロップで動かす、等の操作もできるため、図形描画ツールを作成することもできます。

JointJSの長所と短所

JointJSを業務で使ってみて、個人的に感じたJointJSの長所と短所について書きます。

長所① 自由度が高い

描画対象をカスタマイズして独自の要素を定義することができるので、実現できる図の自由度が高いです。前述の図の例でも、描画されている図の表現の幅が広いことがおわかりいただけるかと思います。

長所② サンプルが豊富

公式で公開されているサンプルが豊富にあります。コードも公開されているため、自分の実現したい図はどんなコードを書けばよいのか、というのがわかりやすいです。

長所③ 再利用性が高い

カスタム要素を定義しておけば同じ図形を複数生成するような処理は同じカスタム要素で処理できるため、再利用性が高い設計ができます。

短所① リッチなサンプルはJointJS+が前提になっている

リッチな動作は有料版のJointJS+で提供されている場合が多いです。例えば「ポップアップメニューを出す」等はJointJS+での提供となります。

ちなみにJointJS+の利用料金は年間2,990ドルと、なかなか良いお値段します

どこかのFAQで、「JointJS+はJointJSのラッパーライブラリなので、JointJS+で実現できることはJointJSでも実現可能」という回答を見た記憶がある¹ので、リッチなUIもJointJSで作れるはずです。

短所② 公式ドキュメントが痒いところに手が届いてない

公式ドキュメントを見ると、メソッドやクラスなど幅広く記載が書いてあり、一見親切そうなドキュメントに見えるのですが、メソッドの引数の形式などの細かい記載が抜けていることがあります。細かい設定が必要になる場合は、文脈から引数の型を予想して、実際に使ってみて動作を確認するといったような作業が発生します。

短所③ 大量要素描画時のパフォーマンス

大量の要素を描画するときに、遅いと感じます。公式のFAQによると、JointJS+を使用する場合はパフォーマンス面の改善が入っているらしいです（が、JointJS使ったことがないのでわかりません）。

まとめ

フロントエンドで、少し複雑な図形を扱ったり、図形に対してインタラクティブな操作が必要になるときにJointJSを導入するとうまくハマる場合があります。長所・短所両方を列挙しましたが、特に長所①の自由度の高さは他に代えがたいものであり、短所を受け入れても導入する価値があるものだと感じます。フロントエンドで図を作成するような要件がある場合は導入を検討してみてください。

1. 記憶はあるのですが、どこのページなのかを記録しておりませんでした。。。もし見つけられたら追記します。 ↩