More than 1 year has passed since last update.

Noodl内でデータと配列を扱う

Noodl

Last updated at 2023-08-01Posted at 2020-08-14

概要

記事を書いたときからしばらく時間が経ち、その間にNoodlのバージョンが順調に上がっています。
Noodlは当時よりも本格的な開発環境になってきています。
そこで、2023年2月最新版のNoodl(2.8.1)に対応した内容に見直しを行いました。
特に変化が大きいのがCloud、Data関連の機能です。Dataは役割毎に様々な型が定義され。Cloudはデータ管理を行うだけでなくロジック・関数も扱えるようになりました。
言い換えるとNoodlでフロントエンド開発だけでなく、バックエンドの開発も行えるようになっています。

Noodl2.8の公式ドキュメントを元に、データを扱うためのノードについて役割と使い方を説明します。
最後には簡単なタスクリスト・システムを作成しながら理解を深めます。

Noodl公式のDownloadリンク。インストールについてはConnpassで詳しく紹介されています。

1. データ・配列を扱うノードと役割

Noodlでデータを扱うため様々なノードが用意されています。種類が増えているので
ここではデータ・配列の種類と操作について分類をしてみます。

データに関連するノード

データ・配列の種類

データとその配列ですが、主にフロントエンド用とバックエンド用がそれぞれ用意されています。　　

データの性質で「可読」とはデータがブラウザ側に保存されるためデータの内容がユーザ側から確認することができるという意味。逆に「秘密」とはデータをサーバ側に保存して置き、必要な時にConfigノードを使って読みだすことでデータの内容をユーザ側に秘密にできるという意味です。
具体的にはバックエンドを使うことでWebAPIのAPIキーなどをサーバ側に保存し、APIキーをユーザに知られることなくWebAPIを利用することが可能になります。

区分	フロントエンド	バックエンド
実行環境	ブラウザ	サーバ(Noodl/外部)
データの性質	一時的・可読	永続・秘密
静データ	Static Array	Config, RES
変数	Variable	Config, REST
オブジェクト	Object	Record, RES
配列	Array	Collection, REST

