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

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

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

## 利点
### ゲーム感覚で学習することができる
- 「画面操作のみ・ブロックを配置していくのみ」でプログラムを作成することができるため、難しい記述を覚える必要がない。
- また、Blocklyを体験できる[BlocklyGames](https://blockly-games.appspot.com/?lang=en)等といったサイトが豊富にあるため、ゲームしている感覚で学習できる。

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

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

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

### 環境構築不要
- [Blocklyのブラウザエディタ](https://blockly-demo.appspot.com/static/demos/code/index.html)を利用すれば、構築の手間が省け、簡単に利用することができる。

## 同様の教育系プログラミングサービス
- [Scratch](https://scratch.mit.edu/)
- [code.org](https://code.org/)
- [PencilCode](https://pencilcode.net/)

## 画面
- 下記のようにブロックを組み合わせていきながら、[ブラウザ上](https://blockly-demo.appspot.com/static/demos/code/index.html)で学習することがきる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/336499/e6406cb7-170e-a1d2-6fa6-f1d27ae50d3d.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/336499/a6ffe1f7-a64f-d137-6d38-2a0c78449505.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/336499/5aecfded-77ac-4307-5d63-6f4163facced.png)

## 手順
### ブラウザエディタを利用する場合
- [こちらのサイト](https://blockly-demo.appspot.com/static/demos/code/index.html)にアクセスすると、Blocklyのブラウザエディタを開く。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/336499/54dc6dfa-0e90-7fc0-2f39-5c9b3b33db61.png)

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

- 作成したいプログラムのイメージが固まったら、ブロックを配置していく。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/336499/218d1b66-59d4-5b92-6fa2-56113a8ac4fb.png)

- 作成後、右上の「<font color="red">▶</font>」ボタンで実行して、結果を確認する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/336499/f1935829-fc1b-9e48-a390-dae6470a2296.png)

- 完了。

### 自分のローカル環境で利用する場合
- 下記のいずれかの方法で、自分のローカル環境にダウンロードする。
    - [こちらのサイト](https://developers.google.com/blockly/guides/get-started/web)にアクセスして、zipファイルをダウンロードする。
    - コマンドプロンプト（ターミナル）で下記のコマンドをうって、ダウンロードする。
        - `git clone https://github.com/google/blockly.git`

- ダウンロードしてきたライブラリの「¥blockly¥demos¥code」の場所にある「index.html」を開く。
- 開いたら、先程の[ブラウザエディタを利用する場合](#ブラウザエディタを利用する場合)の部分で説明したブラウザエディタが表示されるため、こちらで学習を進めていく。
- ブロック等を自分でカスタマイズしたい場合は、「¥blockly」の中に「index.html」を作成する。
- 中身のコードを下記の例のようにする。

```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」で開いて、画面が表示されれば完了
- <font color="red">※今回は調査や体験のため、詳細なカスタマイズ方法は[こちらを参考](https://developers.google.com/blockly/guides/overview)にする。</font>

![image.png](https://qiita-image-store.s3.amazonaws.com/0/336499/0b629bb4-74b0-4589-44a8-e1d08b5f9487.png)

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

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