基本ガイド

ichigo.js の中核となる、リアクティビティ・ディレクティブ・ライフサイクル・コンポーネントを解説します。

アプリを作る

import { VDOM } from '@mintjamsinc/ichigojs';
VDOM.createApp({ data() { return { /* ... */ }; }, methods: { /* ... */ } }).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 — 外部ライブラリのインスタンスを非リアクティブに保持
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 表示/非表示
v-bind（:） 属性・class・style
v-on（@） イベント（.stop .prevent .enter .ctrl などの修飾子）
v-model 双方向バインド（.lazy .number .trim）
v-text / v-html テキスト / 生 HTML（v-html は XSS に注意）
v-focus フォーカス制御（.select .cursor-end）
v-resize / v-intersection / v-performance 各種 Observer 
<input v-model.trim="message">
<li v-for="(item, i) in items" :key="item.id">{{ item.name }}</li>
<button @click.stop="onClick">Click</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 を定義します。

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 を使ってください。