# 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をドラッグ＆ドロップすることでコンポーネントが作成されます。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dashcomb.com/dashcomb-help-center/ide/view-section-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.