やわらかテック

興味のあること。業務を通して得られた発見。個人的に試してみたことをアウトプットしています🍵

【現役エンジニア】SCRATCH(スクラッチ)で遊んで何が出来るのかを体験してみた

ビジュアルプログラミングSCRATCH

SCRATCH(スクラッチ)に関しての説明はもう不要だと思いますので省きます。小学生などの低年齢層を対象にプログラミングをブラウザとGUIを使って学習することが出来るMIT開発のビジュアルプログラミングのプラットホームですが、どれぐらいのものが作れるのかが気になったので少しだけ遊んでみました。

また、普段は業務でプログラミング言語を使ってコードを記述しています。ビジュアルプログラミング言語からプログラミング言語の学習に進む際にどんなことが壁になるのかを体験してみました。

いざSCRATCHにアクセス

scratch.mit.edu

とりあえずアクセスしました。どうやらログインなしで早速プロジェクトを作成することが出来るようです。ログインをすると作品の保存と共有機能が使えるようになりました。

作りたいものがまだ決まっていないですが、プロジェクトを作って編集画面?にアクセスしてみました。

f:id:takamizawa46:20200329121748p:plain

まだ何も作成されていない状態ですが、何をやっていけばいいのかは何となく分かりました。左側にあるブロックと呼ばれる部品をつなげていって、処理を作成していけばいいようです。このブロックが非常にバリエーション豊かで色々なことが出来るようです。
音の出力から画像の回転や移動といった子供に喜ばれそうなブロックもあれば、変数の定義や分岐処理、繰り返し処理、はたまた配列操作に関するブロックまでありました。
「ほとんどプログラミング言語を記述するのと分からないんじゃないの?」と非常に驚かされました。

f:id:takamizawa46:20200329122249p:plain:h450

作るものを決めた

思っていたよりもプログラミング言語によせたブロッグが実装されていたので、結構やれそうだなと感じたので以前Twitterで見かけたSCRATCHの問題に取り組んでみることにしました。

その問題がこちら。SCRATCH再帰処理を用いて二分探索(binary search)を行うというもの。これをSCRATCHで作成してねという中々に鬼畜な問題...😅

まぁ、これだけプログラミング言語に寄せたブロックがあるんだから作れそうだなぁと思って挑戦することにしました。二分探索(binary search)については過去の記事で解説していますので、何なのか全く分からないという方はご参照下さい。

www.okb-shelf.work

試行錯誤を繰り返し...

気軽に実装を始めてみましたが、これが思うようにいかない...
f:id:takamizawa46:20200329122914p:plain

関数の定義が出来るブロックがあり、そこで再帰させてあげればいいのかなと思ったものの、SCRATCHで配列を分割する方法が思いつかずに一回、リセット(スコップを持った人に怒られそう)。

次は、元の配列から探したい数値以上の要素だけを抽出するfilter関数のような処理が出来る関数ブロックを作ってから二分探索をしようと思い、配列の分割(split_lst)を作ろうとします。

f:id:takamizawa46:20200329123213p:plain

元の配列に対して抽出処理をしてしまうと、元データが消えてしまうので、もう1つ配列を用意して、そちらに条件を満たした要素をコピーする方針としました。が、変数管理で大苦戦。なかなか思ったように出来ず、気づけば無限ループを引き起こしてしまっていた。

ああああ...
f:id:takamizawa46:20200329123402p:plain

何とか分割処理までは作れたものの、変数管理と全体の見通しがつかず、頭がワチャワチャしてきて、気づいたら散漫なブロックが出来上がってしまっていた。

f:id:takamizawa46:20200329123500p:plain

コメント機能は便利だと思いますが、どうせならコメントブロックを用意してほしかったなぁと感じました。普段コードを書いている身としては違和感がありました。

それから2時間ほど悩みましたが、最終的なブロックはこんな感じになりました。先に結果をいうと、作れませんでした。すみません。何ていうか飽きてしまいました笑

f:id:takamizawa46:20200329123715p:plain

何が辛かったか

プログラミング言語に寄せたブロックが多く用意されている一方で、普段記述しているプログラミング言語とは大きく異なる仕様に混乱させられました。順に紹介していきます。

配列のindexが0始まりではなく1で始まる

