# View-Section-Componentの関係

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

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-490c7df245e48f5cfb0b4420131b5c8a91e4d00d%2F%E3%83%93%E3%83%A5%E3%83%BC%E3%83%BB%E3%82%BB%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%BB%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88.png?alt=media" alt=""><figcaption></figcaption></figure>

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

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

***

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

#### オブジェクト

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

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

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

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

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

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

#### タイトル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-f73e66e2386d8cf9e7d3683bc9c1215577adf6db%2F%E8%BF%BD%E5%8A%A0%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png?alt=media" alt="" data-size="line">をクリックすると、画面パラメータが追加されます。

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

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

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

#### 必須設定

<img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-63dcd485490e848ff2b6589e8bb6ef11ebb9f2a3%2F%E5%BF%85%E9%A0%88%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png?alt=media" alt="" data-size="line">をクリックすると、画面パラメータを必須に設定できます。

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

<img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-05e52fb06159e55851377572c2e9608b570ee11b%2F%E5%89%8A%E9%99%A4%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3.png?alt=media" 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をドラッグ＆ドロップすることでコンポーネントが作成されます。