> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# クイックスタート

> YiDA のカスタムコンポーネント開発を、テキストコピー機能の実装例で解説。初期化から開発、デバッグ、公開、インストール、利用までの一連のワークフローを網羅したチュートリアルです。

本ドキュメントでは、カスタムコンポーネントで **テキストコピー機能** を実装する小さな事例を通して、カスタムコンポーネントの開発、デバッグ、インストール、利用というエンドツーエンドのプロセスを体験いただけます。

## 事例シナリオ

カスタムコンポーネント機能を使用して、YiDA の既存のテキストコンポーネントにローコード拡張を追加し、テキストコピー機能を実装します。この機能では、テキストコンテンツをクリップボードにコピーすることで、ユーザーが繰り返し入力するフィールドを容易に入力できるようにします。

## 結果プレビュー

## 手順

### ステップ 1：カスタムコンポーネントの作成

コンポーネント名、タイプ、識別子などのプロパティを設定し、業務ニーズに合わせたコンポーネントを低コストで構築します。
**手順：**

1. YiDA アプリ >> アプリ設定 >> コンポーネント管理 >> コンポーネントセンター へ移動します（下図参照）。

2. コンポーネントを追加 >> コンポーネント名、コンポーネントタイプ、コンポーネント識別子などのプロパティを入力 >> 確認 します（下図参照）。

### ステップ 2：カスタムコンポーネントの開発とデバッグ

さまざまな業務ニーズに合わせてコンポーネントを開発・デバッグします。本事例では、コンポーネントのコピー機能を実装します。
**手順：**

1. コンポーネントセンター >> マイコンポーネント >> デバッグしたいコンポーネントを検索 >> 開発 します（下図参照）。

2. 前述のとおり、コンポーネントはビューとプロパティで構成されます。コンポーネントを開発する際は、まずコンポーネントに必要なプロパティを抽出する必要があります。まずコンポーネントプロパティを構築しましょう。このコンポーネントに必要なのは、テキストコンテンツ用のプロパティ 1 つだけです。プロパティ設定 >> プロパティ定義 に移動し、`content` という名前のテキストコンテンツプロパティを追加し、プロパティタイプを Text に設定、セッターを `textSetter` に設定します。

3. コンポーネントプロパティの構築が完了したら、必要な [YiDA 標準コンポーネント](/ja/yida/custom-page/zqpbaq)をキャンバスに追加してコンポーネントビューを構築します（本事例では 2 つの Text コンポーネントが必要で、それぞれ「Text」および「Copy」と名付けます）。基本プロパティを設定し、変数バインディングを使って Text コンポーネントのコンテンツを、先ほど構築したプロパティ `props.content` にバインドします。こうすることで、実行時に渡されたプロパティ値が表示されます（下図参照）。

4. Button コンポーネントにアクションを設定し、テキストコピー機能を実装します。「Copy」テキストを選択 >> アクションを作成 >> onCopyText クリック を選択します（下図参照）。