filterする処理を作っていた時に、何回やっても思った値が抽出出来ないなぁと思って調べたところ、配列の先頭要素のIndex番号は0ではなく1になるとのこと。この仕様には素直にやられたーと思いました。

なぜ1始まりの仕様にしたのかは分かりませんが、SCRATCHから著名なPythonRubyのようなプログラミング言語へ進む際は気をつけなければハマりそうですね。

自分も全く知らなかったのですが、COBOLFORTRANといった比較的古典的なプログラミング言語では配列の先頭要素にアクセスするためのIndex番号は1になるとのこと。勉強になった。

rubikitch.hatenadiary.org

全ての変数がグローバルスコープ

作成(定義)した全ての変数がどこからでも参照可能で、更新可能という仕様が個人的には合わなかった。この意図は、複雑な変数に対するスコープ管理を意識させないということなのだということは伝わってきます。そうすることで、変数は便利なものという、かなり抽象的ながらもパワフルな道具として利用してもらうことが出来るからです。

COBALのバージョン何かは忘れましたが、全ての変数がグローバルスコープでスパゲッティコード(複雑に絡み合い改修が難しい状態のコード)になってしまうという話を以前、聞いたことがあります。

・・・しかし、僕はCOBOLに出会った。それは衝撃的な出会いだった。全ての変数がグローバル
worar.hatenadiary.org

関数の引数に配列が渡せない

関数型言語再帰処理をしている立場としてはこれはつらい。引数として渡すことができるのはstring型, int型, float型, bool型のみで用意されているデータ構造の中で配列だけが渡せませんでした。

都度、グローバルスコープを利用して配列を参照する必要があり、うーんと思いました。配列の状態管理にすごく気を遣う必要があります。感じた意図としては、そもそも配列をあまり重要視していない、使われる想定をしていないといったところでしょうか。

配列に対してのイテレーションが実行できない

先ほども記述下通りですがSCRATCHでは配列に対して、それほど重要視されていないでしょう。そのためにこのような仕様になっていると感じました。filter処理を記述している時に、この不便さを感じました。

都度、インクリメントするための変数を用意(しかもグローバルスコープだから要注意)してあげて、配列のIndexを指定してアクセスするというオールドな書き方をする必要があり、面倒でした。

値がリセットされない

実行するたびに最終結果が全ての変数に残ったままになります。これがやっかいでした。全てがグローバルスコープなので実行するたびに毎回リセットする処理を作成しておかないと、とんでもない結果を生み出す可能性があります。

特にインクリメント用の変数や配列には要注意。無限ループになりがちです(めっちゃなった)。

総評

SCRATCHは非常によく出来ていました。ビジュアルプログラミングという点を生かして、実行できる処理が目に見えるものが多く子供が楽しんで学ぶことが出来ると好評を受けている理由も分かりました。一番の驚きだったのはやはり、実際にプログラミング言語を記述する際に意識する文法に近いブロックが多く用意されていることです。

まさか関数の定義まで出来るとは驚きました。

その一方で現代のモダンなプログラミング言語とは異なる仕様であったりとビジュアルプログラミングを完璧にしたからプログラミング言語をスラスラと記述出来るとは感じませんでした。
変数の管理や配列の操作をあまり意識させない方がストレスなく、子供に使ってもらえるでしょう。遊び方としては、イベントリスナーをたくさん用意して、それぞれで処理を発火させていくゲームのようなものを作ってもらうのが良いと感じました。

実際にこんなゲームまで作れるんですね。すごい...

このままでは終われない

せっかく挑戦したのに何の爪跡も残せず終わってしまうのは心もとないので、一作品を作ってみました。魔法使いが猫に挨拶をしたら、猫がイキってきたものの、魔法使いがマッチョであったため、萎縮するという謎すぎるストーリを作りました。

今思うとなぜこんなものを作ろうと思ったのが不思議ですが、「SCRATCHすげー!」と思った機能にメッセージの送受信というブロックが用意されていることです。

それぞれのオブジェクトにどんなメッセージを送るか、受け取った時に何をするのかという処理を作成することが出来ます。これは並行処理でメッセージを飛ばし合うメッセージパッシングそのものであり、複数の処理系が同時に走るという概念を学ぶには非常にいい機能ですね。

f:id:takamizawa46:20200329131819p:plain
f:id:takamizawa46:20200329131833p:plain

参考文献