Noodl Advent Calendar 7日目🍜
6日目に引き続き、Noodlの基本について書こうと思います。
今回は、Component（コンポーネント）にグッと焦点を当てた記事になります。

Component（コンポーネント）とは何か？

Noodl Advent Calendar 6日目の記事でも触れましたが、コンポーネントは以下の特徴を持ちます。

・Nodeの集まり
・全体を構成する１つの要素

この記事ではもう少し具体的なお話をします。Noodlでは新規プロジェクトを作成すると、Mainという名前のコンポーネントがあらかじめ用意されています。（下図の真ん中参照）

▼ Mainコンポーネントの初期構成
・Groupノード　　　（名前：Root）
・Rectangleノード　（名前：Background）
・Textノード　　　　（名前：Hello World）

初期構成の３つのノードに加えてButtonという名前のノードがありますが、これは僕が作ったものです。上図右側は、Buttonという名前のコンポーネントで、Groupノード、Circleノード、Textノードで構成されています。

ここで、なんだか違和感を覚えませんか...？
今、僕は**「Buttonという名前のノード」と「Buttonという名前のコンポーネント」**と書きました。名前が同じなのに、ノードと呼ばれたり、コンポーネントと呼ばれたりしている...

そう！

あるコンポーネントは、他のコンポーネントの中でノードのように振る舞うことができます！（重要！！！）
ここでは、ButtonコンポーネントがMainコンポーネントの中でノードのように振る舞っています。つまり、ButtonコンポーネントはMainコンポーネント中で**「部品(ノード)」**として使うことができるんです。

この説明で違和感がなくなったのではないでしょうか。
（まだよく分からん...という方はぜひコメントください）

最後に、コンポーネント化するメリットを挙げて終わろうと思います。

▼ コンポーネント化するメリット
・表示されるノードが少なくなるため、プロジェクト全体の構造を把握しやすくなる
・構造が把握できると、プロジェクトを構築する時に混乱しない
・部品として扱うため、簡単に再利用できるようになる

以上がコンポーネントの基礎知識になります。
読んでいただきありがとうございました！

おわりに

元々、Noodl Advent Calendar に書いておいたタイトルが Component Inputs / Outputs / Children についてだったのですが、全て書くと１つの記事あたりのボリュームがめちゃくちゃ多くなってしまうので今回はComponentの具体的な基礎知識に留めました。~~（書く時間がなかったとは言えない...）~~

近いうちに Component Inputs / Outputs / Childrenについて記事を書けたらと思いますm(_ _)m
（それぞれ、別々の記事にしようかな...）