VL の概念と用語解説

# VL の概念
VL には vvvv には無い概念がいろいろあります。
VL を実際に触る前に、まずは概念の理解をすると理解が捗ります。
vvvv ユーザは他の言語を知らない方も多いと思うので、出来るだけ易しく解説しています。
とはいえ、説明が分かりにくく他の言語で慣れていないとピンと来ないものもあると思います。
後々サンプルと一緒に見ていったりする事で理解できると思うので、後々出てきた時に拒絶反応を起こさずに、どこかで聞いた事はあるなとなってもらえればと。

前回：[「ビジュアルプログラミング言語 VL とは」](https://qiita.com/yhy_jp/items/cc0265c8a76c461c0ea3)

# 全体像
下の図がわかりやすいです。
> <img width="470" alt="VL_Component_Hierarchy.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/a21ae867-6006-0c5c-4c3c-28953503b178.png">
> 引用元：The Gray Book > Project Structure
> https://gitbook.com/book/vvvv/the-gray-book/details

- **VLドキュメント(VL Document)**
    - VLプロジェクトのルートになるものです。
    - 複数のパッチを含める事ができます。
    - Alt+P で今開いているパッチのドキュメントパッチを開くことができます。
- **依存関係(Dependencies)**
    - VL ドキュメントは他のVLドキュメントやDLLを使用でき、それに「依存している」といいます。
- **パッチ(Patch)**
    - 次に詳しく書いていきます。
- **.vlimport**

# 基本
- **データフロー(Data Flow)**
    - 文脈で少し変わりますが、言葉を聞いた時にデータが流れているイメージを思い浮かべればよいです。
    - vvvv や VL ではデータの流れを中心に考えます。
- **ノード(Node)**
    - 一個一個の箱。同vvvv
- **リンク(Link)**
    - ノードをつなぐ線。同vvvv
- **スプレッド(Spread)**
    - vvvv におけるのデータの基本概念で、データの配列的な感じのものです。
    - vvvv の世界ではデータを暗黙的に Spread に変換する仕組みなどが動いています。
    - VL ではあくまで（少し優遇された）型の一つでしかないです。
- **ノードブラウザ(NodeBrowser)**
    - 左ダブルクリックすると出てくるやつ
- **データハブ/ピン(Data Hub/Pin)**
    - リンクのつながる場所
    - vvvv でいうピンです。VL でもピンとも呼びます。
- **データソース(Data Source)**
    - データの入口
- **データシンク(Data Sink)**
    - データの出口
- **型/型定義(Type/Type Definition)**
    - 「かた」「かたていぎ」と読みます。普通にタイプとも言います。
    - 複数のデータをまとめ、それに対する操作などを持ちます。
    - 他の言語でいう、型やクラスの事です。
    - 全てのデータは型を持ちます。
    - 例えば、この文字列はStringという型です、とか、この数値はValue型です、とか言います。
    - 例えば、vvvv で AsString(Value)や AsString(Raw) などがありますが、それぞれ元になるデータの型が Value か Raw かなどで使い分けます。
    - 言語にあらかじめ存在する型もありますが、自分で型を定義することもできます。
    - 例えば、パーティクルを作ろうとした時に、Particleという型を作り、位置や色情報を持ち、位置の更新などの操作を持つ「型」を定義すれば使いやすく分かりやすくなる、みたいな。
- **インスタンス（Instance）**
    - ある型の具体的なデータの事です。日本語で「実体」などとも言います。
    - 型はそのデータの構造で、具体的なデータではありません。
    - 上の例でいう「Particle という型」はあくまで、位置や色情報や更新の操作が定義されていているものを指し、「Particle という型のインスタンス」というと実際にどの位置にいて、この色だ、みたいなデータを持てます。
- **プロパティ(Property)**
    - そのインスタンスの持っている値などの情報の事です。
    - 「メンバ変数」「フィールド」などとも言います。厳密にいうと少し意味合いが違いますが、VLにおいて話を聞いたりドキュメントを読む際には厳密な使い分けは意識しなくて大丈夫です。
    - VL では「パッド（後述）」という物がプロパティにアクセスするための物なので、文脈によりパッド＝プロパティとして話す事もありそうです。
- **フィールド(Field)**
    - 文脈によって二つ意味があります。
    - 1) プロパティの事
    - 2) パッチを作っていく領域の事
