　本記事は「Node-REDのGit機能を学ぶハンズオン(第1回)」で紹介した内容です。

　前の記事では、1つのNode-RED環境で複数のフローを切り替える方法を紹介しました。

本記事では、1つのフローに焦点を当てて、フローの変更履歴の記録方法について紹介します。

一般的なコード開発で「Git」を利用する際は、Gitのコマンド操作かVisual Studio Codeなどの開発環境の習得が必要でしょう。一方、Node-REDではフローエディタ上で操作ができるため、「Git」に詳しくない開発者にとっても簡単です。

フロー開発での問題

　もし、Git機能が有効化されていないデフォルトの「Node-RED環境」を使い続けた場合、以下の問題に遭遇することがあるでしょう。

[問題1] フローを元に戻すことができない

　Node-REDではデプロイボタンを押すと、前に動いていたフローは失われます。何らかの問題が発生した際に、以前上手く動いていたフローに戻したくなっても、一度ブラウザを閉じてしまうと、[Ctrl]+[z]キーで以前の状態に戻すことはできません。

[問題2] フローファイルの手動バックアップ

　問題1のような事態を避けるため、フローをダウンロードしてファイルとして保存しているフロー開発者もいます。しかし、変更理由と合わせてファイル名で管理することは大変です。

[問題3] フローを変更するリスク大

　Node-REDはアプリを迅速に開発できる環境であるため、フローを気軽に変更できるのが理想ですが、いったんフローが本番環境で正しく動作すると、誰もフローを変更したがらなくなります。大規模なシステムのため、修正リスクに重圧を感じるフロー開発者を見かけることもあります。

　変更履歴の機能によって、フロー開発者はこれらの問題から解放されます。本機能は、一般的なコード開発と同様に「Git」用いて変更履歴の記録を行なうものです。開発者はフローに対して変更内容のメッセージとともに、「コミット」（変更の記録）を作ることで、フローのスナップショットを変更履歴に保存できます。また、フロー開発者は必要に応じて変更履歴からフローを復元することもできます。

フローの変更履歴を記録

　ここからフローの変更履歴を記録する機能を試すため、シンプルなフローを例として用いて解説します。

[1] 新規プロジェクトを作成

　まず新規のプロジェクトを作成します。フローエディタ右上のプロジェクトのメニューから「新規」を選択します。

次の様にダイアログに必要な情報入力して、新規プロジェクトを作成します。

[2] 最初のフローを作成

　まずinjectノードとdebugノードからなる、最もシンプルな日時の情報を出力する初期フローを作ります。

[4] フローをデプロイ

　ここで忘れずに右上のデプロイボタンを押して、フローをサーバ側へ反映させます。

[5] 変更履歴に記録するファイルを選択

　次に変更履歴の「コミット」を作るため、変更を記録したいファイルの状態をステージングに変更します。

　履歴タブの「ローカルファイル」内にある、「flows.json」の右の「+」ボタンをクリックします。すると、フローファイルが「コミットする変更」内に移動し、変更履歴を作成する準備が整います。

[6]「変更内容」付きでフローを記録

　「コミット対象とする変更」の右にある「コミット」ボタンをクリックします。すると下にテキストエリアが表示され変更内容を入力できるようになります。

　例として、ここに「はじめてのフロー」と入力しました。テキストエリア下の「コミット」ボタンをクリックすると、変更履歴に記録されます。

[7] フローの変更履歴を表示

「コミット履歴」を開くと、変更履歴に「はじめてのフロー」が追加されていることが分かります。

[8] フローを編集

　次にフローの変更例として、2つのノードの間にtemplateノードを追加します。

　忘れずにデプロイボタンを押してフローをサーバ側に反映させましょう。このフローは、実行するとtemplateノードにデフォルトで記載されているメッセージを用いて「This is the payload: <タイムスタンプ> !」という文字列をデバックタブに出力します。

「変更を戻す」ボタンからフローを元に戻す

