NoodlのComponent Inputs / Outputsについてメモ

[Noodl Advent Calendar](https://qiita.com/advent-calendar/2019/noodl) 15日目🍜
[7日目の記事](https://qiita.com/pentake/items/90bd6728db26a05e1065)ではComponentについて深掘りました。
今回は、Componentの入力と出力を担うノードである「Component Inputs」と「Component Outputs」に焦点を当てた記事になります。

## 入力と出力について
まずは、そもそもの入力と出力について確認してみます。
入力と出力の間には何かしらの処理があります。Noodlでは、Nodeにデータ（値）を入力すると処理が行われ、データ（結果）が出力されます。同様に、Componentも入力と出力を持つことができます。
<img width="700" alt="スクリーンショット 2019-12-15 17.11.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/6d214eb7-4630-d63c-b52a-404d2b5f53db.png">
ほとんどのNodeには入力と出力があります。対して、Componentにはデータの入力と出力が必ず存在する訳ではありません。下図のような４パターンが存在します。
<img width="700" alt="スクリーンショット 2019-12-15 18.03.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/b012163f-172d-6912-1c96-a99d55f2caac.png">
Noodlでは、**Port（ポート）**と呼ばれる入口と出口の役割を担うものがあります。Component InputsノードもComponent OutputsノードもPortを持っています。**Component InputsにとってPortはデータの入口であり、Component OutputsにとってPortはデータの出口です。**

Portは、２つ、３つ、４つ...と、増やすことができます！
これが、Component Input / Output（単数形）ではなく、Component Inputs / Outputs（複数形）という名前の理由だと思います。
<img width="700" alt="スクリーンショット 2019-12-15 18.50.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/871cd8e4-d882-5d40-cae7-90258a41b496.png">

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

#### １. 入力も出力もできないコンポーネント
下図のButtonは、入力も出力もできないコンポーネントです。ただし、他のコンポーネント（ここではMainコンポーネント）上ではVisual nodeとして機能します。
<img width="700" alt="スクリーンショット 2019-12-15 18.17.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/8a3ecbc8-4f1a-c47a-1dbc-b788df0514b9.png">
Buttonノードを選択してみても、プロパティ欄には何も表示されません（ ＝ Inputが存在しないということです）
<img width="500" alt="スクリーンショット 2019-12-15 18.33.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/1d94c5ac-6ff0-32bd-fa3a-6c833de018e5.png">
Buttonノードを他のノードと繋げようとしても、SourceのButton欄には何も表示されません（ ＝ Outputが存在しないということです）
<img width="700" alt="スクリーンショット 2019-12-15 19.17.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/48015ab5-41ed-eaaf-b5e9-d40115cbf937.png">


#### ２. 入力だけできるコンポーネント
下図のButtonは、入力だけできるコンポーネントです。１の状態にComponent Inputsノードを加えました。
<img width="700" alt="スクリーンショット 2019-12-15 18.29.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/23f1d5c6-0b42-08d7-7d6b-475f9e97db40.png">
Portを１つ作り、Portの名前をtextとしました。下図のようにButtonノードを選択すると、プロパティ欄にtext入力の項目が増えていることが分かります（ ＝ Inputが存在しています）
<img width="500" alt="スクリーンショット 2019-12-15 18.41.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/441bc725-db41-88bd-73c9-11feb40392ca.png">

#### ３. 出力だけできるコンポーネント
下図のButtonは、出力だけできるコンポーネントです。１の状態にComponent Outputsノードを加えました。
<img width="700" alt="スクリーンショット 2019-12-15 19.07.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/c978365f-f0ae-9410-9528-0abe2b3638b4.png">
Portを１つ作り、Portの名前をtapとしました。下図のようにButtonノードを他のノードと繋げようとすると、SourceのButton欄にtapの項目が増えていることが分かります（ ＝ Outputが存在しています）
<img width="700" alt="スクリーンショット 2019-12-15 19.16.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/f0ae146a-e9e1-38b1-a839-b24291a941b0.png">

#### ４. 入力と出力ができるコンポーネント
下図のButtonは、入力と出力ができるコンポーネントです。１の状態にComponent InputsノードとComponent Outputsノードを加えました。上記の２と３で作成したComponent Inputs（Port１つ、Port名はtext）とComponent Outputs（Port１つ、Port名はtap）を使っています。
<img width="929" alt="スクリーンショット 2019-12-15 19.30.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/cd8650ae-9d12-2fdf-d084-e0ee86424afd.png">

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

下図のように、Buttonコンポーネント上にComponent InputsノードとComponent Outputsノードを作成しただけでは入力も出力もできません。
<img width="616" alt="スクリーンショット 2019-12-15 19.53.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/5e2390f8-28dc-cf4d-cd8c-38431919a6c6.png">
#### 入力と出力が機能するために必要なこと３ヶ条
**・Component Inputsノード　または　Component Outputsノード を作成する
・Portを作成する
・Buttonコンポーネント内の他のノードと繋げる**

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

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