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

  • このエントリーをはてなブックマークに追加
  • 0

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

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

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は、そういうオンラインでのプログラミング学習の概念を変えていくようなサービスでした。

blocklyのまとめ

・ゲームではない方のblocklyでは、少し外国っぽいUIをしていて理解しにくいという感じがありましたが、それでもかなり直感的でわかりやすい
・Googleが本気で簡単にAndroidアプリを開発できるように教育の方に取り組み始めた (blocklyはアプリをデモ的に動かせるだけ)
・プログラミング初心者がプログラミングの概念について勉強するのに役立つ
・各プログラミング言語に親しみがなくても、処理をブロックで作ることで導入の理解が早い
・Googleが凄すぎる

GoogleはGoogle playストアが充実していくことによって、アプリの開発者からお金をもらっているというプラットフォームを運営している関係上アプリの開発を如何に簡単にできるかというところに力を注いでいるようです。AppleもSwiftで簡単にアプリを開発できるようにしていくと発表していたので、同じような取り組みですね。
今後もこの2社のプログラミングを簡単に行えるようにするという取り組みからは目が話せませんね。

以上blocklyを使ってみた感想でしたが、ぜひ実際に使ってみてください。感動すると思います!
ドキュメントなどを読んでみても面白いです。

参考URL

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

Androidでのblocklyの公式ドキュメント:
https://developers.google.com/blockly/guides/get-started/android

Githubのレポジトリ :
https://github.com/google/blockly

blockly-games Githubのレポジトリ :
https://github.com/google/blockly-games

初心者でも起業や独立する際に必要なプロダクトを作るための、プログラミングが学習できるサイトをまとめてみましたので、こちらも合わせてどうぞ。

  • このエントリーをはてなブックマークに追加
Rplay転職チーム

Rplayの転職・フリーランスに関する情報をお伝えするアカウントです。中の人は上場企業でエンジニアをしつつ事業主をしています。エンジニアの転職やフリーランス、事業構築などの記事を書いていきます。

この記事が気に入ったら
いいね!しよう

Rplayの最新情報をお届けします

TwitterでRplayをフォローする

カテゴリー一覧