> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# クイックスタート

> YiDA カスタムページの実践入門ガイド。ページの作成、コンポーネントのドラッグ＆ドロップ、ロジック設定、初回デモの公開まで、ローコード開発の基本ワークフローをステップごとに解説します。

このチュートリアルでは、YiDA のカスタムページ機能を使って、シンプルなデモを構築・公開する手順を解説します。完成イメージは以下のとおりです。

入力フィールドに名前を入力し、Generate ボタンをクリックすると、アプリが挨拶文を自動生成し、ボタンの下に表示します。以下、各手順を詳しく説明します。作業中に YiDA の製品機能について不明な点があれば、[YiDA 使い方ガイド](/ja/yida/intro/sbg6g2nsoxacis5y)を参照してください。それでは、ゼロからデモを構築していきましょう。

<Tip>
  ライブデモは [Hello Example](https://www.aliwork.com/o/demo/hello) で確認できます。実装内容は[カスタムコンポーネントデザイナー](https://www.aliwork.com/developer/designer?formUuid=hello-v2)で確認できます。
</Tip>

### フローノード 1：YiDA アプリの作成

まず、YiDA ワークスペースでアプリを作成します（詳細は[使い方ガイド](/ja/yida/app-admin/oncnoy)を参照）。既に利用可能なアプリがある場合は、この手順をスキップします。以下の例では、`demo example` という名前の空アプリを作成します。

### フローノード 2：カスタムページの作成

次に、デモを実装するためのカスタムページを作成します。今回はページテンプレートを使用しないため、テンプレート選択画面で `Skip` をクリックし、カスタムページデザイナーへ直接進みます。

YiDA のカスタムページデザイナーは以下のとおりです。機能の詳細については、[デザイナードキュメント](/ja/open/yida/guide/designer)を参照してください。デザイナーに入った後、現在のページ名を変更できます。

### フローノード 3：コンポーネントのドラッグと属性の設定

このデモは非常にシンプルで、3 つのコンポーネントのみで構成されています。コンポーネントライブラリパネルからキャンバスへドラッグしてください。コンポーネントの設定オプションの詳細については、[コンポーネントドキュメント](/ja/open/yida/components/layout/tabsLayout)を参照してください。

* **入力フィールド** — 名前を入力するために使用します。`Title` 属性を「名前」に設定します。
* **ボタン** — 入力された名前を読み取り、挨拶文を生成するために使用します。`Title` 属性を「生成」に設定します。
* **テキスト** — 挨拶文を表示するために使用します。見栄えを整えるため、スタイルパネルで上マージンを 20px、フォントサイズを 20px に設定します（下図参照）。

### フローノード 4：グローバル変数の作成

この手順からロジックを実装していきます。まず、挨拶文を保存するためのグローバル変数を作成します（グローバル変数の使い方の詳細は、[グローバル変数ドキュメント](/ja/open/yida/guide/concept/state)を参照）。以下のように、`helloWord` という名前のグローバル変数を作成します。

### フローノード 5：ボタンのクリックイベントのバインド

ユーザーがボタンをクリックした際、入力フィールドの内容を読み取り、生成した挨拶文を下部に表示する必要があります。ここでは、イベントのバインド方法と挨拶文の生成方法について解説します。

**1.** ボタンにクリックイベントをバインドします。以下のように、バインド後にアクションパネルへ JS 関数が自動生成されます（関数名はカスタマイズ可能）。

**2.** getValue API を使用して入力フィールドの内容を読み取ります。YiDA は豊富な [YiDA JSAPI](/ja/open/yida/api/yidaAPI) を提供しています。以下のように、入力フィールドコンポーネントの固有識別子に基づき、ユーザーの入力を取得します。

**3.** 挨拶文を組み立て、setState API を使用してグローバル変数を更新し、ページの再レンダリングをトリガーします。onClick の完全なコードは以下のとおりです。

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onClick() {
  // 名前入力フィールドから値を取得
  const name = this.$('textField_kzdxqcod').getValue();

  // グローバル変数を更新
  this.setState({
    helloWord: `Hello ${name} !`,
  });
}
```

### フローノード 6：テキストとデータソース変数のバインド

最後の手順として、表示のためにグローバル変数を Text コンポーネントの `Content` 属性にバインドします（下図参照）。

### フローノード 7：プレビューと公開

これでデモは完成です。デザイナー右上の `Preview` ボタンをクリックしてプレビューします。

プレビュー後、`Save` ボタンをクリックしてページを保存します。その後、アプリ右上のアクセスボタンをクリックすると、先ほど構築したデモページを開くことができます。

## まとめ

以上でクイックスタートのデモは完了です。[Hello Example](https://www.aliwork.com/o/demo/hello) にアクセスして、実際の動作をご確認ください。本例では、YiDA カスタムページの基本的な作業フローを紹介しました。より高度なチュートリアルについては、[TodoMVC チュートリアル](/ja/open/yida/tutorial/todoMVC)を参照してください。