- **ステートレス(Stateless)**
    - 状態を持たない事を意味します。状態とは上述のプロパティなどを指します。
    - 「ステートレスなノード」というと、状態を持たず、入力に対して出力が常に同じなノードという意味合いです。
    - 例えば「＋」や「AsString」ノードなどは、出力が入力にしか依存していません。
- **ステートフル(Stateful)**
    - 状態を持つ事を意味します
    - 「ステートフルなノード」というと、状態を持ち、その状態によって入力が同じでも出力が異なります。
    - 例えば「S+H」「TogEdge」「Damper」ノードなどは、前回までの入力によってノード内の状態が変わる事によって、同じ入力だとしても状態によって出力が状態によって変わります。
    - ステートレスが必要ないのではと思うかもしれませんが、状態を持たないという性質にも利点があり、簡単に言うとバグが入りにくかったり、テストがしやすかったり、動作が理解しやすかったりします。
    - ステートフルな場合、この状態の時だけ起きる不具合、みたいなのがあり得ます。
- **イミュータブル(Immutable)**
    - 単語としては「不変」いう意味です。
    - イミュータブルな型などと使います。
    - 例えば C# の String という型はイミュータブルです。
    - 何がイミュータブル（不変）なのかというと、例えば"ABC"という string 型のインスタンスXがあったとして、この最後の文字を'C'から'D'に変更したい場合、直接Xを編集することができません。どうするかというとXの最後の文字を'D'に置き換えた新しいインスタンスを作る必要があります。
    - ちなみに、データフローというパラダイムにマッチしたり、並行実行の利点もあるので vl はデータは基本的に immutable です。数値も文字列も色も。

- **ミュータブル(Mutable)**
    - 単語としては「可変」という意味です。
    - ミュータブルな型などと言います。
    - 例えば c++ の string という型はミュータブルです。
    - 上の例と同じく、"ABC"という string 型のインスタンスXがあったとして、X[2]='D'とする事ができます。
- **メンバー(Member)**
    - VL において、メンバーとは他の言語でいうメンバ関数を指します。
    - このパッチに対しての操作、例えばCreateやUpdateなどがメンバーになります。
    - 自分でメンバーを作ることもできます。
    - 一つのパッチに複数のメンバーを定義でき、ある部分がこのメンバーの実行時に動くのかを設定でき、「このノード/パッド/インプットを、このメンバに割り当てる(アサイン/Assignする)」などと表現します。
    - アサインする事でメンバの動きが定義されます。
    - **メンバーオペレーション(Member Operation)** とも呼びます。
- **ジェネリクス/ジェネリック(Generics/Generic)**
    - 型を限定しない操作などを定義できます。
    - ジェネリックなノードなどと言う時、受け取る型を限定せず汎用的に使えるノードという意味です。
    - 例えば「＋」というジェネリックなノードがあったとして、String+StringとInt+Intなどが一つの定義でどちらも実行可能になります。
    - ジェネリクスというと、そういう事をサポートする機能の総称を指します。
    - 「VLはジェネリクスをサポートしているので、ジェネリックなノードを作れる」みたいに言います。
- **非同期(Async/Asynchronous)**
    - 反対語は同期(Sync/Synchronous)です。
    - ある処理AとBがあったとして、「Aが完了した後にBを実行する」というのを同期実行といい、「Aが完了する前にBも実行する」というのを非同期と言います。
    - マルチスレッドで処理を行う、みたいなイメージです。
    - 例えば vvvv で FileTexture でファイル読み込みをした時に、「Load In Background=0」だと読み込み完了まで少し止まったりします。これは同期的にファイルを読み込んでいるからです。一方「Load In Background=1」を１にすると裏側で読み込みをしてくれます。これは「非同期にファイルを読み込んでる」といいます。
    - タイミングを合わせる、みたいな意味でも同期という言葉を使います。
    - VLでは非同期な処理をかけます
- **ステップ実行(Stepping Execution)**
    - VL ではデバッグのためにステップ実行が可能です。
    - ステップ実行は１フレームずつ実行し結果を確認できます。
