プログラミング雑記

プログラミングが趣味のだらだら学生。自作したプログラムの紹介やいまハマってることなんかを適当に書いていったりいかなったり

プログラミング教育に新風を巻き起こ(したい)すシステム公開!

 

はじめに

子どもやプログラミング初学者向けのプログラミング学習支援システムを作っています。

初めてプログラミング学習をする人には、ビジュアルプログラミング言語を用いて視覚的にプログラムを組めるようにするのがとっつきやすく学習を始めやすいと思いますが、主流なプログラミング言語はほとんどテキストで記述する形式ですからいずれはVPLから脱しないといけません。

 

techacademy.jp

 

そこで、ビジュアルプログラミング言語とテキスト記述形式の言語の間でリアルタイムに変換できるシステムを現在作成しており、メインとなる機能が実装できたのでα版として公開したいと思いました。以下が全体像となんとなくの使い方です。

 

https://niishi31.tumblr.com/post/178949323589

niishi31.tumblr.com

 

https://niishi31.tumblr.com/post/178949561624

niishi31.tumblr.com

 

github.com

 

今回の記事では技術的なところには触れず、今回作成しているシステムの特徴について書いていきます。

 

 

特徴

テキスト/ブロック間のリアルタイム変換

ブロックからテキストへの変換は数多くあります。Blocklyでもデフォルトで備わっている機能です。しかし、テキストからブロックへの変換はあまり例がありません。特に、リアルタイムに変換を行えるようにしているものは私が知る限りありませんでした。

私が今回作成しているシステムではブロックからテキストはもちろん、その逆のテキストからブロックへのリアルタイム変換も可能にしています。

 

https://niishi31.tumblr.com/post/178907795694

niishi31.tumblr.com

 

同一システム内、同一画面内にテキストとブロックの両表現を取り入れ、その間を連携させることによりプログラミングを初めて学ぶ人はブロックから学習を始め、テキストでの書き方を学び、徐々にテキストでのプログラミング学習へ移行することができます。また、ブロックでのプログラミングの仕方はすでに知っている人でも、慣れたブロックからテキストへの学習移行ができます。

 

ブロックエディタでテキスト記述が利用可能

ブロックでプログラミングをしているときに一番わずらわしいのは、一々ほしいブロックを探し出し、エディタにもってきて、今あるブロックと接続しなければいけないことだと考えています。例えば、(1+2*3)/4という計算をプログラムで書きたい場合、タイピングしてしまえばあっという間です。しかし、これをブロックで記述しようと思ったらとても大変です。数字を記述するためのブロックを4つと演算子ブロックを3つ持ってきて、それぞれ数字ブロックなら1や2や3や4をタイピングし、演算子ブロックなら+,*,/を選択しなければいけません。最後にその7つのブロックを組み合わせなければならずとても気の遠くなるような作業です。

そこで、このような明らかにテキストで記述できるものはテキストで記述してしまおうということでブロックエディタ上でもテキスト記述ができるようにしました。

 

https://niishi31.tumblr.com/post/178907549392

niishi31.tumblr.com

 

これはブロック表現とテキスト表現間の中間表現に位置すると考えていて、いきなり全部をテキストで記述するのではなく、まずは一文からテキストにチャレンジするようなイメージです。

 

JavaScriptのほぼすべての文法に対応

JavaScriptのほとんどの文法が使えるようになっており、ブロックへ変換できるようになっています。ArrowFunctionやLiteralの正規表現など、自分があまり普段使わない文法は実装していないのですが、これから実装する予定です。これほど多くのJavaScriptの文法に対応しているVPLもないのではと思っています。

どれくらい対応しているのかイメージする例として、テキストからブロックへの変換するソースコードを1,000行強書いたのですが、それが全てブロックに変換できるレベルです。(もちろん、変換されたブロックがどんな複雑なことになっているかについては触れません……;;)

 

ライブプログラミング

初学者にとっても大事なのはフィードバックの速さだと思っています。自分がプログラムに与えた変更が実行結果にどう影響を与えるのかをすぐにわかった方が良いと考えています。そこで、このシステムではライブプログラミング、つまりソースコードに変更あるとプログラムを再実行する機能、を取り入れています。

特にこのライブプログラミングは、p5js(Processing)のようなグラフィックを操作するプログラムと相性が良いため採用しています。

 

https://niishi31.tumblr.com/post/178944664473

niishi31.tumblr.com

 

ライブプログラミングがあると教える側としても、プログラムを変更しながらそのまま実行結果に与える影響を教えられるため、実行ボタンを押して実行画面が出てその様子を確認してなどのタイムラグがなくなり教えやすいのではと考えています。

 

(ある程度の)エラーに対応(実装中……)

こちらは鋭意開発中なのですが、ソースコード中に構文エラーがあってもある程度ブロックに変換できるようにしています。システムの裏側の話になってしまうのですが、ソースコード中に構文エラーがあるとブロックには普通は変換できないのですが、ブロックとともに開発しているとこのような構文エラーは多く起こる可能性があります。

 

f:id:kirari0831:20181011223650p:plain

 

例えば、矩形を描画するブロックrectをブロックエディタ上に持ってきたとしましょう。そうするとテキストエディタ上にはrect( , , , );が挿入されることになります。この一文のせいでほかの正常なソースコードもブロックに変換されなくなってしまいます。こうならないように、裏で色々ごまかしながら構文エラーがあってもある程度に動くようにしています。現在、これに手を付けたばかりで実装はまだ進んでいないのですが、これからもっと深く扱っていく予定です。

 

注意

まだまだブラッシュアップできていない部分が多々あるので「うまくいく」ように使ってあげないといけません……

setup()やdraw()の書き方

p5jsの多くのサンプルは

 

function setup(){

}
function draw(){

}

と書くことが多いと思います。

 

しかし、ライブプログラミングを動かすために、

 

setup = function(){

};
draw = function(){

};

のように書くようにしてください。

 

取ってくることのできないブロック

画面左にあるブロック一覧からブロックを取ってくることができるのですが、現在ブロックを作ってはいるもののブロック一覧に登録していないブロックが多々あるので取ってくることのできないものがあります。これに関してはやればすぐに対応できるのでブロック作成が落ち着いたところで一気にやってしまいたいと思います。

まとめ

ビジュアルプログラミング言語とテキスト記述言語の間に連携をとり、ブロック言語からテキスト言語へのスムーズな学習移行を図るシステムを作成しています。中核となる機能であるブロックとテキストのリアルタイム変換が実装できたので公開することとなりました。注意にも書いたのですが、まだブロックの整理ができていないのですが、もしこのシステムを使いたいという方がいらっしゃればブロックの整備もすぐにいたしますのでコメントをくだされば、と思います。