Googleが公開している「blockly」というビジュアルプログラミングエディターが凄すぎる

プログラミング

GithubのTrending developersの上位にGoogleはランクインしています。やはり技術レベルもトップランクの企業で最先端の技術を公開して世界中のエンジニアや開発者に影響を与えています。

そんなGoogleのレポジトリを見ていると最新のレポジトリにJavaScriptの「blockly」というレポジトリがあるので、見てみるとあまりにも未来すぎるビジュアルプログラミングエディターが公開されていたのでご紹介します。

このページの目次

1 blocklyとは
2 Googleの公開しているblocklyの凄さ
3 簡単なゲームでプログラミングの考え方が学習できる
4 プログラミング学習がわかりやすく、誰でも勉強できるようになった

blocklyとは

blockly

Googleのblocklyの公式ページには下記のように書かれています。

Pure JavaScript library. Under 150kb over the wire.
100% client side. No server side dependencies.
Compatible with all major browsers: Chrome, Firefox, Safari, Opera, and IE.
Highly customizable and extensible.

ピュアなJavaScriptライブラリで、150kb以下で作られている
100%クライアントサイドだけで書かれている
メジャーなブラウザはカバーしている

これだけのクオリティのものを開発できるのはさすがGoogleですよね…。

Googleの公開しているblocklyの凄さ

blockly

こちらの公式サイトにアクセスするとみれますので、まずはこちらを見てみてください。

左のブロックをドラッグアンドドロップで変更したり、回数やテキストを変更することによってリアルタイムに右のコードが変更されます。セレクトボックスではJavaScriptを設定しているので、JavaScriptのコードがリアルタイムで生成されます。

これでコードを書かなくても、アルゴリズムを考えるだけでコードが特定のプログラミング言語毎に生成されるので言語特有の書き方を知らなくても書くことができるようになりました。

この切り口から言語を学習していくということもできるようになったのは革命的ですね！

Loopを試してみるとこんな感じ

左のメニューのところからクリックして選択するとLoopに関する機能を変更できます。repeatの回数だったり、whileかuntilかというものを選択できるなどプログラミングの基礎的な繰り返しの処理を勉強できます。

シンプルな機能でありながらプログラミングの基礎が直感的に理解できるので、プログラミング学習の書籍に書かれていたループの処理の説明よりも、このブロックの処理を変更することによってより分かりやすくなりましたね。

右下の再生の→を押すことによって、変更した値の機能を動かしてみることができます。

JavaScriptのwindow.alertの機能が実行されるのがわかります。これがリアルタイムに実行して体験できるのはjsfiddleなどのビジュアルエディターのその先に行った気がしますね。

テキストの変更や追加も非常に簡単

左のテキストのリストから追加するモジュールを選択します。今回はシンプルなテキストを追加するモジュールをエディターに追加して、printするという処理を追加してみました。

そして実行してみるとalertがhello wolrd!だけだったものが、abcというものが追加されて表示されるようになりました。シンプルなテキストのほかにもテキスト系の処理を簡単に追加して、処理を行うことができるようになるのは非常に便利ですね。

公式サイト：https://developers.google.com/blockly/

簡単なゲームでプログラミングの考え方が学習できる

ドキュメントを読んでいると、なんとblocklyで作られているゲームも発見しました。これが凄すぎるのが、ゲームをクリアしていくという感覚を持ちつつプログラミングが学習できるというところです。

人をどのように動かせば、ゴールにたどり着けるのかというところはプログラムをどのように書いたら仕様通り、考えている通りの動きになるのかというところで使う考え方と共通しています。

上の動画で試してみたのは、間違ったときのケースです。人を動かす素材が左のグレーのところに用意されているのですが、この場合はどうしたらよいでしょうか？右にドラッグアンドドロップして実際に人を動かしてみます。

このように、基礎的なプログラムの動きについて上記で紹介してきたパターンだとプログラミングをするときに使うワードも出てくるのでとっつきにくいという方もいるかもしれませんが、ゲームで楽しみながら「仕組みを考える」という大事なスキルを身につけることができます。

繰り返しの処理の考え方を使うような問題も出てくるので、楽しく基本を学んでいけますね。

公式サイト：https://blockly-games.appspot.com/maze

プログラミング学習がわかりやすく、誰でも勉強できるようになった

オンラインでプログラミング学習ができるサイトやサービスが増えてきました。ドットインストールのように自分で動画をみて、コードを書くことによって勉強していくスタイルだったり、「 CodeCamp 」などのようにオンラインでハングアウトしつつ先生にマンツーマンで動画を用いて学習していくスタイルなど多様なプログラミング学習スタイルが出てきました。

今回のGoogleが開発しているBlocklyは、そういうオンラインでのプログラミング学習の概念を変えていくようなサービスでした。