Node-REDをv1.0にすると動かなくなるノード (htmlグローバル汚染編)

前置き

釣りなタイトルでスミマセン。

シリーズ化するかしないかはまだ決めていませんが、今後も地雷を踏むようであればまた書こうと思いますので、今回はhtmlグローバル汚染編と付けました。

Node-REDのv1.0が2019/09/30に出ました。いくつかの大きな変更があり、外観もさることながら内部の処理も変更になっています。既に公開されている多くのカスタムノードはv1.0未満で動作するよう書かれていますが、v1.0にすると動かなくなることもあると思います。このシリーズのエントリーでは、それがどういう現象なのか、どうして起こったのか、どう実装すれば良いのか、などを書いていきたいと思います。（前置き長っ）

現象 (不具合の内容)

インストール済のカスタムノードのうち、これに該当するものは、パレットに出現しなくなる。下記の画像はcustomカテゴリにカスタムノードをyour node 1, your node 2, your node 3の3種類を定義して再現させた図です。

f:id:ryoichi0102:20200207204728p:plain — 表示されるはずのカスタムノードがパレットに表示されない

f:id:ryoichi0102:20200207204922p:plain — v0.20系だとちゃんと表示されています

原因や発生条件

htmlファイルのscriptブロックにおいて、RED.nodes.registerType()以外に、何かしらの定義がconstで行われており、その名称が他のノードの命名と被っている場合。

f:id:ryoichi0102:20200207205023p:plain — グローバルにconst定義して命名が被った場合の例

対応

各カスタムノードのスクリプトは、無名関数内で実行されるようにする。

<script type="text/javascript">
    // グローバル名前空間の汚染を避ける
    (() => {
        // ここにいつも書いている処理を書く.

        // oneditprepareやoneditsaveなどで呼び出されるような
        // 共通のfunction定義.
        const yourCommonFunctionFromCustomNode = () => {
            // 何かしらの処理.
        };

        // カスタムノードの定義.
        RED.nodes.registerType('your-custom-node', {
            // category: '',
            // ...
            // (略)
        });
    })();
</script>