Node-RED 2.0の新機能: フローデバッガ

# Node-RED 2.0の新機能: フローデバッガ

株式会社日立製作所 
サービスコンピューティング研究部
西山博泰

## はじめに

[Node-RED](https://nodered.org/)はコーディングレスでプログラムを作成できるプログラミングツールです。このようなプログラミングはLow Code/No Codeプログラミングと呼ばれ、最近大きな注目を集めています。Node-REDは、IoT分野を筆頭に様々な分野で広く活用されているLow Codeプログラミングツールの一つです。

 Node-REDでは、ノードと呼ばれる機能ブロックををつなぎ合わせることで、とても簡単にプログラムを作成することができます。こういったノードには、乱数生成など簡単なユーティリティノードから、SNSからの情報収集、今流行りの機械学習を行うためのノードなど様々なノードが存在し、それらはOSSノードとして[多数公開](https://flows.nodered.org/)されています。

 2021年7月、Node-REDの最新版であるバージョン2.0がリリースされました。Node-RED 2.0では、アプリケーションの開発を容易化するさまざまな機能が新しく導入されました。一連の記事でNode-RED 2.0の新機能を紹介したいと思います。

 この記事では、そのうちフローのデバッグを支援するための機能であるフローデバッガを紹介します。

## フローデバッガ

Node-REDは使いやすいフローエディタを備えているため、プログラムの動作に不具合があった場合、フローの一部を修正して動作詳細の確認を容易に行うことができます。ただし、複雑なフローを修正しないで、その動作を確認したいというケースもあります。

フローデバッガは、他のプログラミング言語でのデバッガと同様に、Node-REDフローの実行を指定したポイントで停止し、処理状況を確認、実行を再開する機能を備えています。これにより、フローを修正しないでその詳細な動作を確認することができます。

![ブレークポイント_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/ac39c9a8-b383-bef1-52b1-84b2bd414626.png)

## インストール方法

Node-REDのフローデバッガは、Node-RED本体の基本機能ではなく、Node-RED 1.3で導入された[プラグイン機能](https://qiita.com/k-toumura/items/9131b4a7cbce66cc088b)を使った拡張機能です。ノードと同様に、追加インストール機能可能です。

フローデバッガのNode-REDへの機能追加方法は次の通りです。

1. エディタメニューの **パレットの管理** → **ノードを追加** から`node-red-debugger`を検索
  
2. 「**ノードを追加**」ボタンで機能を追加します。

    ![インストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/7209db87-c53e-b844-5bcf-57a32af5917b.png)

3. Node-REDを再起動します。
  
4. フローエディタ右のサイドバータブに「**フローデバッガ**」が追加されていることを確認します。
  
    ![メニュー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/0058c57e-bba5-7ecd-e296-c2c4b5d78600.png)

## 利用方法

サイドバーから「フローデバッガ」を選択すると、次のようなタブが表示されます。
左上のスイッチが初期状態では「**無効**」となっているので、フローデバッガの機能を利用する場合には「**有効**」に変更します。

![デバッガパネル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/608c5630-322d-54a7-b913-7dcb920f171f.png)

- **ブレークポイントの設定**
  
    フローデバッガを有効にしている場合、ノードの入出力ポートにブレークポイントを設定することができます。ブレークポイントの設定は、ノードの入出力メッセージポートにマウスを重ねると、薄い水色の角丸矩形が表示されます。
  
![ブレークポイント_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/ad52e0e6-fde4-e537-d53b-de7f8eef78bb.png)

マウスをクリックすると、ポート上の矩形が濃い水色に変化し、ポートにブレークポイントが設定されます。

![ブレークポイント_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/fb6985d2-5c25-ddb0-73e6-d452fbbe697c.png)

現在設定されているブレークポイントのリストは「デバッガ」サイドバーに表示されます。このリストからブレークポイントの有効/無効の切り替え、削除を行うことができます。ブレークポイントとして指定されたにメッセージが到達すると、「デバッグ」サイドバーにメッセージの内容が表示されます。

![ブレークポイント_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/6c0854bc-8dc7-faee-649c-e178b09ea526.png)

停止メッセージの右、もしくは、サイドバーの上部に表示されるボタンを押すことで停止したフロー実行の再開・ステップ実行を行うことができます。

![ステップ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/8cf982b3-4849-008c-7ab1-e42c62767fd0.png)

- **実行中フローの停止**
  
  「デバッグ」サイドバーの上部のストップボタンを押すと、実行中のフローを停止することができます。
  
![stopボタン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/6b9dcfaf-2498-f411-4bd5-d41b261cf766.png)
  
  停止したフローは、ブレークポイントで停止した場合と同様に、実行再開・ステップ実行を行うことができます。
  
  なお、フロー中の各ノードは完全に停止しているわけではなく、ノード間のメッセージの送受信が停止した状態です。そのため、Injectノードの繰返し指定など、定期的なメッセージ出力を行うノードは、出力ポートにメッセージが蓄積されることになります。

## デバッグの例

具体的な例を用いてフローデバッガを用いたデバッグの過程を紹介します。

ここでは、入力メッセージプロパティの加算を行う簡単なフローを例として用います。

![example_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/0d1c55f4-1d29-b689-7207-5823b19489fa.png)

以下は、加算対象の入力メッセージを出力するInjectノードの設定です。

![example_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/50d69380-247c-1986-b565-634354295361.png)

changeノードはJSONata式を用いてペイロードのxプロパティとyプロパティを加算した結果を出力します。

![example_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/e3685a1c-edc2-bfda-3be9-6f178f7ffbfe.png)

このフローを実行してみると、debugノードの出力は次のように`undefined`となります。

![example_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/897c5d30-0b24-9a74-8b7c-954a239a4174.png)

確認のため、フローデバッガを用いて、changeノードの入力ポートにブレークポイントを設定し、フローを実行します。

![example_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/074f1063-c994-8724-396a-5574d25266ca.png)

入力メッセージを確認すると、`payload`の値がオブジェクトではなく文字列となっていることがわかります。Injectノードの設定で`payload`の値がJSONオブジェクトではなく文字列となっているため、JSONオブジェクトに変更します。

![example_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/3fd9be99-1d2f-1679-ed7d-9924ab93762b.png)

フローを再実行すると、期待する値`100`が出力されます。

![example_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546217/3245b513-6a54-a93b-3950-723860a2b97b.png)

## おわりに

この記事ではNode-RED 2.0の新機能として「フローデバッガ」を紹介しました。フローデバッガは基本的なデバッグ機能をNode-REDに加えるものですが、Node-REDエディタの使い勝手の良さに加えてデバッグ機能がサポートされることで、フローの作成がさらに容易になることが期待されます。

## Node-RED 2.0の新機能紹介

- [Node-RED 2.0の新機能: 概要紹介](https://qiita.com/HiroyasuNishiyama/items/ff8f44cec8c6ffb4f525)
- [Node-RED 2.0の新機能: フローデバッガ](https://qiita.com/HiroyasuNishiyama/items/5a416762fb0024b7e403)
- [Node-RED 2.0の新機能: Flow Linter](https://qiita.com/k-toumura/items/37f23c9fe43fe16453bb)

*Node-RED: Node-REDは，OpenJS Foundationの米国およびその他の国における登録商標または商標である。*
*JavaScript: JavaScriptは、Oracleの米国およびその他の国における登録商標または商標である。*