コンポーネントとデータバインディング

Qwik フレームワークにおけるコンポーネントの作成とデータバインディングのプロセスを学びます。具体例を通して、コンポーネントの基本構造、プロパティの渡し方、そして状態管理の方法について理解を深めましょう。

コンポーネントの作成

目的

コンポーネントは、再利用可能な UI のビルディングブロックです。Qwik では、コンポーネントを通じてアプリケーションの UI を構築し、データを管理します。

実装例

• カウンターコンポーネントの作成:
  1. Counterコンポーネントを作成し、クリックイベントに応じてカウントアップする機能を実装します。

// src/components/Counter.tsx
import { component$, useStore } from '@builder.io/qwik';

export const Counter = component$(() => {
  const state = useStore({ count: 0 });

  return (
    <div>
      <button onClick$={() => state.count++}>Count: {state.count}</button>
    </div>
  );
});

このコンポーネントは、useStore フックを使用してローカル状態を管理します。countプロパティがボタンクリックで増加します。

データバインディング

目的

データバインディングは、コンポーネントの状態と UI の同期を保つプロセスです。Qwik では、宣言的にデータを UI にバインドすることができます。

実装例

• カウンター値のバインディング:
  1. 上記のCounterコンポーネントで、ボタン内のテキストにcount状態をバインドします。

<button onClick$={() => state.count++}>Count: {state.count}</button>

この例では、ボタンのテキストがstate.countの値をリアルタイムに反映します。ユーザーがボタンをクリックすると、countの値が増加し、UI が自動的に更新されます。