Skip to main content

データベースからレコードをクエリする

このガイドで学べること

このガイドでは、Query Recordsノードを使用してデータベースからレコードを取得する強力なデータベースクエリを作成する方法を学びます。また、RepeaterノードとRecordノードを組み合わせて、クエリの結果を視覚化する方法も学びます。

概要

このガイドでは、以下のステップを踏みます。

  • シンプルなクエリを作成する
  • Repeaterノードを使用して結果をリストアイテムとして表示する
  • データプロパティを視覚ノードに接続する

クラウドバックエンドの設定、クラスレコードの作成に既に慣れていることがこのガイドを最大限に活用するための条件です。以下のガイドを通じて、これらをすぐに学ぶことができます:

"クエリ"とは何か?

データベースの世界では、クエリは条件に基づいて特定のサブセットのレコードをデータベースに要求する方法です。Noodlの場合、一つ以上の条件を満たすクラス内のすべてのレコードに対してクラウドサービスに要求します。言葉で表すクエリの例は、「isDoneプロパティがfalseであるクラスTask内のすべてのレコードを与えてください」となります。

クエリの作成

まず、アクティブなバックエンドを持つプロジェクトを開始し、一つ以上のクラスにいくつかのデータが利用可能であることを確認してください。前述のクラウドデータガイドに従って、task(タスクの説明)とisDone(タスクが完了した場合はtrue、そうでない場合はfalseのブール値)というプロパティを持ついくつかのアイテムを持つクラスTaskを使用します。

空のプロジェクトから始めます。たとえば、「Hello World」テンプレートを使用してテキストノードを削除することができます。メイングループの子としてRepeaterノードを追加します。後でクエリの結果を視覚化するためにRepeaterを使用する必要があります。

次に、Query Recordsノードを作成します。

まず、このQuery Recordsノードが適用されるべきクラスを選択する必要があります。ノードをクリックしてクラスドロップダウンからクラスを選択します。このドロップダウンには、作成したすべてのクラスが表示されるはずです。何らかの理由で表示されない場合は、プロジェクトを正しいクラウドサービスに接続していない可能性があります。

今のところ、他の設定はそのままにしておきます。条件(Noodlでは"フィルタ"と呼ばれます)を追加しないので、このクエリはTaskクラス内のすべてのレコードを返します。実際には、クラスに多数のアイテムが含まれている場合にネットワークを溢れさせないように、Noodlにはクエリに対してデフォルトで100レコードの制限があります。Use Limitチェックボックスをチェックすることで制限を変更できますが、今は触れません。

クエリから返されるものを最初に見るために、結果を保存するためのArrayノードを作成します。次に、Query RecordsノードのItemsArrayItems入力に接続します。2つのノード間の接続上でマウスをホバーすると、クエリの結果のデバッグ情報をすぐに確認できるはずです。

Noodlは、入力シグナルDoが接続されていない限り

Query Recordsが作成されるとすぐに自動的に実行されます。クエリとクエリの結果はネットワークを介して送信されるため、クエリを実行する正確なタイミングを制御することが重要な場合があります。そのような場合、クエリが実行されるタイミングを制御するためにDoシグナルを接続することが重要です。しかし、このシンプルな例ではそれについて心配する必要はないので、接続しないままで問題ありません。

Repeaterノードを使用してクエリ結果を視覚化する

結果を視覚化するために、もう少しNoodlingが必要です。各レコードを表すシンプルなリストアイテムを作成する必要があります。

コンポーネントの下にある"+"アイコンをクリックし、「視覚コンポーネント」を選択して新しい視覚コンポーネントを作成します。新しいコンポーネントに適切な名前を付けます。私たちのアイテムは1つのタスクを表すので、「Task Item」と呼びます。

視覚コンポーネントに、既存のグループノードの下に2つのノード、CheckboxTextノードを追加します。CheckboxisDoneプロパティを表し、Textノードはタスクの説明を保持します。また、グループレイアウト水平方向に設定し、パディングとマージンを追加してレイアウトを整理します。Checkboxのラベルも削除されました。(以下の画像のボタンを使用してノードをコピーし、プロジェクトに貼り付けることもできます。)

見た目は今は重要ではありませんし、異なる種類のデータを扱う場合はリストアイテムが少し異なるかもしれません。

次に、メインアプリに戻ってRepeaterノードのテンプレートを、新しく作成したTask Itemを使用するように設定します。

最後に、以前作成したArrayノードを削除し、クエリ結果を直接Repeaterノードにフィードします。Query RecordsノードのItemsRepeaterItems入力に接続します。

接続が完了すると、リストに多くのアイテムが含まれていることがわかります。実際には、クラスに含まれているアイテムの数だけ含まれているはずです。

Repeaterノードは、レコードごとにリストアイテムのインスタンスを1つ作成しました。

唯一の問題は、アイテムがレコードの内容を表示していないことです。これを修正するには、Repeaterノードがレコードの配列とどのように扱うかを理解する必要があります。

Repeaterとレコード

アイテムに正しいデータを表示させるには、正しいデータを持つレコードを取得する必要があります。これを行うには、Recordノードを使用します。以前に作成したリストアイテムにRecordノードを追加します。ノードをクリックして、そのクラスが表示したいクラスを指していることを確認します。このガイドでは、Taskクラスを指すように設定します。

![](/docs/guides/cloud-data/quering-records-from-database/record-1.png

)

今、レコードIdが重要になります - それをリストアイテムが表すレコードに対応するIdに設定する必要があります。明らかに、各リストアイテムに対して異なるIdが必要になります。幸いにも、Repeaterノードがこれを解決します。それは正しいIdを正しいリストアイテムに割り当てます。以下の画像を参照してください。

私たちがする必要があるのは、Recordノードに正しい場所からそのIdを取得するように指示することだけです。再びRecordノードをクリックし、Id SourceFrom repeaterに変更します。

これで、Repeaterにマウスをホバーすると、リストアイテムの1つにデータが入っていることがわかります。

レコードプロパティの接続

最後に、レコードのデータ - そのプロパティ - をTextノードとCheckboxに接続しましょう。

これで、アプリでレコードを見ることができるはずです。