> For the complete documentation index, see [llms.txt](https://docs.dashcomb.com/dashcomb-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashcomb.com/dashcomb-help-center/ide/view-section-component.md).

# View-Section-Componentの関係

簡単に言えば、Viewは画面、Sectionは画面中の段落、Componentは段落の中の部品という位置付けです。

<figure><img src="/files/xN835RgGup3txzKpi2yY" alt=""><figcaption></figcaption></figure>

## View <a href="#view" id="view"></a>

Dashcombが提供しているViewとはHTMLのページや画面に相当しています。ViewはDashcombが提供している[サブメニュー](/dashcomb-help-center/ide/region/menu-region.md)と紐付けていますので、[サブメニュー](/dashcomb-help-center/ide/region/menu-region.md)をクリックすると、該当のViewが表示されています。

***

### 共通 <a href="#view-common" id="view-common"></a>

#### オブジェクト

ビューオジェクトの変数名です。

サブメニューを作成すると、そのViewオブジェクトが自動的に `View` と名付けられます。

View オブジェクトのプロパティの値は、`{{ View.プロパティ名 }}` で参照することができます。

View オブジェクトが保持しているプロパティとその値は、[インスペクター](/dashcomb-help-center/ide/region/inspector-region.md) メニューで確認できます。

{% hint style="info" %}
他のコンポ―ネントと異なり、View オブジェクトの変数名は変更できません。
{% endhint %}

### データ <a href="#view-data" id="view-data"></a>

#### タイトル

画面上に表示される、タイトルのテキストです。初期値として、 `title` が自動で設定されます。

入力欄に設定したテキストが、作成する管理画面のタイトルとして一番上に表示されます。

任意の文字列に入れ替えることはもちろん、構文 `{{オブジェクト名.プロパティ}}` を利用して、動的に設定することができます。

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](/dashcomb-help-center/ide/obujekutoyadtano.md) のページを参照してください。
{% endhint %}

（例）`title` を `{{currentUser.name}}` に書き換えると、タイトルとしてログイン中のユーザー名が表示されます。

トグルスイッチをOff にすると、タイトルは非表示になります。

#### **概要説明**

ページの概要を説明するテキストです。初期値として、 `description` が自動で設定されます。

入力欄に設定したテキストが、作成する管理画面の概要としてタイトルの下に表示されます。

任意の文字列に入れ替えることはもちろん、構文 `{{オブジェクト名.プロパティ}}` を利用して、動的に設定することができます。

（例）`description` を `{{currentUser.name}}の作業画面です。`に書き換えるえると、ユーザー画面にはユーザーの名前が表示されます。

### パラメータ <a href="#view-parameter" id="view-parameter"></a>

管理画面が受け取るパラメータを設定できます。

#### 画面パラメータの追加

<img src="/files/nnk5fNFpQzHO78sG54bM" alt="" data-size="line">をクリックすると、画面パラメータが追加されます。

新たに追加した画面パラメータ名は、自動的に `keyName0`, `keyName1` ... と名付けられます。

画面パラメータ名は、任意の文字列に変更できます。画面パラメータ名に利用できるのは半角英数字のみです。 `{{}}` 構文は利用できません。

{% hint style="info" %}
ここでは画面パラメーターの変数名だけを設定します。画面パラメーターの値は、他の画面から取得します。
{% endhint %}

#### 必須設定

<img src="/files/8t7wJJBpiBm3TusBdGqM" alt="" data-size="line">をクリックすると、画面パラメータを必須に設定できます。

#### 画面パラメータの削除

<img src="/files/4Gcj3lwAm0jfyFIaV9vy" alt="" data-size="line">をクリックすると、画面パラメータが削除されます。

### メニュー <a href="#view-menu" id="view-menu"></a>

#### 表示名称

Viewが所属しているサブメニュー名です。値を変更すると、サブメニューの名前も連動して変更されます。利用できるのは半角英数字のみです。 `{{}}` 構文は利用できません。

#### パス定義

この画面を表示するためのURLのパスです。初期値は、自動生成されたハッシュ値です。任意の値に変更することができます。利用できるのは半角英数字のみです。 `{{}}` 構文は利用できません。

#### 非表示

トグルスイッチをONにすると、当該画面と、対応するサブメニューがユーザー画面上に表示されなくなります。

#### 外部リンク

トグルスイッチをONにすると、サブメニューが外部リンクになります。メニューをクリックした際に、管理画面を開く代わりに入力欄に設定したURLへ遷移します。

URL入力欄は、 `{{ }}` 構文を利用できません。

## Section <a href="#section" id="section"></a>

Dashcombが提供しているSectionとはHTMLの `<section>` や `<div>` に相当しています。SectionはDashcombが提供しているViewに依存しますので、ViewにSectionやComponentをドラッグ＆ドロップすることでセクションが作成されます。また、一つのページの中で複数のSectionはお互いにより独立な意味か機能を持っていますので、それぞれにアクション指定やバリデーション作動させることもできます。

## Component <a href="#component" id="component"></a>

Dashcombが提供しているComponentは画面レイアウトや内容を実装する際に使います。`<input>`、`<button>`、`<table>` などHTMLの主なタグに機能的に似ていますが、Dashcombはそれらよりもっと使いやすく便利なコンポーネントを提供しています。ComponentはDashcombが提供しているViewやSectionに依存しますので、ViewやSectionにComponentをドラッグ＆ドロップすることでコンポーネントが作成されます。