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を使って何かしたい...！🍜🎵