dhis2-app-development

DHIS2 アプリケーション開発

カスタム DHIS2 ウェブアプリケーションを開発する方を支援します。DHIS2 は、独自のアプリフレームワーク、コンポーネントライブラリ、Web API を備えた医療情報管理プラットフォームです。AI アシスタントは、非推奨の API エンドポイントや誤ったパターンを使ったり、DHIS2 専用のツールではなく汎用ライブラリを使ったりするなど、DHIS2 を誤って扱うことがよくあります。このスキルは、それを防ぐために用意されています。

まず、現在の状況を確認します

作業を始める前に、既存の DHIS2 プロジェクトで作業しているのか、新規に開始するのかを確認します。

確認項目	方法	結果
プロジェクトのルートに d2.config.js がある	d2.config.js を Glob で検索	既存のプロジェクト — スキャフォールディングを省略します
package.json に @dhis2/app-runtime がある	package.json を読み取る	既存のプロジェクト — スキャフォールディングを省略します
どちらも見つからない	—	新規プロジェクト — references/bootstrapping.md を読みます

既存のプロジェクトの場合は、変更を加える前に d2.config.js と package.json を読み、すでに設定されている内容を把握します。

ユーザーが必要としているものは何ですか？

ユーザーのタスクに該当するリファレンスを読みます。実際のタスクの多くはデータと UI の両方を扱うため、該当するものをすべて読みます。両方が必要な場合は、UI を構築する前に API の形式を理解できるよう、まず data-fetching.md を読みます。

シナリオ	リファレンス（記載順に読みます）
新しい DHIS2 アプリを作成またはスキャフォールディングする	references/bootstrapping.md
DHIS2 アプリを実行、起動、またはデプロイする	references/running-your-app.md
UI を構築せずにデータを取得または変更する（フック、スクリプト、一括操作）	references/data-fetching.md
データを表示するページ（リスト、テーブル、詳細ビュー）を構築する	references/data-fetching.md → references/ui-patterns.md
リソースを作成または編集するフォームを構築する	references/data-fetching.md → references/ui-patterns.md
ナビゲーション、ページレイアウト、またはサイドバーを追加する	references/routing.md → references/ui-patterns/sidebar.md
ウィジェットを使ったダッシュボードまたは詳細ページを構築する	references/data-fetching.md → references/ui-patterns/widget.md → references/ui-patterns/dashboards.md
UI コンポーネントを構築またはスタイル設定する	references/ui-patterns.md
DHIS2 のバージョン間で API の違いに対処する	references/data-fetching.md（§ 機能フラグ）

ルール

どのリファレンスを読んだかにかかわらず、DHIS2 に関するすべての作業に以下を適用します。

• React 18 のみを使用します。 データ取得に Suspense を使わず、React 19 の API（use()、useFormStatus など）も使いません。isLoading と CircularLoader を使って、読み込み状態を明示的に処理します。
• UI コンポーネントには必ず @dhis2/ui を使います。 MUI、Chakra、Ant Design は使いません。必要なコンポーネントが UI ライブラリにない場合に限り、カスタムコンポーネントを使用します。
• データ取得コードや UI コードを書く前に、必ずソースコードをクローンして読みます。 DHIS2 の API とコンポーネントの props に関するトレーニングデータは信頼できません。ソースコードが仕様です。
• ユーザーに表示する文字列にはすべて @dhis2/d2-i18n の i18n.t() を使います。
• すべての dhis2 リソース（組織単位、データ要素など）には、name ではなく displayName を使います。
• スタイル設定には CSS Modules と DHIS2 のデザイントークンを使います（var(--spacers-dp16)、var(--colors-grey900) など）。
• 各ターンの後に検証します。 変更を加えた後は pnpm exec eslint と pnpm exec tsc --noEmit を実行し、早い段階でエラーを見つけます。次に進む前に問題を修正します。出力がなければエラーはありません。

トラブルシューティング

DHIS2 アプリの構築時によく発生するエラー：

症状	修正方法
実行時には正常に動作し、IDE にもエラーが表示されない名前付きエクスポートで、ESLint の import/named エラーが発生する	eslint-import-resolver-typescript をインストールし、ESLint の設定で構成します。