5. JS パネルにコピーロジックを記述します（下図参照）。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onCopyText() {
  const input = document.createElement('input');
  input.setAttribute('readonly', 'readonly');
  // this.props.xxx でプロパティを取得
  input.setAttribute('value', this.props.content);
  document.body.appendChild(input);
  input.select();
  input.setSelectionRange(0, 9999);
  document.execCommand('copy');
  document.body.removeChild(input);
  this.utils.toast('クリップボードへのコピーに成功しました');
}
```

6. 保存 >> コンポーネントをプレビューします。

7. 公開 >> [バージョン番号](/ja/open/yida/guide/concept/customComponent#コンポーネントバージョンについて)と関連する備考を入力 >> 確認 します（下図参照）。

8. 公開に成功するとメッセージが表示されます（下図参照）。実際のコンポーネント開発では、保存すれば開発バージョン（0.1.0）のコンポーネントをインストールしてリアルタイムでデバッグできます。正式バージョンは、コンポーネントの開発が完了してから公開すれば十分です。

### ステップ 3：カスタムコンポーネントのインストール

開発・デバッグ済みのカスタムコンポーネントをページにインストールすることで、ページ設計時に使用できるようになります。[コンポーネントのインストール](/ja/open/yida/guide/concept/customComponent#コンポーネントのインストールタイプ)時には、ページタイプを選択する必要があります。この選択を行って初めて、該当するページデザイナーにカスタムコンポーネントが表示されます。
**手順：**

1. フォーム設計ページ >> コンポーネントライブラリ >> カスタムコンポーネント >> コンポーネント管理（下図参照）。

2. コンポーネント管理ページ >> コンポーネント一覧 >> インストールしたいカスタムコンポーネントを選択 >> インストール（下図参照）。

3. [インストールバージョン](/ja/open/yida/guide/concept/customComponent#コンポーネントバージョンについて)と[インストールスコープ](/ja/open/yida/guide/concept/customComponent#コンポーネントのインストールタイプ)を選択 >> インストール（下図参照）。

<Warning>
  1) 本番環境でカスタムコンポーネントを安定して使用するため、コンポーネントのバージョンを選択する際は、**必ず 1.x.x 以降にリリースされた安定バージョンをインストールしてください**。
  2) カスタムコンポーネントをページデザイナーで利用可能にするには、インストールスコープで該当するページタイプを選択する必要があります。選択して初めて、インストール済みコンポーネントがそのページデザイナーに表示されます。
</Warning>

### ステップ 4：カスタムコンポーネントの使用

上記の手順により、カスタムコンポーネントがページのコンポーネントライブラリのカスタムコンポーネントカテゴリ配下にインストールされました。以下の手順に従って使用してください。
**手順：**

1. フォーム設計ページ >> コンポーネントライブラリ >> カスタムコンポーネント >> 必要なコンポーネントを選択 >> キャンバスへドラッグします（下図参照）。

### ステップ 5：コンポーネント情報の表示または変更

コンポーネントの使用中に、サムネイル、ヘルプドキュメント URL、または説明を変更する必要がある場合は、以下の手順に従ってください。
**手順**

1. アプリ設定 >> コンポーネント管理 >> コンポーネントセンター（下図参照）。

2. 詳細を表示または変更したいコンポーネントを選択 >> 詳細 を選択します（下図参照）。

<Note>
  **注意**：コンポーネント詳細ページには、**基本情報**、**リリース情報**、**管理者** の 3 つのモジュールがあります（下図参照）。

  1. **基本情報**：「編集」をクリックすると、カスタムコンポーネントのサムネイル、ヘルプドキュメント URL、および説明を変更できます。その他の設定はコンポーネント作成時に設定されており、変更できません。
  2. **リリース情報**：カスタムコンポーネントの反復履歴（バージョンと対応するリリースノート）を確認できます。
  3. **管理者（カスタムコンポーネントを開発・デバッグする権限を持ちます。デフォルトはコンポーネントの作成者です）**：管理者を追加または削除して権限管理を行います。
</Note>

## カスタムコンポーネントのプロパティ

カスタムコンポーネントは、YiDA の既存コンポーネントの拡張をサポートするだけでなく、生成されたカスタムコンポーネントのプロパティ（`propTypes`）をカスタマイズすることもできます。これにより、カスタムコンポーネントを開発者の日常業務のシナリオや習慣により合致したものにできると同時に、より高い柔軟性とカスタマイズ性を持たせられます。

### カスタムコンポーネントプロパティ設定のエントリ

**パス**：ローコードコンポーネントデザイナー >> キャンバス上の「ローコード業務コンポーネント」を選択 >> 右側のプロパティ（下図のパス参照）。

### カスタムコンポーネントプロパティ設定の詳細

カスタムコンポーネントのプロパティは、**両端設計**、**プロパティ定義（**`propTypes`**）**、**ライフサイクル**、**固定値識別子** の 4 つのモジュールに分かれています。具体的には以下のとおりです。

* **両端設計**：トグルスイッチです。有効にすると、PC 端とモバイル端を完全に分離して独立に設計でき、両端対応のニーズを満たせます。
* **プロパティ定義（propTypes）**：カスタムコンポーネントの **タイトル**、**名前**、**タイプ（データ形式）**、**デフォルト値** などの基本プロパティをカスタマイズできます。また、**Hide（コンポーネントを非表示にするかどうか）** や **On Change（表示値が変更されたとき）** などのイベントをバインドして、さまざまな業務ニーズに対応できます。詳細は[コンポーネントプロパティ設定](/ja/yida/form/zyrrlb)をご覧ください。
* **ライフサイクル**：カスタムコンポーネントのライフサイクルには、**コンポーネントレンダリング完了（**`componentDidMount`**）**、**コンポーネント更新完了（**`componentDidUpdate`**）**、**コンポーネントエラーキャッチ（**`componentDidCatch`**）**、**コンポーネントアンマウント前（**`componentWillUnmount`**）** の 4 つのステージがあります。それぞれのライフサイクルステージに異なるロジックを記述することで、複雑な業務ニーズに対応できます。
* **固定値識別子**：YiDA 標準コンポーネントと同様に、カスタムコンポーネントにもコンポーネントの一意の識別コードとして機能する固定値識別子プロパティがあります。システムにより自動生成され、通常は変更する必要はありません。YiDA バックエンドでのデータ保存やコードのバインディングなどに使用されます。

<Warning>
  **重要事項：**

  * コンポーネントの **固定値識別子（fieldId）は YiDA がコンポーネントを参照するために使用する一意の識別コード** です。識別子を変更すると、このコンポーネント上で使用されている数式、データ保存（データが失われる可能性があります）、JS 関数の参照などに影響する可能性があります。**コンポーネントの固定値識別子は変更しないことを強く推奨します。**
  * **どうしてもこの識別子を変更する場合（現在は schema インポート でのみ可能です）は、この方法を選択することで、その結果を完全に理解し、単独で責任を負うことに同意したものとみなされます。YiDA は、それにより生じるいかなる結果についても責任を負いません。ご理解ご協力のほどよろしくお願いいたします。**
</Warning>