　もし、変更したフローで問題が発生した場合、「はじめてのフロー」という名前を付けて変更履歴を作成した、以前のフローに戻したいと思うでしょう。フローを戻すには、「ローカルの変更」内の「ローカルファイル」にある対象ファイルの矢印ボタンをクリックするだけです。

　このボタンをクリックすると、本当に前のフローに戻して良いか確認するダイアログが表示されるため、「変更を戻す」ボタンをクリックします。

　するとフローエディタに以前のフローが表示されます。「はじめてのフロー」という名前を付けて変更履歴に記録した、フローを復元することができました。

　変更履歴は永続的なファイルシステムに保存されているため、フロー開発者はもしブラウザを閉じたり、再読み込みしたりしたあとでも、フローを復旧できます。

　次に、変更履歴の差分について説明するため、再度templateノードを追加してフローを作成してください。

最後にデプロイボタンを押して、フローを反映させます。

変更の差分を表示

フローの差分表示

履歴タブで変更履歴やファイルをダブルクリックすると、フローの変更の差分を表示できます。

　接続先が変更されたinjectノードには「変更」、新規追加されたtemplateノードには「追加」の注釈がついています。

　ノードの各プロパティを確認したい場合は、要素を展開することもできます。

行単位の差分表示

　複数行のコードを書いたtemplateノードやfunctionノードの場合は、行単位の差分を確認することも可能です。試しに、templateノードの2行目に「Hello World!」を追加してみましょう。

これまでの同様の方法で、flows.jsonを記録対象として追加します。

次に「temaplateノートを追加したフロー」という名前をつけて、フローを変更履歴に記録しました。

templateノードを開き、末尾に「Hello World!」を追加します。

　次に、履歴タブの「ローカルの変更」内の「ローカルファイル」にあるflows.jsonをダブルクリックします。すると、差分を表示する画面にて、templateの右側に「変更を比較」という吹き出しを持つボタンがあることが分かります。

　このボタンをクリックすると、次の様にtemplateノード内の行単位の差分が表示されます。新規に追加した「Hello World!」の行が緑色でハイライト表示されています。もし行の削除や修正をした場合は、左側の行が赤色でハイライトされます。

　この行単位の差分表示は、特に行数が多くなってしまったfunctionノードのJavaScriptコードの変更内容を確認する際に便利です。

「Gitコマンド」でフローを復元

　もし直前の変更よりもさらに過去に戻したい場合は、手動のコマンド操作が必要です。

[1] コミットIDを取得

　まず、履歴タブの中のコミット履歴から「コミットID」を取得します。コミットIDとは、フローの変更履歴内にある「7834c70」や「5fdee7a」のような英数字です。

[2] フローが格納されているフォルダへ移動

　次に、ターミナルを開いて、以下の様に「cd」コマンドでプロジェクト関連のファイルが格納されているフォルダに移動します。

cd C:¥Users¥<ユーザー名>¥.node-red¥projects¥<プロジェクト名>

macOSやLinuxの場合は、「cd ~/.node-red/projects」と入力してください。

[3] git resetコマンドを実行

最後に、--hardオプションにコミットIDを指定して「git reset」コマンドを実行します。

git reset --hard <コミットID>

[4] Node-REDを再起動

　Node-REDを再起動して、ブラウザも再読み込みすると、「コミットID」で指定したフローが反映されていることを確認できるでしょう。

変更履歴を自動的に記録する設定

　フロー開発者が作業に集中していると、変更履歴を作り忘れてしまうことがあります。この場合、作りかけのフローが壊れたときに復旧できなくなってしまいます。このような事態を避けるため、Node-REDには変更履歴を自動的に追加する便利な機能があります。本機能を有効にするには、フローエディタのメニューから「パレット管理」を選択し、ユーザー設定の「Git設定」タブを開きます。

　ここで、「ワークフロー設定」を「手動」から「自動」に切り替えます。本設定によって、「デプロイ」ボタンをクリックするたびに、バックグラウンドで変更履歴が自動的に作られるようになります。

　本記事ではGit機能を利用したフローの変更履歴について紹介しました。変更履歴を用いることで、開発者はフローをより効率的に管理でき、安心して変更を行なえるようになるでしょう。