自作 JavaScript Component Engine の記録 - bridge-js から Compomint へ

きっかけ：AngularJSとの出会い

2014年頃、会社のプロジェクトでAngularJSに初めて触れた時のことは今でも鮮明に覚えている。双方向データバインディング（Two-Way Data Binding）は本当に衝撃的で、魔法のように見えた。

それまでjQueryに頼り切っていた開発から解放してくれたことに心から感謝した。jQueryは確かに簡潔で強力な表現で機能を発揮できたが、それが毒になる場面もあった。同僚たちがDOM操作の負荷を考慮せず、キャッシュする努力もなくループ内で毎回重いjQuery DOM検索を行うのを見ると、ため息が出ることもあった。

自分らしい開発スタイルを求めて

しかし、AngularJSを使えば使うほど、自分が望む方式で制御できないことに不満を感じるようになった。その後、実務でReactやVueを使う時も同じ気持ちだった。何というか、とても自動化されているが、自由がない感じ。そしてpure JavaScriptから遠ざかっていく感じ。毎回リファレンス文書を探さなければならない学習曲線が不便だった。

Virtual DOMがみんな速いと言うが、それが本当に正しいのかも分からない。そのせいで自分がDOMを直接操作する自由を奪われた感じがする。時々自動運転や自動駐車を思い浮かべることがあるが、それは本当に運転が上手な人にとってはむしろ邪魔なものだと思う。

JavaScript Micro-Templatingとの出会い

そんな時、Angularに衝撃を受けながらも、John ResigのJavaScript Micro-Templating（https://johnresig.com/blog/javascript-micro-templating/）という記事を見つけた。

「あ、こうやってテンプレートエンジンを作ることができるんだ」と思い、これにイベントハンドラーを付けて、使いやすく改善する過程を経て、bridge-jsが開発されていくことになった。何より、当時Google Mapを活用した訪問管理システムを作りながらbridge-jsを適用して、様々な機能を追加し実験することができたのは貴重な経験だった。

一人での限界と休止期間

しかし、個人のコーディング能力が卓越していないせいで、実際には内部コードがうまく整理されていなかった。特に英語ができないため、英文で詳細な技術文書を作成することや、テストコードも全くなかったため、諦めていた。どうせ自分一人だけが使っていたので、しばらく開発を止めていた。

AIとの出会いが変えたすべて

転機は最近、事業用ウェブサイトを企画している時に訪れた。ChatGPT、Claude、Geminiと対話している中で、AIの助けを借りればbridge-jsもうまく磨き上げることができるだろうと思うようになった。

バスの中でちょっと時間ができた時、AIにbridge-jsをどう評価するか聞いてみた。AIは「bridge-jsは他のフレームワークのようにエンタープライズ市場では競争しにくいだろうが、文法の簡潔さとJavaScript親和的な面で小規模な画面やプロトタイプ作成には適しているかもしれない」と言ってくれた。

少数でもどこかで使い道があるだろうという希望を持って、AIの助けを借りることにした：

• リファクタリング: Claude + Gemini
• ホームページ制作: Claude + MCP
• テストコード作成: Gemini
• 英文技術文書README.md: Claude

おそらくAIの助けがなければ、始める勇気も出なかっただろう。

新しい名前：Compomint へ

bridge-jsはすでにnpmに登録されていたので、新しい名前を探すためAIと様々に対話した。いくつかの検討を経て、compo（component）+ mint（作る、fresh）という名前を提案してもらい、この名前に決めた。

面白いことに、AIが紹介してくれた名前の中にspamintがあって発音が良くて選ぼうとしたのだが、AIが一度考え直してから「spamが入っているので使わない方がいい」と言ってくれたのが印象に残っている。

実際のプロジェクトでの活用

現在は事業のための在庫管理アプリをCompomintベースで作ろうとして、それまで放置していた修正が必要な部分を修正せずに使うわけにはいかないと思い、AIの助けを借りてまずbridge-js → Compomintへのリファクタリングを進めることになった。今はCompomintで在庫管理アプリを作りながらバグを見つけて修正している最中だ。

Template-Basedを選んだ理由

なぜTemplate-Basedなのか？テンプレートはデータだけ変えれば再利用が可能だという点、そしてテンプレートで作ったコンポーネントをレゴブロックのように積み重ねれば、同じHTMLコードを繰り返し作成することなくウェブサイトやSPAアプリを作ることができると考えたからだ。

テンプレートで一度作成すれば、同じレゴブロックを量産するように、レゴのようにブロックを積み重ねるコーディングの楽しさを提供したかった。ある程度規格化されているが、データを変えることで汎用性を高めるためにテンプレートをベースにしたのだ。

バニラJSは少し不便だから、JavaScriptとHTMLを混合してDOMをもっと楽に作り、コンポーネント化しやすくして、一度作れば再利用しやすい形にしたかった。

おわりに

正直、今でもReact、Vue、Angularのようなフレームワークを作った人たちに比べれば、開発に対する専門知識や哲学的思考、考察は多く不足していると思う。しかし、多様な選択肢があることは良いことだから、誰かがCompomintを選んでくれればいいなと思う。

10年間の長い旅だったが、AIの助けを借りて新たなスタートを切ることができた。完璧ではないかもしれないが、「使えるならOK」の精神で、これからも進んでいきたい。

この記事はClaude（Anthropic）と一緒に作成しました。