データ・配列の操作(CRUDによる分類）

データの操作方法をデータ種類別に整理します

Cloud配列はCloud Service側ではClassと表現されます。同じタイプのレコードのコレクションです。他のデータベースではこれらはTablesやCollectionと呼ばれます。
Cloud配列を生成するにはCloud ServiceのダッシュボードでCreate a Classを行います。削除もダッシュボード上でEdit>Delete this Class行います。

区分	Create	Read	Update	Delete
変数	-	Variable	SetVariable	-
オブジェクト	Create	Object	Set Object Properties	-
配列	CreateNewArray	Array/ArrayFilter	InsertObjectIntoArray/RemoveObjectFromArray	ClearArray
CloudData	CreateNew Record	Record	SetRecordPrpperties	DeleteRecord
Cloud配列(Class)	(CerateClass)	QueryRecords	(SetRecordPrpperties)	(DeleteClass)

Cloud Serviceを使う

ReocrdやQueryRecordsはプロジェクトに対してアクティブなCloudServiceがある必要があります。
QueryRecordsでCloudServiceからRecordsを取得し、FilterReocrdsで必要な部分だけにするイメージ

データ・配列の操作2(CRUDによる分類）

データの操作方法をUserやRelationなど特殊なデータ種類別に整理します

区分	Create	Read	Update	Delete
REST(外部接続)	PUT/POST	GET	PATCH	DELETE
User(ユーザ)	SignUp	User	SetUserProperties/LogIn/LogOut	-
Relation(レコード間の関係)	AddRecordRelation	-	-	RemoveRecordReletion
CloudFile(ファイル)	-	CloudFile	UploadFile

2 データ・配列の利用

2-1. 静的データを扱うStaticArray

StaticArrayノードは表のような静的データ配列を表します。
定義はCSV形式、JSON形式でノードに直接定義します。データ配列はitemsとして出力して利用でき、各データへのアクセスはForEachノードを利用します。

JSONでの定義例

[
    {
        "Text": "Noodlの勉強",
        "Completed": "false",
        "id": "ID001"
    },
    {
        "Text": "Javascriptの勉強",
        "Completed": "false",
        "id": "ID002"
    },
    {
        "Text": "Reactの勉強",
        "Completed": "truee",
        "id": "ID003"
    }
]

CSVでの定義例

Text,Completed,id
Noodlの勉強,false,ID001
Javascriptの勉強,false,ID002
Reactの勉強,true,ID003

2-2. データと配列を格納するObjectとArray、永続的なデータと配列のRecordとRecords(Class)

ブラウザ内で一時的に使うデータはObectやObjectの配列Arrayを使います。セッション内だけしか有効ではなため、ページが更新されると元の値に戻ってしまいます。
それに対してブラウザを閉じても保持されるような永続的なデータを扱いたい場合。他のユーザとデータを共有したい場合。
外部のCloudやDB、CMSとリアルタイムに同期するためのノードとして新しくRecord(Cloudデータ)とRecords(Class)(Cloud配列)を使います。
さらに、RecordはCloude Serviceのダッシュボード一元的に管理できるようになりました

Records(Class)の設定方法
左側のNoodlメニューでCloud ServicesからRecords(Class)を定義します。
Cloud Servicesは1つのプロダクトで複数作成することができるため、本番用途のCloud Dataと、プロトタイプ用途のCloud Dataを作成することができます。Cloud Servicesマネージャを使い途中で切替えることもできます。

繰返しデータを表示するRepeater

Repeaterは繰返しデータ(配列)を表示するためのノードです。
RepeaterのPropatiesには繰返し表示したいComponentを設定します。
すると、データ配列を順次渡しながらComponentを繰返し表示します。
例えばRepeaterに3つのデータが配列として入力されると、設定されたComponentが3個繰返し表示されるイメージです。

QueryRecordノードを使うときの注意点

プロジェクトがDatabaseを使用してCloud Serviceに接続されました。データベースの概要を把握する最善の方法は、ダッシュボードを開くことです。クラウドサービスのボタンをクリックして開きます。Open dashboard

データベースの内容は、左側のメニューの下に表示されますBrowser。現在、データベースには2 つのクラスが含まれています。これら 2 つのクラスは自動的に作成されます。これらのクラスは、アプリでログインと資格情報を管理するために使用されますが、このガイドでは気にしません。UserRole

クラスの場合、各レコードにはユーザー名、電子メールなどのデータプロパティがあるユーザーレコードが含まれます。典型的なアプリにはさまざまなクラスがありますが、このガイドでは新しいクラスを作成しませんUser。

Collectionにデータを反映するにはFetchを事前に実行する必要があります。
例えば上記例では
Group：Did Mount(Groupがマウントされた時)をトリガーとして、Collection:Fetchを実行しています。
もしFetchを一度も実行しないとCollectionには何も含まれません。

繰返し表示されるComponent側の設定

繰返される側のComponentの中で対象で値にアクセスする方は2通りあります。

ArrayはRepaaterノードにItemsを接続することで、リスト表示することができる
ForEachItemノードを使ってForEachから渡されるModel Idを取得し、対象のModelに直接アクセスする方法
ComponentInputでPortを設定し、ForEachから値を受け取る方法

タスクリスト・システムを作成する１：フロンドエンド版

では最後に、具体的な事例を通じてデータを扱うノードの役割を理解していきましょう。
公式ページのサンプルプロジェクトのタスクリスト・システムを使って説明します。

今回作成するタスクリスト・システムは次のような機能を持ちます。

登録しているタスクのリスト表示と、完了/未完了状態の表示・切替機能
新規のタスク追加機能
タスクの修正/削除機能

デモサイトはこちらになります。
プロジェクトファイルはGitHubにあるこちらとなります。

1. まずはタスクを表すObjectとArrayを作成します

プロジェクトをインポートした時にはPartsフォルダとScreensフォルダ内にコンポーネントが保存されています。

2. まずは必要な部品をコンポーネントとして作成します

プロジェクトをインポートした時にはPartsフォルダとScreensフォルダ内にコンポーネントが保存されています。それぞれ説明します。

Partsフォルダ内のコンポーネント

Button :ボタンを表すコンポーネント
Add Button :タスクリストにある追加ボタンコンポーネント
Header :タスク名を表すヘッダーコンポーネント
Check Mark :完了/未完了を表すチェックマークコンポーネント
Task Item :タスクリストに表示されるタスクコンポーネント

コンポーネントとノードの接続は下記のようになります。コンポーネント設定はプロジェクトファイルから確認してください。

ポイントはTask ItemコンポーネントでのコンポーネントはForEachノードから繰返し呼ばれそれぞれのタスクを表すことになります。
内部ではForEachItemノードからItemIDを取得して、ModelのIdに入力しています。これによりModelを対象のタスクとして操作できるようになります。SaveボタンのClick信号をModel：Saveに入力し、チェックマークの状態を保存しています。
また、Component Inputsを使ってタスク名称をTextに表示し。Component Outputsを使ってタスクがクリックされたことを外部に出力しています。クリックされたタスクに対してタスク編集画面を表示するためです。

3. 画面を作成する

Screensフォルダにある画面コンポーネントについて説明します

Tasks　Screen :タスクの表示
New Task Screen :タスクの新規追加
Edit Task Screen :タスクの編集/削除

まずはタスク表示のTasks Screen。ForEachノードによって、Collection内のタスクを繰返し表示します。また、タスク追加ボタンのClickをトリガーにしてタスク新規追加画面に遷移します。

次にタスクを新規追加するNew Task Screen

最後にタスクを編集/削除するEdit Task Screen

以上で、簡単なタスクリスト・システムを作成することができました。

タスクリスト・システムを作成する２：Cloud Server版

では次に公式ページのサンプルプロジェクトのタスクリスト・システムをCloudServer対応させていきます。