コンポーネント属性

​

1. コンポーネント属性の概要

カスタムコンポーネントは属性定義（propTypes）操作に対応しており、属性レベルでコンポーネントを拡張できます。カスタム属性を追加することで、カスタマイズ性が向上し、コンポーネントをより柔軟にビジネス要件へ適合させることができます（図1.1-1参照）。 図1.1-1 コンポーネント属性定義のエントリポイント コンポーネント属性は「項目追加」ボタンで追加、「編集」ボタンでカスタマイズ、「削除」ボタンで削除できます。「編集」ボタンをクリックすると、コンポーネント属性のすべての設定項目を確認できます（図1.1-2参照）。 図1.1-2 カスタムコンポーネント属性定義の設定項目 すべてのカスタムコンポーネント属性定義は、コンポーネントプレビューページ（シンプルな属性デバッグ用）、またはアプリへのインストール後（コード関連のデバッグを含む複雑な属性設定用）で確認・設定できます（図1.1-3参照）。 図1.1-3 コンポーネント属性のプレビューとデバッグ 各設定項目の詳細は、以下のセクションを参照してください。

​

1.1 属性タイトル

カスタムコンポーネントに設定する属性名です。デフォルトの属性タイトルは「属性タイトル」です。分かりやすく明確なタイトルを設定することで、ユーザーが属性の意味を理解しやすくなり、入力すべき内容も把握しやすくなります。 コンポーネントをページ上で使用すると、以下のように表示されます。 図1.1-4 フォームデザイナーにおけるコンポーネント属性の表示

​

1.2 属性名

コンポーネントの属性名は属性キーであり、コンポーネント内のprops.xxxに相当します。デフォルト値はpropNameです。ページ設計で変数をバインドし、コンポーネントを制御できます。例えば、カスタムコンポーネントの属性値を、カスタムコンポーネント内にある別コンポーネントのタイトルとして使用できます（図1.1-5参照）。 図1.1-5 属性名の使用

​

1.3 属性タイプ

コンポーネントの属性タイプは一般的なデータ型と類似しており、テキスト、真偽値、数値、オブジェクト、配列、関数、要素の7種類があります。各データ型には複数のセッターが用意されており、さまざまな次元でデータを処理するユーザーのニーズに対応します（図1.1-6参照）。 図1.1-6 属性タイプの定義

​

1.4 セッター

属性タイプが異なるコンポーネントには異なる属性セッターが用意されており、それぞれ異なるコンポーネント描画方法やデータ処理方法を実現します。例えば、テキストタイプには5種類のセッターが対応しています（図1.1-7参照）。 図1.1-7 コンポーネント属性のセッター

​

1.5 デフォルト値

ユーザーがフォームへアクセスした際に、フォーム内のカスタムコンポーネントへデフォルトで表示されるフィールドを指します（表示例は図1.1-8参照）。 図1.1-8 コンポーネント属性のデフォルト値

​

1.6 変数バインディング対応の有無

ページ設計における変数バインディングです。

​

1.7 非表示設定

属性を非表示にするかどうかを制御します。使用頻度は低めです。

​

1.8 変更時の処理

複数の属性間で連動を実現する際に使用できます。使用頻度は低めです。

​

1.9 レイアウト

ブロックとインラインの2種類があり、カスタムコンポーネントをページ上でどのように配置するかを設定します。

​

1.10 ヘルプ説明

• 現時点では使用されていません。

​

1.11 ヘルプリンク

• 現時点では使用されていません。