概要
NocoBase のクライアントプラグインでは、さまざまなことができます。新しいページの登録、カスタムコンポーネントの作成、バックエンド API の呼び出し、ブロックやフィールドの追加、さらにはアクションボタンの拡張まで可能です。これらの機能はすべて、統一されたプラグインエントリポイントを通じて管理されます。
React の開発経験があれば、すぐに始められます。ほとんどの場面では通常の React コンポーネントを書くだけで、あとは NocoBase が提供するコンテキスト機能（リクエスト送信、国際化など）を使って NocoBase と連携します。コンポーネントを NocoBase のビジュアル設定画面に表示させたい場合にのみ、FlowEngine について理解する必要があります。
注意
NocoBase は client（v1）から client-v2 への移行を進めています。現在 client-v2 はまだ開発中です。本ドキュメントの内容は先行体験向けのものであり、本番環境での使用は推奨されません。新しく開発するプラグインは src/client-v2/ ディレクトリと @nocobase/client-v2 の API を使用してください。
学習パス
以下の順番でクライアントプラグイン開発を学ぶことをお勧めします。シンプルなものから複雑なものへ進みます。
各ステップの内容：
- Plugin：プラグインのエントリクラスです。
load()などのライフサイクルでルーティングやモデルなどのリソースを登録します。 - Router：
router.add()でページルーティングを登録し、pluginSettingsManagerでプラグイン設定ページを登録します。 - Component：ルーティングにマウントするのは React コンポーネントです。React + Antd で書くだけでよく、通常のフロントエンド開発と変わりません。
- Context：プラグイン内では
this.contextでコンテキストを取得し、コンポーネント内ではuseFlowContext()でコンテキストを取得すれば、NocoBase が提供する機能――リクエスト送信（ctx.api）、国際化（ctx.t）、ログ出力（ctx.logger）など――が使えます。 - FlowEngine：コンポーネントを「ブロック / フィールド / アクションを追加」メニューに表示し、ユーザーによるビジュアル設定をサポートする場合は、FlowModel でラップする必要があります。
最初の 4 ステップでほとんどのプラグインシナリオをカバーできます。NocoBase の UI 設定体系に深く統合する場合にのみ、5 ステップ目に進む必要があります。どちらの方法を使うべきか迷った場合は、Component vs FlowModel を参照してください。
クイックインデックス
関連リンク
- 最初のプラグインを作成する — ゼロから実行可能なプラグインを作成する
- サーバーサイド開発の概要 — クライアントプラグインは通常サーバーサイドとの連携が必要です
- FlowEngine 完全リファレンス — FlowModel、Flow、Context の完全なリファレンス
- プロジェクトディレクトリ構造 — プラグインファイルの配置場所