🙇

仮想DOMライブラリをようやくリリースしました

2022/07/22に公開

Beako.jsとして開発していた仮想DOMライブラリをJitoに改めてVer1.0.0をリリースしました。
是非一度ご覧ください。

https://github.com/ittedev/jito

JitoのドキュメントはZennで本にしました。

https://zenn.dev/itte/books/5ce6aac9166aed

特徴

Vue.jsやReactの代替となるライブラリです。

Webの新しい仕様を豊富に使っているため、少し古いPCやスマホでは動きません。不特定多数向けのサービスにはまだ向いていないと思います。
特にShadow DOMに関しては発展途中にあるように思いますので、Webの仕様変更に合わせてJitoも仕様変更が必要になるかもしれません。

Vue.jsやReactに比べて扱いやすさにはこだわっていますが、パフォーマンスは劣るかと思います。パフォーマンスは今後の課題です。

作った感想

元々、Vue.jsの代わりとして自分用にJavaScriptの機能を使って1週間程度で作るつもりだったのですが、思いのほかJavaScriptの機能がそのまま使えなかったので、あれもこれもと必要な機能を作っていたら半年以上かかってしまいました。
ライブラリも膨れ上がってしまい、せっかく作ったのだから公開しようと考えたのが昨年末で、公開するとなるとしっかり作らないとけないと考えて、仕様を何度も考え直し、作り直してようやく形にできました。
良いものを形にできたのではないかと思います。この調子で、今後も継続して開発を続けていきます。

こだわった点

クラスをなるべく使わない

私自身、オブジェクト指向プログラミングがあまり好きではありませんので、関数型プログラミングを中心にしています。クラスを使うとオブジェクト間の関係が複雑になってしまうからです。
一部、カスタム要素周りでクラスを使っていますが、やはり複雑になっています。

それ以外の、仮想DOMやテンプレート、コンポーネントといった多くのオブジェクトはクラスを使っていないため、インターフェースさえ見れば独自の関数で置き換えることが可能になっています。パフォーマンスを上げたい場合は有用だと思います。

公開する関数を基準にファイル構成

各技術ごとに4つのディレクトリに分けて、test.htmlとtypes.tsを除いて、公開する1つの関数(あるいはクラス、オブジェクト)に対して一つのファイルにしています。公開を目的としていない関数などは、関連するファイルになるべく隠しています。
私自身、たまに誰かが作ったライブラリのソースを読みたくなることがあるのですが、公開・非公開がごっちゃになっているとどこから手を付けていいか分からず、早々に読むのを諦めてしまいます。ソースを読みたくなったときに、使用方法から読み始めることができるので、読みやすくなっていると思います。
技術ごとにディレクトリを分けたのも、読みやすさのためです。各ディレクトリ間で、非公開の関数を使用しないようにしています。例えばテンプレートエンジンは仮想DOMのオブジェクト等を使っていますが、仮想DOMのソースは読まなくてもテンプレートエンジンのソースだけで読めるようになっています。

今後

開発は継続しますが、もともと別のサービスを作っていて、それがVue3では上手くいかないことからJitoを作り始めた経緯があります。本来の目的はそっちのサービスですので、今後の開発は優先順位が下がります。

とはいえ、まだまだ、仕様が固まっていないため追加していない機能があります。

  • 双方向データバインディング
  • コンポーネント間でCSSの共有
  • テンプレートの事前コンパイル
  • 分割代入、カンマ演算子等

など。
無いと不便なものは、随時追加していくつもりです。

また、テンプレートエンジンは動くものを作っていますが、コンパイラとか最適化とかあまり詳しくないので、もしJitoが普及することがあったら、助けてくれる人を探そうと思います。

Discussion