小学校の現状

2020年度から小学校でプログラミング教育が必修化される。

実際にPCを用いる学校もあれば、PCに比べ手軽に使えるということでタブレットを導入している学校もある。使うデバイスは実に多種多様なのだが、問題はブラウザである。

プログルのユーザが用いるデバイスの約7割はIE11。悪いというわけではないが、エンジニアとしてはリリースの際に注意して検証する項目が増える。

IE11に対応させるということ

また、タブレットといってもiPadを使用する学校もあれば、Windowsタブレットの使用も想定される。

このように、様々なデバイスやブラウザでの検証が開発の中で必要になるということを、新卒で働き始めてすぐに感じるようになった。

プロダクトを開発するエンジニアとして至極当たり前なことではあるが、学校現場のブラウザ事情を考慮するとIE11には対応させなければならない。

もうすぐ入社して4ヶ月が経とうとしている。
これまでに中央値・最頻値コースのリリースやIE11対応のissueやバグ修正と向き合ってきた中でプロダクトに関する理解が深まった。

IE11で発生するバグを発見

そんな中、IE11で発生するBlockly本家のバグを発見した。

ブロックに対応するコードをステップ実行する際、
実行されている箇所のブロックがハイライト表示されるのだが、IEではアンハイライトされないことが分かった。

Blocklyのminifyされたコードから原因を探った。

バグを修正し、プルリクを送る

バグの原因を特定し修正用のパッチも当てた。
これによってプログルの7割のユーザのユーザ体験が良くなったのではないかと思う。

ただ、BlocklyはGoogleが管理しており、オープンソースで世界中(まだまだニッチなBlocklyコミュニティ)の人の手によって機能の追加やバグの修正がされている。

そして、Blocklyを用いて、あるいはforkして開発されているプロダクトも多く存在する。そこに貢献できたらと思いプルリクの作成に取り掛かった。

このバグに関するプルリクはこちら
気合を入れすぎてIE10でもOperaでも検証した。

プルリクメッセージを書く上で、英語が得意なパートナー担当のメンバーにお願いした。
自称言語オタクということもあり、特にReason for Changesに関してはとても素晴らしい文章となった。

In Japan many online materials of STEM classes for elementary schools are based on Google Blockly, so the case where children use Goolgle Blockly is not rare. Moreover most of Japanese schools are not equipped with Chrome/ Microsoft Edge nor Safari. They use Internet Explorer, even though IE has not supported.
We would like to make it clear to children that which code is to debag.

変更を取り込んでくれたが...

結果としてはBlocklyのコントリビュータになれなかった。しかし変更は別の形で反映された。

というのも、Googleのレビュワーが新たにブランチ・プルリクを作成して変更を加えたのだった。よく見ると自分の出したプルリクと少し変更点が異なっていたのもあったのでレビューが面倒だったのだろう。

形は違えど、Blocklyユーザや開発者に貢献できたので良かった。
また、Googleの開発者もIEが嫌いということが分かった。

Blockly開発は楽しい

この度、技術書典7に出すことが決まった。

ReactとBlocklyを用いた開発について書こうと計画している。
Blockly自体がまだまだニッチではあるが、必修化を目前としたこの時にプログラミング教育とビジュアルプログラミング言語であるBlocklyについて多くの方に触れていただけたらと思う。

みんなのコードのエンジニアとしてプロダクト開発に携わる中で「NPOだけど面白いベンチャーだなぁ」と感じる。「全ての子どもがプログラミングを楽しむ国にする」 ためにプロダクトを開発しているからだろうか。笑