Appkit

Appkit

npm の Core · npm の React · ドキュメント

概要

スキーマを基に業務フォーム、検証、レコード操作をそろえる TypeScript・React ライブラリです。

導入する理由と価値

申請項目を一度定義し、保存前に入力を検証して、アプリケーション所有のデータアダプターに接続します。データベースとストレージの境界を明示することで、プロバイダーの選択を把握できます。AI の契約により、アプリケーションは変更を適用する前に提案を確認できます。

最初に使うパッケージ	必要な機能
Appkit Core	フレームワークに依存しない検証、ストレージ、レコードアダプター、グラフ、地域別ヘルパー
Appkit React	React UI、スキーマフォーム、レコードテーブル、AI 提案の確認画面。Core に依存します

Core は React なしで利用できます。どちらのパッケージもホストされたバックエンドを提供しません。認証、認可、永続的な書き込みはアプリケーションが担います。

主な機能

• 永続化の境界を明示したスキーマフォームとレコードテーブル。
• フレームワークに依存しないストレージ、データ、グラフ、AI、地域別ヘルパー。
• 機能別のサブパスを持つ2つの npm パッケージ。React は React パッケージに分離しています。

クイックスタート

フォームの例には、Node.js 24 以降と、React および React DOM が ^19.2.3 に合う既存の React アプリケーションを使用します。Core のみを使うアプリケーションは、Core の検証例から始められます。

npm install @alneas/appkit-core @alneas/appkit-react react@^19.2.3 react-dom@^19.2.3 @tanstack/[email protected]
# Or use bun add with the same package names and versions.

この例では TanStack Query を直接インポートするため、上記に明示しています。認証済みバックエンド用の DataAccessAdapter を用意し、RequestForm に渡してください。両方のデータプロバイダーを維持し、アプリケーションのスタイルシートのエントリーポイントで Appkit CSS を一度インポートします。

import { useState, type ComponentProps } from 'react';
import type { DataAccessAdapter } from '@alneas/appkit-core/data';
import { QueryClientProvider } from '@tanstack/react-query';
import { createQueryClient, DataAccessProvider } from '@alneas/appkit-react/tools/data-access/react';
import { FormView } from '@alneas/appkit-react/tools/form';
import '@alneas/appkit-react/styles';

const schema: ComponentProps<typeof FormView>['schema'] = {
  type: 'object',
  properties: {
    name: { type: 'string', title: 'Name', minLength: 2 },
    reason: { type: 'string', title: 'Reason', 'x-ui': { widget: 'textarea' } },
  },
  required: ['name'],
};
export function RequestForm({ adapter }: { adapter: DataAccessAdapter }) {
  const [client] = useState(createQueryClient);
  const [saved, setSaved] = useState('');
  return <QueryClientProvider client={client}><DataAccessProvider adapter={adapter}>
    <FormView testId="persistence" collection="records" mode="create" schema={schema}
      validation={{ emptyStrings: 'preserve', locale: 'en', cast: { numericMode: 'strict' } }}
      onSuccess={record => setSaved(JSON.stringify(record))} />
    <output aria-label="Persisted">{saved}</output>
  </DataAccessProvider></QueryClientProvider>;
}

永続化はアダプターが制御します。認可、マイグレーション、並行処理の確認、最終的な書き込みはアプリケーションが担います。

フォームには Name と Reason のフィールドが表示されます。2文字未満の名前を拒否し、アダプターによる保存結果を表示します。失敗と再試行の確認は、フォームの完全な手順を参照してください。任意の機能用ピア依存は各パッケージのエクスポートリファレンスに記載しています。パッケージをインストールしても、すべてのプロバイダーを設定する必要はありません。

次のステップ

パッケージ	機能のインポート先	ドキュメント
@alneas/appkit-core	/storage, /data, /japan, /graph, /ai, /us	Core ガイド
@alneas/appkit-react	/ui, /tools, /ai, /styles	React ガイド

app-core/react-tools からの移行 · フォームの完全な手順 · 開発への参加 · リリース手順

決定的な検査は、API カタログ、メタデータ、開発者が実装した連携、評価ハーネスを対象にしています。選択したアーカイブに対する条件を満たす実行バッチが得られるまでは、コーディングエージェントによる一連のタスク評価は未検証です。エージェント評価の手順とパッケージ横断のエージェント索引を参照してください。任意のピア依存と公開インポートは、各パッケージのエクスポートリファレンスに記載しています。

正本のドキュメントは英語です。ドキュメントポータルが取り込み、日本語訳、配信を担います。