プログラミング雑記

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

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

 

はじめに

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

初めてプログラミング学習をする人には、ビジュアルプログラミング言語を用いて視覚的にプログラムを組めるようにするのがとっつきやすく学習を始めやすいと思いますが、主流なプログラミング言語はほとんどテキストで記述する形式ですからいずれは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(){

};

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

 

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

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

まとめ

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

 

 

Processingでビジュアルプログラミング言語を自作するpart1

  • はじめに
  • 実装
    • ①ブロックの見た目をつくる
    • ②ブロックを移動できるようにする
    • ③ブロックをくっつけさせる
    • ④ブロックの接続関係をもたせる
  • まとめ

 

はじめに

本記事ではProcessingで簡単なビジュアルプログラミング言語を作るのを目的に、ソースコードをあげながら作り方の解説を行っています。今回は第1回目ということで一番基本となるもっとも単純なブロックの作り方について取り上げています。

ビジュアルプログラミング言語(VPL)

小中学生向けであったり、プログラミングを初めて学習する人でも簡単にプログラミングができるように、プログラムの命令を視覚的に表現したプログラミング言語のこと。

多くはプログラムの命令をブロックで表すものが多い。

主流なビジュアルプログラミング言語としてはScratchが挙げられる。またビジュアルプログラミング言語の作成を支援するBlocklyというGoogleの作ったライブラリも広く知られている。

 

Processing

Download \ Processing.org

もしダウンロードされてない方は上記のサイトからダウンロードをお願いします。

今回はこのProcessingを用いてビジュアルプログラミング言語に用いるブロックを作っていきます。

 

実装

①ブロックの見た目をつくる

まずはブロックを描画するところまで書いていきます。

以下のソースコードを打ち込むなり、コピペするなりしてください。

細かい点についてはコメントで説明しているので、随時読んでみてください。

 

続きを読む

初心者でも始められるプログラミング生活:第2回目~if文とは?条件に応じて処理をかえる!~

はじめに

前回は変数を使ったプログラムの組み方について学びました。変数を使うことによりその場その場の状態を保持することができました。

しかし、前回のようなプログラムでは毎回同じ処理しか行うことができません。ゲームを想像してみたらわかりますが、攻撃を食らったときやアイテムを拾ったときなど様々な場面に応じて処理を変えないといけません。今回は条件に応じて処理を変えるif文について扱っていきます。

 

  • はじめに
  • if文
    • 比較演算子
    • 真偽値
    • else文
    • else if文
  • Processingでif文
    • ループする四角
    • まるばつクイズ
    • MYペイント
  • 課題
    • 課題2ー1
    • 課題2-2
    • 課題2-3

 

 

if文

まずは実際にif文を用いたプログラムを見てどういったものなのか理解していきましょう。

 

続きを読む

初心者でも始められるプログラミング生活:第1回目~変数とは?アニメーションで変数を理解する!~

はじめに

※前回記事はこちら

niisi.hatenablog.jp

 

今回はプログラムの中でも基本中の基本「変数」について扱っていきます。

難しいものではないですが、とても大事なところなのでしっかりおさえていきましょう!

 

  • はじめに
  • 実行の流れ
  • 変数
    • 変数の宣言と代入
    • 変数の更新
    • 変数の宣言場所と「生きられる」範囲
  • 変数を使ったプログラム
  • 演習問題
    • 問題1-1
    • 問題1-2-1
    • 問題1-2-2
    • 問題1-3

 

続きを読む