kyoncyの日記

Blocklyが公式にnpmを公開した

October 18, 2019

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を用いる方向で検討しています。


きょんしー

新卒1年目のWEBエンジニア きょんしーです。みんなのコードで働いてます。Twitter, Facebookは適当に。React, Blockly, Pythonが好き。Typescriptがっつり書きたいので機会模索中。普段はNightcoreを聞きながら仕事。土日はReact開発したり、技術書や啓発本やキャリアの本とか読んでます。開発することに飢えてて、ブログ書くよりレイアウト変えてる。経歴とかはWantedlyに記載。