# 画面遷移の実現方法

Dashcombが提供している[メニュー](https://docs.dashcomb.com/dashcomb-help-center/ide/region/menu-region)、[View](https://docs.dashcomb.com/dashcomb-help-center/ide/view-section-component#view-view)、[UI Componet](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component)を使って、パラメータ付きの画面遷移を簡単に実現できます。もちろん、パラメータなしの画面遷移はパラメータを設定しなければ、もっと簡単に実現できます。

## 準備

* これから使う画面を二つ用意します。一つは遷移元の画面、もう一つは遷移先の画面です。
  * 画面の作成は[View](https://docs.dashcomb.com/dashcomb-help-center/ide/view-section-component#view-view)にご参照ください。

## 実現

* 遷移先画面の[プロパティ領域](https://docs.dashcomb.com/dashcomb-help-center/ide/property-region)を開きます。
* 「パラメータ」の横にある「+」アイコンを押します。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-91cd6584caa2edf9190dc710e598e2b9c2a3ab4e%2F%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E3%81%AE%E5%AE%9F%E7%8F%BE%E6%96%B9%E6%B3%95_01.png?alt=media" alt=""><figcaption></figcaption></figure>

* パラメータ名の初期値 `keyName0` を `key` に変更します。
* 必要に応じて、「\*」アイコンを押し、必須項目に指定することも可能です。
* [Label](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/label)コンポーネントをドラッグ＆ドロップして、パラメータ確認用ラベルを作成します。
* その[プロパティ領域](https://docs.dashcomb.com/dashcomb-help-center/ide/property-region)にある「ラベル文字」の初期値 `label` を `key= {{currentPage.params.key}}`に変更します。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-1d99017755912ef6b28114dbb7e7829a12a74860%2F%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E3%81%AE%E5%AE%9F%E7%8F%BE%E6%96%B9%E6%B3%95_02.png?alt=media" alt=""><figcaption></figcaption></figure>

* 遷移元画面のサブメニューを押して、遷移元画面を開きます。
* [Input](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/input)コンポーネントをドラッグ＆ドロップして、入力ボックスを作成します。
* [Input](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/input)のオブジェクト名 `input1` を `inputKey` に変更します。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-62b3815cfdc79f4dbb33f2c30c4d4b50ad5eb741%2F%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E3%81%AE%E5%AE%9F%E7%8F%BE%E6%96%B9%E6%B3%95_03.png?alt=media" alt=""><figcaption></figcaption></figure>

* [Button](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/ui-component-button)コンポーネントをドラッグ＆ドロップして、遷移用のボタンを作成します。
* そのボタンを押して、ボタンの[プロパティ領域](https://docs.dashcomb.com/dashcomb-help-center/ide/property-region)を呼び出します。
* 「onClick」横のアイコンをクリックして、[アクションエディタ](https://docs.dashcomb.com/dashcomb-help-center/ide/property-region/action-editor)を呼び出します。
* 「アクション無し」を「メニューに移動」に変更します。
* 「メニュー」を押して、リストから遷移先のメニュー（画面）を選びます。
* 「パラメータ」の `key` 入力ボックスに `{{inputKey.value}}` を入力します。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-5a51e542ab73d492286356d635babe5a6972c736%2F%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E3%81%AE%E5%AE%9F%E7%8F%BE%E6%96%B9%E6%B3%95_04.png?alt=media" alt=""><figcaption></figcaption></figure>

* 「保存」ボタンを押すと、画面遷移機能の実現ができました。
* 確認するには、遷移元画面の[Input](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/input)に `hoge` を入力して、[Button](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/ui-component-button)を押すと、遷移先画面に飛んで、確認用ラベル `key= hoge` を確認できます。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-62501aa1557280663ab21c021a2c77ae5041e715%2F%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E3%81%AE%E5%AE%9F%E7%8F%BE%E6%96%B9%E6%B3%95_05.png?alt=media" alt=""><figcaption></figcaption></figure>

## 参照項目

* [プロパティ領域](https://docs.dashcomb.com/dashcomb-help-center/ide/property-region)
* [Inputの使い方](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/input)
* [Buttonの使い方](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/ui-component-button)
* [アクションエディタ](https://docs.dashcomb.com/dashcomb-help-center/ide/property-region/action-editor)