Noodl Advent Calendar 15日目🍜
7日目の記事ではComponentについて深掘りました。
今回は、Componentの入力と出力を担うノードである「Component Inputs」と「Component Outputs」に焦点を当てた記事になります。

入力と出力について

まずは、そもそもの入力と出力について確認してみます。
入力と出力の間には何かしらの処理があります。Noodlでは、Nodeにデータ（値）を入力すると処理が行われ、データ（結果）が出力されます。同様に、Componentも入力と出力を持つことができます。

ほとんどのNodeには入力と出力があります。対して、Componentにはデータの入力と出力が必ず存在する訳ではありません。下図のような４パターンが存在します。

Noodlでは、**Port（ポート）**と呼ばれる入口と出口の役割を担うものがあります。Component InputsノードもComponent OutputsノードもPortを持っています。Component InputsにとってPortはデータの入口であり、Component OutputsにとってPortはデータの出口です。

Portは、２つ、３つ、４つ...と、増やすことができます！
これが、Component Input / Output（単数形）ではなく、Component Inputs / Outputs（複数形）という名前の理由だと思います。

Componet Inputs / Outputsとは

ここからは、作成したものを元にComponet Inputs / Outputsについて整理してみます。

１. 入力も出力もできないコンポーネント

下図のButtonは、入力も出力もできないコンポーネントです。ただし、他のコンポーネント（ここではMainコンポーネント）上ではVisual nodeとして機能します。

Buttonノードを選択してみても、プロパティ欄には何も表示されません（＝ Inputが存在しないということです）

Buttonノードを他のノードと繋げようとしても、SourceのButton欄には何も表示されません（＝ Outputが存在しないということです）

２. 入力だけできるコンポーネント

下図のButtonは、入力だけできるコンポーネントです。１の状態にComponent Inputsノードを加えました。

Portを１つ作り、Portの名前をtextとしました。下図のようにButtonノードを選択すると、プロパティ欄にtext入力の項目が増えていることが分かります（＝ Inputが存在しています）

３. 出力だけできるコンポーネント

下図のButtonは、出力だけできるコンポーネントです。１の状態にComponent Outputsノードを加えました。

Portを１つ作り、Portの名前をtapとしました。下図のようにButtonノードを他のノードと繋げようとすると、SourceのButton欄にtapの項目が増えていることが分かります（＝ Outputが存在しています）

４. 入力と出力ができるコンポーネント

下図のButtonは、入力と出力ができるコンポーネントです。１の状態にComponent InputsノードとComponent Outputsノードを加えました。上記の２と３で作成したComponent Inputs（Port１つ、Port名はtext）とComponent Outputs（Port１つ、Port名はtap）を使っています。

注意点

Component InputsノードとComponent Outputsノードは、作成したコンポーネント上の他のノード繋げない限り、入力も出力もできません！！！

下図のように、Buttonコンポーネント上にComponent InputsノードとComponent Outputsノードを作成しただけでは入力も出力もできません。

入力と出力が機能するために必要なこと３ヶ条

・Component Inputsノード　または　Component Outputsノードを作成する
・Portを作成する
・Buttonコンポーネント内の他のノードと繋げる

以上の３ステップを踏めば、Buttonコンポーネントを他のノードと繋げることができ、入力と出力ができるようになります！

おわりに

当初の予定では、「Noodlと音楽API」だったのですが今回もネタ変更となりました...
音楽好きとしてはNoodlを使って何かしたい...！🍜🎵