UI フレームワーク（ichigojs）

ichigo.js（@mintjamsinc/ichigojs）は、軽量なリアクティブ UI フレームワークです。Vue ライクな API と仮想 DOM を備え、MintJams CMS のアプリや Storefront の構築に使います。

インストールと読み込み

npm install @mintjamsinc/ichigojs

複数のバンドル形式を提供します。

ESM — import { VDOM } from '@mintjamsinc/ichigojs';
CommonJS — const { VDOM } = require('@mintjamsinc/ichigojs');
UMD — <script src=".../dist/ichigo.umd.js"></script> → window.ichigo

アプリを作る

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

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

オプション: data()、computed、methods、watch、emits、logLevel。インスタンスでは \$markRaw、\$nextTick、\$emit、\$ctx などのヘルパーが使えます。

リアクティビティ

data — data() が返す値は自動的にリアクティブになります（this.count++、this.items.push(...) などが反映）
computed — 依存を自動追跡してキャッシュ。読み取り専用と、書き込み可能（{ get, set }）の両方
watch — プロパティの変化に反応。deep / immediate に対応
$markRaw — Chart.js など外部ライブラリのインスタンスを非リアクティブに保持

computed: {
  fullName: {
    get() { return `\${this.firstName} \${this.lastName}`; },
    set(v) { const [f, l] = v.split(' '); this.firstName = f; this.lastName = l; }
  }
}

ディレクティブ

ディレクティブ	用途
`v-if` / `v-else-if` / `v-else`	条件付きレンダリング
`v-for`	リスト描画（`:key` 推奨）
`v-show`	表示/非表示（`display`）
`v-bind`（`:`）	属性・class・style のバインド
`v-on`（`@`）	イベント（`.stop` `.prevent` `.enter` などの修飾子）
`v-model`	双方向バインド（`.lazy` `.number` `.trim`）
`v-text` / `v-html`	テキスト / 生 HTML（`v-html` は XSS に注意）
`v-focus`	フォーカス制御（`.select` `.cursor-end`）
`v-resize` / `v-intersection` / `v-performance`	ResizeObserver / IntersectionObserver / PerformanceObserver

<input v-model.trim="message">
<li v-for="(item, i) in items" :key="item.id">{{ item.name }}</li>
<button @click="increment">+1</button>

ライフサイクルフック

要素に対して @mount / @mounted / @update / @updated / @unmount / @unmounted を指定できます。各フックは \$ctx（element / vnode / userData）を受け取ります。userData はリアクティブの影響を受けない保管場所で、close() を持つオブジェクトは破棄時に自動でクリーンアップされます。

methods: {
  onMounted(\$ctx) {
    const chart = new Chart(\$ctx.element.querySelector('canvas'), { /* ... */ });
    \$ctx.userData.set('chart', chart);
  },
  onUnmount(\$ctx) { \$ctx.userData.get('chart')?.destroy(); }
}

コンポーネント

defineComponent で、再利用可能な Web Components を定義できます。props、slot、\$emit に対応します。

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

defineComponent('my-list', {
  template: '#my-list',
  props: ['items'],
  data() { return { items: this.items ?? [] }; }
});

<my-list :items="searchResults">
  <span slot="empty">No results.</span>
</my-list>

イベントは this.\$emit('selected', { id: 42 }) で発火し、親は @selected="onSelected" で受け取ります（ペイロードは event.detail）。

ヒント

更新はマイクロタスクでバッチ処理されます。DOM 反映後の処理は \$nextTick で。
v-component と VComponentRegistry は非推奨です。新規は defineComponent を使ってください。
サンプルは ichigojs のサンプル集を参照してください。