（この記事は Node-RED の Advent Calendar 2025 の記事です）

はじめに

今回の記事の内容は、公式のフォーラムでの投稿で見かけた「Node-RED 5 Beta 1」に関する話です。それを直近の 4系と軽く比較してみたりしました。

フォーラムと、そこでの公式の投稿は、以下のとおりです。

●Latest News topics - Node-RED Forum
　https://discourse.nodered.org/c/news/9

インストール

Node-RED 5 Beta 1 を、以下のローカルインストールで試してみます。

npm install --unsafe-perm node-red@next

npm ls で確認してみたところ、「node-red@5.0.0-beta.1」がインストールされていました。

見比べみようと思った、直近の4系もインストールします。バージョンなど無指定の以下のインストールコマンドを使いました。

npm install node-red

インストールされたバージョンは、以下のとおり 4.1.2 です。

Node-RED 5 Beta 1 と同時起動できるよう、ポート番号をデフォルトからずらして起動することにします。

npx node-red -p 1881

先ほどインストールした Node-RED 5 Beta 1 を立ち上げてみます。ローカルインストールしたので、以下のコマンドで起動します。

npx node-red

そして、ブラウザで http://127.0.0.1:1880/ にアクセスすると、以下のページが表示されました。

その際、以下の 3つの説明が出てきました。

以下は、デフォルトのトップ画面です。

Node-RED 5 Beta と 4.1.2 を比べてみる前に、ここでいったん、Node-RED 5 Beta の新機能の情報を見てみます。

まず 1つ、「UX Modernization」というキーワードに関する大きな変更があり、エディタの使い勝手が変わっているようです。

実際の画面で確認してみると、以下のように「Node-RED 5 Beta 1（以下の 1つ目）」では、「直近の4系（以下の 2つ目）」で右に出ていたフローのエクスプローラーを左側に表示できるようになっています。

Node-RED 5.0 では、右側に一つしかなかったサイドバーを、左右2つに表示できるようになったようです。

それにより、例えばフローのエクスプローラーを開いて使いつつ、デバッグ情報を見るということもできるようです（デバッグ情報の表示は、デフォルト配置が変わっており、右側下段に出他状態になっているようです）。

また、左右のサイドバーの表示内容を変える操作方法が、「縦のボタンバーで選択」という形になったようです。

その他、中ボタンの操作でできたパンを、Space ＋左ドラッグでも行えるようになったり、他に画面下に以下が増えたりしているようです。

とりあえず、全てではないですが UI の変化を見てみました。別途、実際にフローを作ったりする中で、この違いを体験していければと思います。