概要とインストール

ichigo.js（@mintjamsinc/ichigojs）は、軽量なリアクティブ UI フレームワークです。Vue ライクな API と仮想 DOM を備え、宣言的なテンプレートと自動依存追跡で UI を構築できます。TypeScript で書かれており、型定義を同梱しています。

MintJams では、Webtop の標準アプリ・独自アプリ、Commerce の Storefront、タスクフォームなど、フロントエンド全般で使われています。

特長

  • リアクティブ — data は自動でリアクティブ。computed（依存追跡＋キャッシュ、書き込み可能な { get, set }）と watch（deep / immediate）を備える
  • 豊富なディレクティブ — v-if / v-for / v-model / v-bind / v-on ほか。v-focus や各種 Observer ディレクティブも
  • ライフサイクルフック — @mount … @unmounted と $ctx、userData による外部ライブラリの保持と自動クリーンアップ
  • コンポーネント — defineComponent による再利用可能な Web Components（props / slot / $emit）
  • テンプレート参照 — ref / $refs で DOM 要素やコンポーネントへ直接アクセス
  • 高速 — マイクロタスクによるバッチ更新。1000 件のリスト更新で約 6.8ms
  • 軽量・TypeScript 完全対応

インストール

npm install @mintjamsinc/ichigojs

バンドル形式

形式 読み込み
ESM import { VDOM } from '@mintjamsinc/ichigojs';
CommonJS const { VDOM } = require('@mintjamsinc/ichigojs');
UMD <script src=".../dist/ichigo.umd.js"> → window.ichigo から利用

CDN から試すこともできます。

<script type="module">
  import { VDOM } from 'https://cdn.jsdelivr.net/npm/@mintjamsinc/ichigojs/dist/ichigo.esm.min.js';
  // ...
</script>

最小の例

<div id="app">
  <h1>{{ message }}</h1>
  <input v-model="message">
  <p>Count: {{ count }}</p>
  <button @click="increment">Increment</button>
</div>

import { VDOM } from '@mintjamsinc/ichigojs';

VDOM.createApp({
  data() { return { message: 'Hello ichigo.js!', count: 0 }; },
  methods: { increment() { this.count++; } }
}).mount('#app');

動作環境

  • ES2020+ をサポートするモダンブラウザ
  • Proxy、queueMicrotask などの機能を利用します

次のステップ