- **世界(World)**
    - 「vvvv の世界」「VL の世界」などと使います。スラングですがよく使われます。
    - vvvv 界隈以外でも「CPUの世界」と「GPUの世界」みたいな感じで言ったりします。
    - vvvv と VL はそれぞれの環境とか制約とかが別物で、それをふわっと丸っと指す感じの意味になります。
    - VL のデータを vvvv の世界に持ってくるとか、VL の型を vvvv の世界で使えるようにする、みたいに言います。
    - 非同期で動いているリージョンなどは、「async の世界」とかも言ったりします。
- **リアクティブ(Reactive)**
    - リアクティブプログラミングというパラダイムを指す
    - VL だと Observable とかが絡むものとか
    - 非同期なデータストリーミングを扱えたり、イベントにより何か起きるなどする奴
    - (Reactive)とかついているノードはこれ向けのノード
- **抽象/抽象化(Abstract/Abstraction)**
    - Sequence と Spread を抽象化したものとして Sequence があるとか
    - 実際の処理を持たないものを抽象クラスと言ったりします
    - ソフトウェア開発においてとても大事な概念なのですが、一般的な意味での抽象化の意味だと思って、雰囲気さえ掴んでもらえればそんなに困らないのではと思います。

# パッチ

### パッチの種類
- **ドキュメントパッチ**
    - = VL ドキュメント
- **データタイプパッチ**
    - Process/Record/Class の総称
- **ドキュメントの構造を作るためのパッチ**
    - **グループ(Group)**
        - 単純に人間が読みやすいようにまとめれるだけ。
        - ノードブラウザでの見え方などは変わらない
    - **カテゴリ(Category)**
        - 親パッチに紐づく、カテゴリの階層を作れる
        - ノードブラウザにもそう表示される
        - 見え方的に頭に「.」がつく
    - **フルカテゴリ(FullCategory)**
        - Categoryみたいなものだが、
        - 親パッチに紐づかない
        - 見え方的に頭に「：」がつく

### リージョン(Region)
VL における新しい概念です。
リージョンにはいくつか種類があります。

- IFリージョン
- ForEachリージョン
- Repeatリージョン
- Delegateリージョン
- Operationリージョン
- Whereリージョン
- AsyncLoop/Taskリージョン
- などなど

リージョンによって vvvv では出来なかったループや非同期処理などが可能になります。
大事な所なのでリージョンを解説する動画やドキュメントを作っていきますが、とりあえず雰囲気を載せます。
例えば、下の図は「IFリージョン」です。
<img width="243" alt="if_region.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/cf4673eb-91e4-715f-3947-65d7d7fa0e71.png">
IFリージョンはCondition(True/False)を取り、Condition=Trueの時のみ内部が実行されます。
上の例ではCondition=Trueの時に100が、Condition=Falseの時に200を返しています。

下の図は「ForEachリージョン」です。
<img width="184" alt="foreach_region.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/2c89c547-bb3a-dff5-1fec-45a76f4882dd.png">
Spreadを受け取り、各要素に対して操作を行い、その結果をSpreadとして返します。
上の例では入力を２倍しています。

**リージョン関係の用語**

- **スプライサ(Splicer)**
    - <img width="16" alt="スクリーンショット 2019-03-29 19.29.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/59912/c6cee0fd-7198-d1b0-2dd4-3e6f5f4ecf0e.png"> ForEachリージョンなどの台形のつなぐ場所
    - スプライサにつないだものを一つづつ取得したり、最終的に配列として出力される。
- **アキュミュレータ(Accumulator)**
    - <img width="15" alt="スクリーンショット 2019-03-29 19.33.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/59912/6df8c218-7180-363e-063c-09c2519ad2e0.png"> ForEachリージョンなどのダイア型のつなぐ場所
    - ループの各ステップを通して足して行ったりできるもの。配列ではなく一つの値。
- **特殊ピン**
    - リージョン内で使える特殊なピンが存在する
    - **Keepピン**
        - リージョンでこれが False だとその結果は Splicer に追加されない
        - Accumulator には影響を与えない
    - **Breakピン**
        - これが True だとループを中断し途中で抜ける
    - **Indexピン**
        - 何回めのループかが入っている

