構文エラーがあってもテキスト言語（p5.js）とブロック言語を変換可能にした
はじめに
この記事はProcessing Advent Calendar 2018 - Qiitaの11日目の記事となります。
2016年以来2年ぶりのProcessing Advent Calendarへの参加で、最後に過去記事も載せますので宜しければそちらもご覧ください。
※ 今回の記事は以前紹介したシステムの新機能についてなので、上記記事を先に読むと良いかもしれません。
本編
今年のProcessing Advent Calendarにこのような記事や
このような記事
がありましたが、私もProcessingでプログラミングの楽しさを知った一人です。そんな人が一人でも多く増えたら良いなと考え、プログラミング初心者向けとしては主流（？）のブロック型言語とp5.js（JavaScript）を組み合わせたプログラミング環境を作っています。今回はそのプログラミング環境に、ブロック言語の一つの「弱点」を解消しようと実装した機能を紹介したいと思います。
上の動画を見ると、入力した文や式が途中だったり、不完全であってもブロックに変換できているのが分かると思います。今までは文が完全な状態でなければ変換されなかったのですが、入力途中でも変換できるようになったため、テキストからブロックへの変換の即時性が増し、よりブロックとテキストの対応付けが分かりやすくなったのではなと考えています。
以下のような不完全なプログラムでもそれに対応した「穴あき」ブロックを作ることができます。テキストからわざわざ穴あきブロックを作ることはないですが、ブロックでプログラミングをする際はこの穴あきブロックがよく発生します。今までは穴あきブロックがあると構文エラーを起こしテキストからブロックへの変換ができなくなっていたのですが、この機能によってブロックの方でプログラムを作りかけでもテキストとの変換が常に保たれるようになりました。
if文やfor文などでは、（）や｛｝、条件式などがなくても変換出来るようになっています。もし文法を忘れてもそこはブロック言語の良い所を利用して、ブロックの断片を生成できればあとはブロックの組み立てでプログラミングをすることができます。ブロックで組んだとしても右のテキストエディタにはブロックが出力した正しいコードが載っているのでそこで構文を確認できます。構文があやふやなプログラミング学習の初期段階にはもってこいなのではないでしょうか。
今回は短いテキストをリアルタイムにブロックに変換する例だけを見せましたが、以下のような穴あきブロックだらけのプログラムであっても、テキストエディタの方に変更を加えたらブロックへの変換が行われます。ブロックを組んでいる最中にある一部分だけはテキストで組みたいと思ったときは、たとえプログラムを組みかけでもテキストエディタに打ち込めばそれがブロックに変換されます。
利点、出来るようになった事まとめ
ブロックでプログラミングをしようと思ったとき、複雑なものになるといちいちドラッグアンドドロップで作るのは非常に面倒くさく、テキストで書きたくなるときがあります。しかし、ブロックで組んでいるとどうしても穴あきブロックが現れてテキストからブロックへの変換が出来ない場面がありました。それを今回の機能では解決することができます。
また、構文を忘れてしまったとき大量のブロックから該当するブロックを探すのではなく、断片的でもそのブロックの「キーワード」になるようなものさえわかっていれば具体的な構文があやふやでもそのブロックを取ってくることができるようになり、ブロックが出力するテキストのコードから正しい構文も学ぶことができます。
これでまた一歩ブロックとテキストが近づきました。
おわりに
Advent Calendarでは毎年みなさんのオシャレでセンスの塊のようなProcessing作品に出会えるので、毎年この時期を非常に楽しみにしています。私はProcessingでプログラミングをするのが大好きなのですが、皆さんのようなオシャレな作品は到底作れないので参加するのに若干ためらいがありました。しかし、大好きなProcessing業界を少しでも自分も盛り上げたいと思い、ほかのみなさんとは違った角度からにはなってしまいましたが、今年はこの記事を投稿しようと思いました。
昨年は、AtomのAdvent Calendarに浮気してしまいましたが、今年はProcessingで盛り上がる25日間の1日を担当できて良かったです。過去記事もあるのでよろしければご覧ください。
2015年
2016年
2017年（Atom）
プログラミング教育に新風を巻き起こ(したい)すシステム公開！
はじめに
子どもやプログラミング初学者向けのプログラミング学習支援システムを作っています。
初めてプログラミング学習をする人には、ビジュアルプログラミング言語を用いて視覚的にプログラムを組めるようにするのがとっつきやすく学習を始めやすいと思いますが、主流なプログラミング言語はほとんどテキストで記述する形式ですからいずれはVPLから脱しないといけません。
そこで、ビジュアルプログラミング言語とテキスト記述形式の言語の間でリアルタイムに変換できるシステムを現在作成しており、メインとなる機能が実装できたのでα版として公開したいと思いました。以下が全体像となんとなくの使い方です。
今回の記事では技術的なところには触れず、今回作成しているシステムの特徴について書いていきます。
特徴
テキスト/ブロック間のリアルタイム変換
ブロックからテキストへの変換は数多くあります。Blocklyでもデフォルトで備わっている機能です。しかし、テキストからブロックへの変換はあまり例がありません。特に、リアルタイムに変換を行えるようにしているものは私が知る限りありませんでした。
私が今回作成しているシステムではブロックからテキストはもちろん、その逆のテキストからブロックへのリアルタイム変換も可能にしています。
同一システム内、同一画面内にテキストとブロックの両表現を取り入れ、その間を連携させることによりプログラミングを初めて学ぶ人はブロックから学習を始め、テキストでの書き方を学び、徐々にテキストでのプログラミング学習へ移行することができます。また、ブロックでのプログラミングの仕方はすでに知っている人でも、慣れたブロックからテキストへの学習移行ができます。
ブロックエディタでテキスト記述が利用可能
ブロックでプログラミングをしているときに一番わずらわしいのは、一々ほしいブロックを探し出し、エディタにもってきて、今あるブロックと接続しなければいけないことだと考えています。例えば、(1+2*3)/4という計算をプログラムで書きたい場合、タイピングしてしまえばあっという間です。しかし、これをブロックで記述しようと思ったらとても大変です。数字を記述するためのブロックを4つと演算子ブロックを３つ持ってきて、それぞれ数字ブロックなら1や2や3や4をタイピングし、演算子ブロックなら+,*,/を選択しなければいけません。最後にその７つのブロックを組み合わせなければならずとても気の遠くなるような作業です。
そこで、このような明らかにテキストで記述できるものはテキストで記述してしまおうということでブロックエディタ上でもテキスト記述ができるようにしました。
これはブロック表現とテキスト表現間の中間表現に位置すると考えていて、いきなり全部をテキストで記述するのではなく、まずは一文からテキストにチャレンジするようなイメージです。
JavaScriptのほぼすべての文法に対応
JavaScriptのほとんどの文法が使えるようになっており、ブロックへ変換できるようになっています。ArrowFunctionやLiteralの正規表現など、自分があまり普段使わない文法は実装していないのですが、これから実装する予定です。これほど多くのJavaScriptの文法に対応しているVPLもないのではと思っています。
どれくらい対応しているのかイメージする例として、テキストからブロックへの変換するソースコードを1,000行強書いたのですが、それが全てブロックに変換できるレベルです。(もちろん、変換されたブロックがどんな複雑なことになっているかについては触れません……；；)
ライブプログラミング
初学者にとっても大事なのはフィードバックの速さだと思っています。自分がプログラムに与えた変更が実行結果にどう影響を与えるのかをすぐにわかった方が良いと考えています。そこで、このシステムではライブプログラミング、つまりソースコードに変更あるとプログラムを再実行する機能、を取り入れています。
特にこのライブプログラミングは、p5js(Processing)のようなグラフィックを操作するプログラムと相性が良いため採用しています。
ライブプログラミングがあると教える側としても、プログラムを変更しながらそのまま実行結果に与える影響を教えられるため、実行ボタンを押して実行画面が出てその様子を確認してなどのタイムラグがなくなり教えやすいのではと考えています。
(ある程度の)エラーに対応(実装中……)
こちらは鋭意開発中なのですが、ソースコード中に構文エラーがあってもある程度ブロックに変換できるようにしています。システムの裏側の話になってしまうのですが、ソースコード中に構文エラーがあるとブロックには普通は変換できないのですが、ブロックとともに開発しているとこのような構文エラーは多く起こる可能性があります。
例えば、矩形を描画するブロックrectをブロックエディタ上に持ってきたとしましょう。そうするとテキストエディタ上にはrect( , , , );が挿入されることになります。この一文のせいでほかの正常なソースコードもブロックに変換されなくなってしまいます。こうならないように、裏で色々ごまかしながら構文エラーがあってもある程度に動くようにしています。現在、これに手を付けたばかりで実装はまだ進んでいないのですが、これからもっと深く扱っていく予定です。
注意
まだまだブラッシュアップできていない部分が多々あるので「うまくいく」ように使ってあげないといけません……
setup()やdraw()の書き方
p5jsの多くのサンプルは
function setup(){ } function draw(){ }
と書くことが多いと思います。
しかし、ライブプログラミングを動かすために、
setup = function(){ }; draw = function(){ };
のように書くようにしてください。
取ってくることのできないブロック
画面左にあるブロック一覧からブロックを取ってくることができるのですが、現在ブロックを作ってはいるもののブロック一覧に登録していないブロックが多々あるので取ってくることのできないものがあります。これに関してはやればすぐに対応できるのでブロック作成が落ち着いたところで一気にやってしまいたいと思います。
まとめ
ビジュアルプログラミング言語とテキスト記述言語の間に連携をとり、ブロック言語からテキスト言語へのスムーズな学習移行を図るシステムを作成しています。中核となる機能であるブロックとテキストのリアルタイム変換が実装できたので公開することとなりました。注意にも書いたのですが、まだブロックの整理ができていないのですが、もしこのシステムを使いたいという方がいらっしゃればブロックの整備もすぐにいたしますのでコメントをくだされば、と思います。
Processingでビジュアルプログラミング言語を自作するpart1
- はじめに
- ビジュアルプログラミング言語(VPL)
- Processing
- 実装
- ①ブロックの見た目をつくる
- ②ブロックを移動できるようにする
- ③ブロックをくっつけさせる
- ④ブロックの接続関係をもたせる
- まとめ
はじめに
本記事ではProcessingで簡単なビジュアルプログラミング言語を作るのを目的に、ソースコードをあげながら作り方の解説を行っています。今回は第１回目ということで一番基本となるもっとも単純なブロックの作り方について取り上げています。
ビジュアルプログラミング言語(VPL)
小中学生向けであったり、プログラミングを初めて学習する人でも簡単にプログラミングができるように、プログラムの命令を視覚的に表現したプログラミング言語のこと。
多くはプログラムの命令をブロックで表すものが多い。
主流なビジュアルプログラミング言語としてはScratchが挙げられる。またビジュアルプログラミング言語の作成を支援するBlocklyというGoogleの作ったライブラリも広く知られている。
Processing
もしダウンロードされてない方は上記のサイトからダウンロードをお願いします。
今回はこのProcessingを用いてビジュアルプログラミング言語に用いるブロックを作っていきます。
実装
①ブロックの見た目をつくる
まずはブロックを描画するところまで書いていきます。
以下のソースコードを打ち込むなり、コピペするなりしてください。
細かい点についてはコメントで説明しているので、随時読んでみてください。
続きを読む
初心者でも始められるプログラミング生活：第2回目～if文とは？条件に応じて処理をかえる！～
はじめに
前回は変数を使ったプログラムの組み方について学びました。変数を使うことによりその場その場の状態を保持することができました。
しかし、前回のようなプログラムでは毎回同じ処理しか行うことができません。ゲームを想像してみたらわかりますが、攻撃を食らったときやアイテムを拾ったときなど様々な場面に応じて処理を変えないといけません。今回は条件に応じて処理を変えるif文について扱っていきます。
- はじめに
- if文
- 比較演算子
- 真偽値
- else文
- else if文
- Processingでif文
- ループする四角
- まるばつクイズ
- MYペイント
- 課題
- 課題２ー１
- 課題２－２
- 課題２－３
if文
まずは実際にif文を用いたプログラムを見てどういったものなのか理解していきましょう。
続きを読む
