LoginSignup
6
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-05

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

結論書いちゃいます。

Projectとは、Componentの集まりのこと。
Componentとは、Nodeの集まりのこと。
Nodeとは、Noodlにおける機能の最小単位。

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

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

Noodlで登場する3つの概念

Noodlには最低限理解しておくべき概念が3つあります。

・Node(ノード)
・Component(コンポーネント)
・Project(プロジェクト)

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

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

では行きましょう!

Node(ノード)とは

英和辞典で調べてみる

結び(目)、こぶ、ふくれ、(劇などの)筋のもつれ、紛糾、(組織などの)中心点、節(せつ)、結節、交点、結節点
(Weblio 英和辞典より引用)

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

英英辞典で調べてみる

MATHEMATICS, COMPUTING
a place where things such as lines or systems join:
(Cambridge Dictionaryより引用)

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

これがコアイメージ↓
qiita_node1.jpeg

コンピューティング分野だと、コアイメージが転じてこんな感じ(これがNoodlで扱うNodeです)↓
qiita_node2.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

...?

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

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

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

まず、Component(ノードの集まり)を1つ作ります↓
qiita_component2.jpeg

Componentはコピー&ペーストできます↓
qiita_component3.jpeg

自分で作ったComponentは、他のComponentに利用できます↓
qiita_component4.jpeg

全てのComponentを利用したComponentを作ることができます↓
qiita_component5.jpeg

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

そして"全体も1つの構成要素"なんです!(なんだか深い...!!)

Noodl世界はComponentとその中身(Node)でできているのです。

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

Project(プロジェクト)とは

さっき、全体と呼んでいたもの(Componentの集まり)をProjectと呼びます。
以上でございます。
qiita_project1.jpeg

まとめ

繰り返しになりますが、復習で!

Project:
Componentの集まりのこと。

Component:
Nodeの集まりのこと。

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

🍜 Noodl Advent Calender 2019 🍜

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

・1日目
 NoodlでNode-RED on IBM Cloudの翻訳APIを使ってみた

・2日目
 オンライン2.5Hハンズオン アーカイブ!

・3日目
 11/21にelvさんに参加させていただいた「NoodlーNodeRED」ハンズオンの即日レビュー記事を書きました。

・4日目
 昨日のカレンダーで書いた直前日に参加したオンラインハンズオンのレビューです。

・5日目
 Noodlで外部サービスとの連携方法~MQTT~

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

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2