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

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

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

[Noodl公式](https://www.noodl.net/post/noodl-2-8-juanfen-introducing-cloud-functions)のDownloadリンク。インストールについてはConnpassで[詳しく紹介](https://noodl-tokyo.connpass.com/event/191012/)されています。
![fig200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/619d8232-5323-ed2a-871d-6e7d88d79ee6.png)

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

### データに関連するノード
![fig100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/852e9724-6fd5-68e2-253c-d252b3beeec9.png)

### データ・配列の種類
データとその配列ですが、主にフロントエンド用とバックエンド用がそれぞれ用意されています。　　
- データの性質で「可読」とはデータがブラウザ側に保存されるためデータの内容がユーザ側から確認することができるという意味。逆に「秘密」とはデータをサーバ側に保存して置き、必要な時に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`ノードを利用します。

```javascript:JSONでの定義例
[
    {
        "Text": "Noodlの勉強",
        "Completed": "false",
        "id": "ID001"
    },
    {
        "Text": "Javascriptの勉強",
        "Completed": "false",
        "id": "ID002"
    },
    {
        "Text": "Reactの勉強",
        "Completed": "truee",
        "id": "ID003"
    }
]
```

```javascript: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のダッシュボード一元的に管理できるようになりました

![fig201.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/faf28954-4692-380b-3f0a-73983d46db98.png)
![fig202.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/f5ae2532-313f-5fa1-f715-dca0edd9c9e0.png)![fig203.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/0b3a6c77-db51-1ca0-dc3a-98ca407fe502.png)


**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個繰返し表示されるイメージです。
![fig206.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/8d72675a-32a2-c4be-b56f-e9317ce5185a.png)![fig207.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/8fbaebca-1040-8129-6cd5-6b9c5a28aaa9.png)![fig208.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/3c63613a-5ba0-c10f-cf58-0f4db3afbed0.png)
![fig209.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/3fd46811-2257-3b81-fd47-c0c0d3d171e7.png)



### 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`から値を受け取る方法

![img0006_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/4882d070-5c6a-2b65-dfa4-4021c7d98cd2.png)

----
## タスクリスト・システムを作成する１：フロンドエンド版
では最後に、具体的な事例を通じてデータを扱うノードの役割を理解していきましょう。
[公式ページのサンプルプロジェクト](http://docs.noodl.net/#/guides/models-and-collections)のタスクリスト・システムを使って説明します。

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

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

デモサイトは[こちら](https://macole.github.io/Noodl2_ForEach/index.html)になります。
プロジェクトファイルはGitHubにある[こちら](https://github.com/macole/macole.github.io/tree/master/Noodl2_ForEach)となります。

![img0000_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/685de008-5f72-4923-b7d1-a8494a6f9201.png)

### 1. まずはタスクを表すObjectとArrayを作成します
プロジェクトをインポートした時にはPartsフォルダとScreensフォルダ内にコンポーネントが保存されています。

### 2. まずは必要な部品をコンポーネントとして作成します
プロジェクトをインポートした時にはPartsフォルダとScreensフォルダ内にコンポーネントが保存されています。それぞれ説明します。

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

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

コンポーネントとノードの接続は下記のようになります。コンポーネント設定はプロジェクトファイルから確認してください。
![img0001_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/0fdd7177-f142-fcaa-07eb-c596c0a09955.png)

![img0002_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/fbf73b9b-e540-d1a3-d0ab-5b405c5820a0.png)

ポイントは`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をトリガーにしてタスク新規追加画面に遷移します。
![img0003_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/1adc8b52-3270-1341-99d3-bea7ab790a0e.png)

次にタスクを新規追加する`New Task Screen`
![img0004_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/e5ff89e3-2d01-d8fa-8a95-e0717997df4e.png)

最後にタスクを編集/削除する`Edit Task Screen`
![img0005_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/c4ece760-0c33-b5bd-942f-3734c2499543.png)

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

----
## タスクリスト・システムを作成する２：Cloud Server版
では次に[公式ページのサンプルプロジェクト](http://docs.noodl.net/#/guides/models-and-collections)のタスクリスト・システムをCloudServer対応させていきます。

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

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

デモサイトは[こちら](https://macole.github.io/Noodl2_ForEach/index.html)になります。
プロジェクトファイルはGitHubにある[こちら](https://github.com/macole/macole.github.io/tree/master/Noodl2_ForEach)となります。

![img0000_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/685de008-5f72-4923-b7d1-a8494a6f9201.png)

### 1. まずはタスクを表すObjectとArrayを作成します
プロジェクトをインポートした時にはPartsフォルダとScreensフォルダ内にコンポーネントが保存されています。

### 2. まずは必要な部品をコンポーネントとして作成します
プロジェクトをインポートした時にはPartsフォルダとScreensフォルダ内にコンポーネントが保存されています。それぞれ説明します。

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

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

コンポーネントとノードの接続は下記のようになります。コンポーネント設定はプロジェクトファイルから確認してください。
![img0001_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/0fdd7177-f142-fcaa-07eb-c596c0a09955.png)

![img0002_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/fbf73b9b-e540-d1a3-d0ab-5b405c5820a0.png)

ポイントは`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をトリガーにしてタスク新規追加画面に遷移します。
![img0003_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/1adc8b52-3270-1341-99d3-bea7ab790a0e.png)

次にタスクを新規追加する`New Task Screen`
![img0004_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/e5ff89e3-2d01-d8fa-8a95-e0717997df4e.png)

最後にタスクを編集/削除する`Edit Task Screen`
![img0005_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/c4ece760-0c33-b5bd-942f-3734c2499543.png)

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



## まとめ
最新版のNoodl2.8で新しくなったデータ・データ配列について整理しました。
Noodl2.1の頃から用語が変わっていたり、使用するNodeが増えたりして最初は混乱あるかもしれませんが。
本格的な開発ツールとしてフロントエンドもバックエンドもカバーしていくには必須の内容なので、
一度頭の中を整理しておくといいことがあると思います。
それでは楽しいNoodlライフを！