技術ブログはじめます
みなさまはじめまして。
みんなのコードは、「全ての子どもがプログラミングを楽しむ国にする」をミッションに掲げるNPO法人です。
みんなのコードには現在5名ほどのエンジニアが在籍しており、累計40万人が体験したプログラミング教材「プログル」を開発しています。
このブログでは、プログル開発の裏側や、各々が興味を持った技術などについて、マイペースに投稿していきます。
これからよろしくお願いいたします！
それでは、記念すべき第一回目は、今年入社した新卒エンジニアのきょんしーが担当します！
Blockly公式のnpmパッケージ公開
みんなのコードの きょんしー です🐧
日本ではお盆休みだった2019年の8月14日、ES2015に対応したBlocklyのnpmパッケージがGoogleから公式に公開されました。
これに伴い、以下のコマンドでパッケージの追加が可能になりました。
$ npm install blockly
importして使用する際は、
import * as Blockly from 'blockly';
とすることでブロック定義ファイル、翻訳ファイルも一括で読み込めます。
// coreのモジュールのimport import * as Blockly from 'blockly/core'; // カスタムブロックに対応するcodeを定義する際に使用 import 'blockly/javascript' Blockly.JavaScript['hoge'] = (block) => { return 'console.log(\'custom block\');\n'; };
以上のように記述することで、個々のモジュールを読み込むことも可能です。
今までの開発と変わる点
これまではBlocklyが公式に公開していなかったため、node-blocklyというパッケージを利用していました。
node-blocklyは、Blocklyのリポジトリをサブモジュールとして追加されており、Gulpのビルド処理によってBlocklyをES2015以降のJS開発での利用を可能にしています。
公式のパッケージが公開されたことで、今までのnode-blocklyを用いたBlocklyアプリケーション開発と変わる点は少ないのですが、
- Blocklyのrelease後に
node-blocklyの更新を待たなければならない - あくまで
node-blocklyは公式で公開されているものではない
ので、信頼できるソースになったかと思います。
Blocklyを使って開発したい方への朗報
blocly-samplesというリポジトリが公開されました。
ReactやVue, Angular, Node.js等での開発の始め方の指針となるため、Blockly開発を始めてみたい方は参考にしていただけたらと思います。
TypeScriptに対応
npmのパッケージ公開の際、同時にTypeScript(以下、TS)にも対応しました。
DefinitlyTyped内に@types/blocklyの形式で公開されているわけではないのですが、Blocklyの型定義ファイルがリポジトリ内に入ってます。
TSに対応はしましたが、まだ重要な機能であるブロックをJavaScriptやPythonに変換するモジュールの型定義はされていないので型定義ファイルの作成に協力するか、作られるのを待つ形になるかと思います。
まだ、みんなのコードのプロダクトプログルではTSを用いていないのですが BlocklyがTSに部分対応したということで、次のプロダクトではTSを用いる方向で検討しています。
We Are Hiring!
最後に、みんなのコードでは、一緒にプログラミング教材「プログル」を開発してくれる方を募集しています。ご興味のある方は、以下のリンクからぜひご応募ください！
