Noodlでデータを扱う Part1  CSVとJSONの静的データ

Noodlはデータ連携もとても得意です！
何回かに分けて、躓きやすいModel/Collectionノードの解説などもしていきたいと思います

Part1: CSVとJSONの静的データ
Part2: ModelとCollection ノード基本
Part3: 外部ストレージと連携 アカウントいらずの簡単DB 「API Based JSON Storage」を使ってみる
Part4: Model/Collection 応用
（全部書ききれるか怪しいけど頑張ります）

コチラのイベントで使ったサンプルコードの細かい解説も兼ねています。
https://enebular.connpass.com/event/148970/

#サンプルファイル
[サンプルファイルはここからダウンロードできます！](https://github.com/mizuki-kisa/noodl-data-sample)
datasample01をexternal projectとして読み込んでください。

# 今回使うノード
- Model
- For Each
- Static Data
- For Each item

[日本語リファレンスはコチラ](https://noodl-jp.tds-g.biz/doc/reference/)

##Modelとはなにか
データのモデルと聞いてピンとこないな・・・という方はプロフィール帳をイメージするとわかりやすい！
Modelは、一人分のプロフィールです。
![アートボード 1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/baa859f1-fd7f-4cdc-b94c-418a6e26dfe8.jpeg)

どういうことなのか、カボチャくんを使って図説していきたいと思います。

<img width="211" alt="スクリーンショット 2019-10-26 13.11.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/926510b5-224b-e879-236c-5a2c9a3c86c3.png">

このカボチャくんを「かぼ太郎A」として、下記の属性を与えたいと思います。

かぼ太郎Aのプロフィール
ID: `kabo1`
名前: `かぼ太郎A`
色: `#FF7345`

直接指定もできますが、今回は説明のためにModelノードを使います。
<img width="1527" alt="スクリーンショット 2019-10-26 14.45.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/4dd7e05e-cf57-c8db-b4a1-e53037133336.png">
1. Propaties に`color`と`name`を追加。
2. 図のようにStringノードとColorノードを追加しつなぐ。
2. Stringノードに`kabo1`と入力
3. もう一つのStringノードに`かぼ太郎A`を入力
4. Colorノードに`#FF7345`を入力
5. プレビュー画面をタップ **※Modelノードは入力のあとにStoreして初めて保存されます！**

これで、純白の素かぼちゃに色と名前を着けることができました。

<img width="1552" alt="スクリーンショット 2019-10-26 14.47.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/20a40ac3-8472-502e-6e6d-ca5d4672b696.png">
さらに、Modelノードはidを入力すればそのプロパティを呼び出すことができます。
図: 別のModelノードからかぼ太郎Aの名前と色を呼び出しているサンプル

###かぼ太郎Bを増やす！
今度はかぼ太郎Bを増やしてみます。

かぼ太郎Bのプロフィール
ID: `kabo2`
名前: `かぼ太郎B`
色: `#2E873A`

<img width="1552" alt="スクリーンショット 2019-10-26 15.02.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/737d0d0e-de2b-d4f8-4f86-96d2e7992e5a.png">

先程はTapをトリガーにデータ保存をしていましたが、Booleanにチェックを入れてつなぐことでロード時にModelノードがStoreしてくれるようになります。

**でもこれ面倒くさくない・・・？**

カボチャが100個に増えた時、ノードが煩雑になってしまう......
プロフィールの枚数分、それぞれの属性を持ったカボチャを並べたい......

そんな時使うのがStatic DataノードとFor Each、For Each Itemノードです！

##Static Dataノードとは
静的データを扱うノードです。CSV,JSONが使えます。
[CSVとJSONについて](https://code-ship-blog.wemotion.co.jp/technology/%E3%80%90%E4%BD%95%E3%81%8C%E9%81%95%E3%81%86%EF%BC%9F%E3%80%91%E3%83%87%E3%83%BC%E3%82%BF%E5%BD%A2%E5%BC%8Fcsv-xml-json%E3%81%AE%E7%89%B9%E5%BE%B4%E3%82%92%E7%9F%A5%E3%82%8D%E3%81%86/)

こんな風にNoodl内にCSVやJSONデータを書くことができます。
<img width="790" alt="スクリーンショット 2019-10-26 15.47.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/57eef04c-9f10-d5a2-6b55-e763c2f62661.png">


```JSON:Noodlのstaticデータノード
[
    {
        "color": "#ff6347",
        "id": "S001",
        "name": "かぼちゃA"
    },
    {
        "color": "#ff4500",
        "id": "S002",
        "name": "かぼちゃB"
    },
    {
        "color": "#ffd700",
        "id": "S003",
        "name": "かぼちゃC"
    },
    {
        "color": "#ff4500",
        "id": "S004",
        "name": "かぼちゃD"
    },
    {
        "color": "#2e8b57",
        "id": "S005",
        "name": "かぼちゃE"
    }
]

```

{}一個分が、一人分のかぼ太郎のプロフィール = Model1つ分 = item です。
Static Data内のitemに、idが含まれていると、Noodl内でModelノードから呼び出しできるようになります。

同じことをCSVで書くと
<img width="830" alt="スクリーンショット 2019-10-26 15.51.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/2484e028-5916-9e9f-4657-edc58e14d8a6.png">

```CSV:Noodlのstaticデータノード
color,id,name
#ff6347,C001,かぼちゃA
#ff4500,C002,かぼちゃB
#ffd700,C003,かぼちゃC
#ff4500,C004,かぼちゃD
#2e8b57,C005,かぼちゃE

```
1行が一人分のかぼ太郎のプロフィール。

図のようにつなぎ、For EachノードのComponentでカボチャくんミニを選択すると...
<img width="1552" alt="スクリーンショット 2019-10-26 15.32.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/07496d72-09d9-a081-a9dc-f7d8be0c3cb2.png">

カボチャのプロフィールの数（5個）、カボチャが複製されました！
(画面からはみ出て3個しか見えていませんが…)

##For Each Itemノードでカボチャごとにそれぞれのプロフィールを適用しよう

カボチャくんミニコンポーネントの中身を編集します。
Component inputｓではなく、For Each Item とModelノードを図のようにつなぎます。
<img width="1527" alt="スクリーンショット 2019-10-26 15.39.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/b2c339ad-0f49-a848-a0d5-3b0aeadc39c0.png">

For Each Itemは、各item（=Model）のIDを持っています。
それぞれの「カボチャくんミニ」が自分のidから色と名前を呼び出しています。

というわけで、Noodlで静的データを扱うことができました！