Noodlの基本概念（Node・Component・Project）についてメモ

[Noodl Advent Calendar](https://qiita.com/advent-calendar/2019/noodl) 6日目🍜
ここへ来て、基本へ立ち返ります（基本が一番大事...！）
Noodlの基本"操作"ではなく、基本"概念"なので実践的な話はありません。
Noodlで知っておくべき概念をイメージとして捉えるための記事だと思っていただけると幸いです。

## 結論書いちゃいます。
Projectとは、Componentの集まりのこと。
Componentとは、Nodeの集まりのこと。
Nodeとは、Noodlにおける機能の最小単位。

「あ〜そういうことか。」と思った方、以上になります！
読んでいただきありがとうございました！
~~圧倒的早さ...！Qiita記事読み終えるまでの時間を競う大会あったら確実に入賞はしt(ry~~

もっと詳しく知りたいという方は続きを読んでくださいm(_ _)m
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

## Noodlで登場する３つの概念
Noodlには最低限理解しておくべき概念が３つあります。

**・Node（ノード）
・Component（コンポーネント）
・Project（プロジェクト）**

Noodlを初めて触った時、僕はこの３つの違いがよく分かりませんでした...
特にNodeとComponentの違い。

「最近Noodlを触り始めました！」という方への一助となれば嬉しいです。

では行きましょう！

## Node（ノード）とは
#### 英和辞典で調べてみる
>結び(目)、こぶ、ふくれ、(劇などの)筋のもつれ、紛糾、(組織などの)中心点、節(せつ)、結節、交点、結節点
（Weblio 英和辞典より引用）

「何かと何かが交差する場所、そして、それらをつなぎ合わせている場所」というコアイメージを持っている単語であることが分かります。

#### 英英辞典で調べてみる
>MATHEMATICS, COMPUTING
a place where things such as lines or systems join:
（Cambridge Dictionaryより引用）

「（数学・コンピューティング分野において）線やシステムのようなものが繋がる場所」とあります。

これがコアイメージ↓
![qiita_node1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/8606eac5-f533-710d-acd9-2b228c27b9e2.jpeg)

コンピューティング分野だと、コアイメージが転じてこんな感じ（これがNoodlで扱うNodeです）↓
![qiita_node2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/0e13f924-12f2-b4a8-ab77-0b219c639929.jpeg)

確かにどちらも繋がっている場所ですね！

**Nodeは何かしらの機能を持っています！（重要！！！）**

Noodlにはあらかじめ様々な機能を持ったNodeが入っており、それらをつなぎ合わせることで全体を構築していきます。
例）
・color（色）
・number（数字）
・group（領域確保・グループ化）
・rectangle（四角形）
・circle（円）
・states（状態管理）　etc...

なんとなくどんな役割なのかが掴めたでしょうか...？
英単語のイメージがなんとなく頭の中にできれば良いんです、うん。

## Component（コンポーネント）とは
#### 英和辞典で調べてみる
>構成要素、成分、(機械・ステレオなどの)構成部分 
（Weblio 英和辞典より引用）

「何かを構成するための要素」というコアイメージを持っている単語であることが分かります。

#### 英英辞典で調べてみる
>a part that combines with other parts to form something bigger:
（Cambridge Dictionaryより引用）

「何か大きいものを形作るため、他の部分と結合する部分」とあります。

**Noodlでは、Nodeの集まりをComponent**と呼びます↓
![qiita_component1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/0be7dc0d-5321-e2ff-1c16-16c63f383666.jpeg)

**...？**

**Nodeがいっぱいあって...　この全体がComponent...？**
**でも、Nodeたちの方がむしろ構成要素(Component)じゃね...？**

Noodlを初めて触ったときの僕はそう思いました。
理解するためのイメージとしては腑に落ちません...

では、自分なりに理解した流れを説明します。

まず、Component(ノードの集まり)を１つ作ります↓
![qiita_component2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/85e3d07a-61a2-a6d7-211e-b0d86aacf356.jpeg)

Componentはコピー＆ペーストできます↓
![qiita_component3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/4f9626cf-2836-9587-2a23-edab2c2f26cf.jpeg)

自分で作ったComponentは、他のComponentに利用できます↓
![qiita_component4.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/87f9c5d4-560d-d1bf-2506-17d136c2f03f.jpeg)

全てのComponentを利用したComponentを作ることができます↓
![qiita_component5.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/7a541ca4-6a67-8f5a-175e-5c27eb299138.jpeg)


Componentは、「何かを構成するための要素」というコアイメージを持っている単語であると書きました。
**NoodlにおけるComponentとは、「全体を構成する１つの要素」であると言えます（重要！！！）**

そして**"全体も１つの構成要素"**なんです！（なんだか深い...！！）

**Noodl世界はComponentとその中身（Node）でできているのです。**

そんな感じでイメージできましたでしょうか...（汗）

## Project（プロジェクト）とは
**さっき、全体と呼んでいたもの(Componentの集まり)をProjectと呼びます。**
以上でございます。
![qiita_project1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/a22f43ab-73a8-5096-d7d0-43b5607a89b4.jpeg)

## まとめ
繰り返しになりますが、復習で！

Project：
Componentの集まりのこと。

Component：
Nodeの集まりのこと。

Node：
Noodlにおける機能の最小単位。



## 🍜 Noodl Advent Calender 2019 🍜
１日目も僕が書いているので、ご興味があればぜひ読んでみてくださいm(_ _)m
Noodlでできることがなんとなく分かるかと思います。

・１日目
　[NoodlでNode-RED on IBM Cloudの翻訳APIを使ってみた](https://qiita.com/pentake/items/2761981998816769669a)

・２日目
　[オンライン2.5Hハンズオン アーカイブ！ ](https://www.youtube.com/watch?v=DzvFNN8OehM&feature=youtu.be)

・３日目
　[11/21にelvさんに参加させていただいた「NoodlーNodeRED」ハンズオンの即日レビュー記事を書きました。 ](https://shimajima-eiji.github.io/resume/lecture/noodl_offline)

・４日目
　[昨日のカレンダーで書いた直前日に参加したオンラインハンズオンのレビューです。 ](https://shimajima-eiji.github.io/resume/lecture/noodl_online)

・５日目
　[Noodlで外部サービスとの連携方法～MQTT～](https://qiita.com/kmaepu/items/1808f63ebeb55642c345)

明日以降の記事も楽しみですね！