BlockLike.jsは、ブロックベースのScratch学習体験をJavaScriptのテキストベースのプログラミングに拡張する教育用JavaScriptライブラリである。
Scratchは、インタラクティブなストーリー、ゲーム、アニメーションを作成することで、子供たちがコーディングの基礎を学べるようにすることを目的としたビジュアルプログラミング環境である。BlockLike.jsの作成者であるRon Ilan氏によると、Scratchは学習体験を可能にする素晴らしい役割を果たしているが、テキストベースのプログラミングとのギャップは依然として大きい。特にWebプログラミングは、利用しやすい環境として魅力的であるにもかかわらず、初心者が解読するのは難しいとIlan氏は言っている。
成長したければ、ScratchとWebの間のギャップを埋めるのに役立つ何かが必要だと気づきました。JavaScriptにとっては、自転車の補助輪のようなものになります。
ScratchとBlockLike.jsの関係は、抽象化が直接マッピングされていると言えるほど近い。Scratchによって、Sprite、Costume、Backdropなどの基本的なオブジェクトをユーザが利用できるようになる。これらのオブジェクトを操作して、位置、動き、外観を変更できる。また、ループ、if-then-else条件、待機などに対応する制御ブロックも提供される。
BlockLike.jsでは、Scratchをある環境から別の環境へスムーズに移行するために、Scratchに似たオブジェクト、メソッド、パターンを定義する。
Scratchで学び、実践し、習得したことは移行可能である。ScratchとBlockLike.jsは同時に使うことが想定されています。Scratchで何かを試して、すぐにwebに翻訳できる。必要に応じて、他の方法を使うこともできます。基本的なレベルでは、それらは相互に変換可能です。
そのため、BlockLike.jsは、sprite、costume、backdrop、stage、イベントなどを提供する。次のスニペットは、ステージを作成していくつかのspriteを設定し、それらをカスタマイズして、イベントに応じて状態を変更する方法を示している。
let stage = new blockLike.Stage();
let sprite = new blockLike.Sprite();
sprite.addTo(stage);
let backdrop = new blockLike.Backdrop();
backdrop.addTo(stage);
let costume = new blockLike.Costume();
costume.addTo(sprite);
sprite.whenClicked(function() {
while(true){
this.nextCostume();
this.move(10);
this.wait(0.2);
}
});
ScratchとJavaScriptの大きな違いの1つは、ループの処理にあるとIlan氏は言っている。Scratchは、本質的にペースが定められた実行を行う。つまり、Scratchブロックは、UIに副次的な作用をもたらすスタンドアロンステップとして実行される。これはループブロックにも適用され、アニメーション効果を作成するための鍵となる。一方、必要最低限のJavaScriptループは、メインスレッドを食べるだけで、停止することなく最後まで実行される。
このようなペースのある動作を処理するために、BlockLike.jsではイベントループを定義しない。これは、GUIフレームワークやゲームエンジンでは一般的である。代わりに、JavaScriptのasync/await抽象化を使って、ペースのある実行を実現する。そのためには、プログラマーが明示的にwait操作を使用して制御を放棄し、UIにそれ自体をリフレッシュする機会を与える必要がある。
sprite.whenClicked(function() {
while(true) {
this.changeY(10);
this.wait(0.2);
this.changeY(-10);
this.wait(0.2);
}
});
同じ理由で、通常どおりScratchカスタムブロックに対応するJavaScript関数を定義できるが、invokeメソッドを使って呼び出す必要がある。
BlockLike.jsを使ってみるには、CodePen.ioから使うことができる。また、広範囲のドキュメントにアクセスできる。このプロジェクトはGitHubからでも入手できる。