【目的無しの泥臭調査⑥】教育用プログラミング言語「Blockly」に触れて、童心に帰って頭を再整理 #JavaScript

ふと気になったことを、淡々と赴くままに調査していく、この上ない自己満足記事第六弾。
「久々の泥臭調査は燃えたぎるな」という、極めて浅い歴史にも関わらず、老舗気分に酔いしれる、変わらない生活。
今回は、様々なものに手を出しすぎている私の「頭の再整理・原点回帰」のために、教育用プログラミング言語の「Blockly」に触れていくことにしよう。

概要

視覚的にプログラミングを学習することができる言語。
画面上にある「ブロック」を、パズルのように組み合わせていくことで、プログラミング思考を学習することができる。
レゴブロックのように、楽しみながら学ぶことができるため、主に教育用として用いられている。
作成したものを、「JavaScript・Python・PHP」等といった言語に変換することができる。
公式サイト

利点

ゲーム感覚で学習することができる

「画面操作のみ・ブロックを配置していくのみ」でプログラムを作成することができるため、難しい記述を覚える必要がない。
また、Blocklyを体験できるBlocklyGames等といったサイトが豊富にあるため、ゲームしている感覚で学習できる。

環境に依存しない

ブラウザがあれば、どこでも学習することができるほか、iOS版やAndroid版もあるため、環境に困らない。

様々な世代が利用できる

「教育用としての子供向け言語」ではなく、下記のような様々な場面で広く利用できる。
- 子供・・・レゴブロックで遊ぶ感覚で、幼少期のころからプログラミングに触れることができる。
- 学生・・・学習を始める中高生や大学生が、必修化されるプログラミング授業でつまずくことなく、楽しみながら学べる。
- 大人・・・学生同様に、初期学習におけるつまずきの緩和ができるほか、子供と一緒に遊びながら学ぶことができる。
- エンジニア・・・既にエンジニアとして働いている新人等が、「基礎的な論理や仕組み」の理解や整理を図ることができる。

拡張性が高い

標準のブロックだけではなく、自分で作成することもできるため、より複雑な論理を組むこともできる。

環境構築不要

Blocklyのブラウザエディタを利用すれば、構築の手間が省け、簡単に利用することができる。

同様の教育系プログラミングサービス

画面

下記のようにブロックを組み合わせていきながら、ブラウザ上で学習することがきる。

また自分のローカル環境上に作成して、ブロックを拡張することができる。

手順

ブラウザエディタを利用する場合

こちらのサイトにアクセスすると、Blocklyのブラウザエディタを開く。

「タブメニュー」「カテゴリメニュー」が表示される。
画面上の各機能の詳細は下記。
- Blocks・・・配置するためのブロックが用意されている。
  - Logic・・・if等の論理部分
  - Loops・・・forやwhile等のループ部分
  - Math・・・数値部分
  - Text・・・出力部分
  - Lists・・・配列等のリスト部分
  - Colour・・・デザイン部分
  - Variables・・・変数部分
  - Functions・・・関数部分
- JavaScript・・・ブロックをJavaScriptに変換
- Python・・・ブロックをPythonに変換
- PHP・・・ブロックをPHPに変換
- Lua・・・ブロックをLuaに変換
- Dart・・・ブロックをDartに変換
- XML・・・ブロックをXMLに変換
作成したいプログラムのイメージが固まったら、ブロックを配置していく。

作成後、右上の「▶」ボタンで実行して、結果を確認する。

完了。

自分のローカル環境で利用する場合

下記のいずれかの方法で、自分のローカル環境にダウンロードする。
- こちらのサイトにアクセスして、zipファイルをダウンロードする。
- コマンドプロンプト（ターミナル）で下記のコマンドをうって、ダウンロードする。
  - git clone https://github.com/google/blockly.git
ダウンロードしてきたライブラリの「¥blockly¥demos¥code」の場所にある「index.html」を開く。
開いたら、先程のブラウザエディタを利用する場合の部分で説明したブラウザエディタが表示されるため、こちらで学習を進めていく。
ブロック等を自分でカスタマイズしたい場合は、「¥blockly」の中に「index.html」を作成する。
中身のコードを下記の例のようにする。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="blockly_compressed.js"></script>
    <script src="blocks_compressed.js"></script>
    <script src="msg/js/ja.js"></script>
</head>

<body>
    <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
    <xml id="toolbox" style="display: none">
        <category name="コントローラ" colour="210">
            <block type="controls_if"></block>
            <block type="controls_whileUntil"></block>
            <block type="controls_for">
        </category>
        <category name="ロジック" colour="210">
            <block type="logic_compare"></block>
            <block type="logic_operation"></block>
            <block type="logic_boolean"></block>
        </category>
        <category name="ループ" colour="120">
            <block type="controls_repeat_ext"></block>
        </category>
        <category name="テキスト" colour="220">
            <block type="text"></block>
            <block type="text_print"></block>
        </category>
        <category name="計算" colour="230">
            <block type="math_number"></block>
            <block type="math_arithmetic"></block>
            <block type="math_round"></block>
        </category>
        <category name="カラー" colour="20">
            <block type="colour_random"></block>
            <block type="colour_rgb"></block>
        </category>
    </xml>
    <script>
        var workspace = Blockly.inject('blocklyDiv', {
            toolbox: document.getElementById('toolbox'),
        });
    </script>
</body>

</html>

記述後、ブラウザで「index.html」で開いて、画面が表示されれば完了
※今回は調査や体験のため、詳細なカスタマイズ方法はこちらを参考にする。

まとめ

今回はBlocklyの調査ということで、「このブロックはここに配置すれば突破できるのか」という、子供以上に熱中してしまいながら記事を書く。
Blocklyの豊富な拡張性という素晴らしい機能は後回しにして、ひたすら用意されたBlocklyGameのレベル上げに励む私は、技術者の定義をひたすら思考。
「最新のツールやライブラリ・情報に触れすぎたことによる頭の中の複雑化」の再整理を今回の成果として、引き続きレベル上げに精進することにしよう。

参考

公式サイト
https://sitest.jp/blog/?p=11288
→こちらを参考にいたしました。大変お世話になりました。
https://qiita.com/taise/items/a0daf14219e657c92211
→こちらも参考にいたしました。大変お世話になりました。
https://blockly-games.appspot.com/
→Blocklyを用いて、ゲーム感覚で学習できるサイトです。大変お世話になりました。