### パッド(Pad)
パッドとは、プロパティにアクセス（読み書き）するためのものです。
例えば以下の図での「Color」という丸いものがパッドです。
<img width="197" alt="Pad.png" src="https://qiita-image-store.s3.amazonaws.com/0/59912/590e34d1-b233-defe-8075-ef1383894fd9.png">

前提として、赤い部分はCreateメンバ(上述)にアサイン(上述)されていて、青い部分はUpdateメンバにアサインされています。
で、この図の意味は、
Create時には Color プロパティにランダムな値（１つの実数値）を設定する（赤い部分）。パッドをデータシンクとして扱えば、その名前のプロパティに値が設定されます。
Update時には Color プロパティを取得して色として返す。パッドをデータソースとして扱えば、その名前のプロパティの値が取得できます。

また、これを簡潔に書くと下の図のようになります。
<img width="111" alt="pad2.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/2e2c8d36-8e3b-99a3-0b8a-0ea8c6f93439.png">
上二つの画像で行っている事は完全に同じです。

### オペレーション(Operation)
オペレーションという際には、基本的にはこの **静的オペレーション(Static Operation)** というものを指します。
ステートレスな操作を行うノードを作れます。
例）
<img width="256" alt="Operation.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/99c7ca5c-6552-4688-f12d-a8860ffd1fd9.png">
左側で「Adder」というオペレーションを定義して、右側では「Adder」をノードとして使用しています。
vvvv 側からも使用可能です（ノードブラウザに出てきます）。
オペレーションの中でステートフルな操作（例えばPadを置くとか、S+Hノードなどのステートフルなノードを置くとか）をしようとするとエラーが出ます。

ドキュメントパッチorグループパッチで定義でき、デフォルトで Generic です。


