Trending Visual Programming in 2018

最近のビジュアルプログラミングの動向について社内のチーム向けに共有しました。今回はその内容を少し補足して記事にしました。

ざっとスライドの要点をまとめると

ビジュアルプログラミングとは
定義は主に以下の2点です。
・プログラムをテキスト指定するのではなく、グラフィカルな要素で操作してプログラムを作成するもの。
・矩形や円を画面上のオブジェクトとし、それらを矢印や線や弧でつなぐものや、ブロック状のもので構成するもの。

ビジュアルプログラミングの用途

→Wikipediaに載っているビジュアルプログラミングと最近のトレンドなものを含む37種類のビジュアルプログラムの特徴を調べたら上記の3つにカテゴライズできると思いました。(37種全ての特徴は割愛します)
上記の中で、ビジュアルプログラミングについて馴染みのない方もはScratchという単語は聞いたことはないでしょうか?
最近では子供向けのプログラミング教育のツールとしてScratchを採用されるケースが多いみたいです。

GUIのカテゴライズ

→調査したビジュアルプログラム(上記37種)のGUIは調査したところ大きく分けて2つとその他に分けられるかと思いました。

・矩形と矢印をつなぐ形式のUI

・スクラッチ風のUI

・上記２つ以外の独自UI

今回この記事ではテキストベースのプログラミングとビジュアルプログラミングの比較をしてみたいと思います。

テキストベースのプログラミングとビジュアルプログラミングの比較

簡単なアプリを作成してソースコードとビジュアルプログラムの違いを比較してみたいと思います。
比較するのはSwiftで書かれたiOSのアプリとTouchDesignerです。
(iOSもGUIで補完してくれてますが、あくまでも参考例です)

・Swiftで書かれたiOSのアプリ(テキストベースのプログラミング)

・TouchDesigner(ビジュアルプログラミング)

作成するアプリについて
・画像を表示
・GUIで操作をして画像を切り替え

プログラムの処理フローについて
A : 画像を取得
B : 画像を設定
C : GUIで切り替え

上記を比較して示すと以下のようになります。

こうして比べて見るといかがでしょうか?
TouchDesignerでのAとBの処理は見た目で分かりやすいのではないでしょうか?Swiftの方はファイル名を指定するだけなのでコード部分を見てもどんな画像を設定されてるかは見た目では判断ができないかと思います。
(もちろんiOSはAssetsを見に行けばわかりますが。)
見た目で処理が直感的に分かりやすいのもビジュアルプログラミングの特徴かと思います。また、置いて繋げるだけなのでテキストベースのコードを書くよりも手早く作成することができます。

まとめ
プログラミングにちょっと興味あるけどテキストベースのコードはなんか難しそうという方はまずは教育向けのビジュアルプログラミングに触れてチャレンジしてみるのはいかがでしょうか。自分でプログラミングして作成して動くものが見れると面白いと思います。

また、ビジュアルプログラミングとテキストベースのプログラミングはそれぞれメリット、デメリット、作成できるものも違うので一概にどちらが良いというものはないかと考えています。

#ios #touchdesigner #programming   #visualprogramming #note #プログラミング