### プロセス(Process)
ステートフルな操作を行うノードです。
MyS+Hという「S+H」ノード的な動きをするノードを作ってみます。
<img width="301" alt="MySHDef.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/457a5f4a-59c5-dcf1-beee-34c9e9516124.png">
Create時には、DefaultValueをvalueプロパティに設定しています。
Update時には、set が ON であれば value プロパティに input を設定、set が OFF であれば value プロパティはそのままにしています。(Switch を使っていますが、もちろん前述のIFリージョンでも書くことができます。）
このようなプロセスを定義すると、以下の図のように使えます。
<img width="105" alt="MySHusage.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/280c2cd4-1a8b-f303-e6af-3cfc0eaa6971.png">


### レコード(Record)
immutable な型を作れます。
例えば、ColorGeneratorというRecordを定義します。
<img width="330" alt="Record_Def.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/f12eea03-cac6-683f-8d74-fa8e0a0645c3.png">
これはHueというプロパティを持ち、最初にランダムで初期化、その値をGetColorで色として取得、GetHueではHueの値だけ取得できます。
これは下のように使用できます。
<img width="321" alt="Record.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/a1062fe1-8f4e-51b5-b704-f0347c98de56.png">
そして、ここでCreateしたinstanceはイミュータブルです。

### クラス(Class)
mutable な型を作れます。
上のColorGeneratorというクラスを定義します。
<img width="332" alt="ClassDef.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/10492518-857c-5ae0-fdca-c5b1ae7b8f69.png">
左上の「Record」が「Class」になっただけです。
<img width="310" alt="ClassUsage.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/644e1a0a-8381-bfd5-8bc0-c0af33753128.png">
これを使用してみると、少し見た目が変わります。点線はイミュータブルなデータだということを示しています。
レコードのインスタンスはあるフレームにおいて instance をどこかで編集しようとも、instance のパッドから出てくるものは同じデータであることが保証されます。
一方、クラスのインスタンスは編集される可能性があります。
レコードはCreateなどでは値を取得でき、クラスはCreateなどでは参照を取得できる。と考えるといいのかなと思います。
基本的にレコードを使った方が予期せぬバグは減らせます。が、パフォーマンス的には無駄にコピーなどが発生しないので状況によってクラスを使うといいです。

### Createメンバ
Create というメンバを使用してレコードやクラスを生成します。

### デリゲート(Delegate)
デリゲートは処理を定義し、Invokeというノードで動的に呼び出せます。
例えば、下の左はInvokeで渡された値に１０を足して返し、右は１０をかけて返します。
<img width="330" alt="Delegate.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/e1b36654-e8e0-57ca-3905-ff2c8412d423.png">
デリゲートの利点として、デリゲートの処理内容に全く依存せず、「N個入力を取って、M個出力を出す何か」という一段階抽象的な形で扱えます。
下の図を見てください。
<img width="332" alt="Delegate2.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/3929af35-9890-87a6-3853-abaa3e78d3e5.png">
Switchでデリゲートを切り替えて、Invoke で呼び出しています。
ConditionがONの時には１００（１０＊１０）が、OFFの時には（１０＋１０）が出力されます。
Invoke は入力が１個で出力が１個のデリゲートであれば同じものとして扱えるし、デリゲートはプロパティで持つ事などもできるので、何か起きた時に処理を切り替える、などの処理がとても自然にかけます。
よく使いそうな例としては、レコードなどにデリゲートをプロパティとして持たせ、外からそのデリゲートを切り替えることで、レコード内を一切修正せずにレコードの挙動が変更出来ます。

### インタフェース(Interface)
レコードやクラスに共通の振る舞いをさせたい場合に使用します。
例えば、下のような InterfaceA を定義します。
<img width="210" alt="interfaceA.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/95a182ea-3398-28a9-0c3c-2213457b8a57.png">
メンバーには GetValue というメンバを定義しました。
次に、InterfaceA をインタフェースとして持つ、RecordA と RecordB を定義します。
<img width="202" alt="recorda.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/a707a233-cf2b-e301-1e4e-772fdc4b8017.png">
<img width="213" alt="recordb.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/4c0c7c68-3f84-da24-fd10-50ffa5a19bbd.png">
どちらも Interfaces に InterfaceA があり、GetValue というメンバを定義しています。
RecordA の GetValue は 22 を返し、RecordB の GetValue は 47 を返します。
これをどのように使うかというと、下の図のように使えます。
<img width="163" alt="InterfaceUsage.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/59912/e0e5b670-a987-d041-0193-0d99fd86ace3.png">
GetValue ノードはどちらも InterfaceA の GetValue ノードですが、実際の挙動はそれぞれ RecordA/B で定義した挙動になっています。
InterfaceA の GetValue ノードは InterfaceA を実装しているものであれば区別せずに呼び出すことができます。

### フォワード(Forward)
依存関係の時に解説します。

# データ構造
- **コレクション**
    - SpreadとかListとかSetとかDictionaryとか、データのまとまりを表すものの総称
- **Spread**
    - データを取れるし、何個あるかわかるし、何が入っているか知っているコレクション
    - イミュータブル型
- **SpreadBuilder**
    - Spreadを作るのに便利なもの
    - Spread はイミュータブルなので、ループで一つ一つ追加とかするとコピーコストがかかる。そういう時には SpreadBuilder を使うと良い。
    - ローカルで使う（ノードを行き来しない）のをおすすめしている
- **HashSet**
    - 数学的な意味での集合、Set、セット。
    - HashSet 内には同じ値は一つしか存在しない
    - 内部的に木構造なので、ある要素がそこに含まれるかどうかを判定するのが、計算量レベルで速い
    - 一方、データの追加にも少しコストがかかる。
- **Sequence**
    - ForEachリージョンなどははsequenceを受け取ります
    - 一つ一つみていけるコレクションの抽象です
    - ノードを作るとき、入力がSequenceでよければそうした方が良い
- **List**
    - Repeatリージョンはリストを受け取ります
    - Listはカウントを持つコレクションの抽象です
- Spread/SpreadBuilder/HashSet は Sequence であり List です

- **Int(イント/Integer)**
    - 整数値のこと
    - 例）1, 10, 30
- **Float(フロート/Floating Point Number)**
    - 浮動小数点数、簡単に言うと実数値のこと
    - 例）0.123, 12.567
- **Bool(ブール/Bloolean)**
    - 真偽値
    - True(真) / False(偽) のどちらかを取る
    - Toggle とか Bang の出力
    - VL において True = 1 で False = 0 です。