(この記事は 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 available - News - Node-RED Forum
https://discourse.nodered.org/t/node-red-5-beta-1-available/99937/5
インストール
Node-RED 5 Beta 1 のインストール
Node-RED 5 Beta 1 を、以下のローカルインストールで試してみます。
npm install --unsafe-perm node-red@next
npm ls で確認してみたところ、「node-red@5.0.0-beta.1」がインストールされていました。
直近の4系のインストール
見比べみようと思った、直近の4系もインストールします。バージョンなど無指定の以下のインストールコマンドを使いました。
npm install node-red
インストールされたバージョンは、以下のとおり 4.1.2 です。
Node-RED 5 Beta 1 と同時起動できるよう、ポート番号をデフォルトからずらして起動することにします。
npx node-red -p 1881
Node-RED 5 Beta 1 の画面を少し見てみる
先ほどインストールした Node-RED 5 Beta 1 を立ち上げてみます。ローカルインストールしたので、以下のコマンドで起動します。
npx node-red
そして、ブラウザで http://127.0.0.1:1880/ にアクセスすると、以下のページが表示されました。
初回アクセス時の表示
その際、以下の 3つの説明が出てきました。
デフォルトのトップ画面
以下は、デフォルトのトップ画面です。
Node-RED 5 Beta の新機能の情報を見てみる
Node-RED 5 Beta と 4.1.2 を比べてみる前に、ここでいったん、Node-RED 5 Beta の新機能の情報を見てみます。
●The path to Node-RED 5.0 : Node-RED
https://nodered.org/blog/2025/12/03/node-red-roadmap-to-5
- 🎉 Node-RED 5 beta.0 released - News - Node-RED Forum
- 🎉 Node-RED 5 Beta 1 available - News - Node-RED Forum
エディタ周りの変更
まず 1つ、「UX Modernization」というキーワードに関する大きな変更があり、エディタの使い勝手が変わっているようです。
実際の画面で確認してみる
実際の画面で確認してみると、以下のように「Node-RED 5 Beta 1(以下の 1つ目)」では、「直近の4系(以下の 2つ目)」で右に出ていたフローのエクスプローラーを左側に表示できるようになっています。
Node-RED 5.0 では、右側に一つしかなかったサイドバーを、左右2つに表示できるようになったようです。
それにより、例えばフローのエクスプローラーを開いて使いつつ、デバッグ情報を見るということもできるようです(デバッグ情報の表示は、デフォルト配置が変わっており、右側下段に出他状態になっているようです)。
また、左右のサイドバーの表示内容を変える操作方法が、「縦のボタンバーで選択」という形になったようです。
その他、中ボタンの操作でできたパンを、Space + 左ドラッグでも行えるようになったり、他に画面下に以下が増えたりしているようです。
とりあえず、全てではないですが UI の変化を見てみました。別途、実際にフローを作ったりする中で、この違いを体験していければと思います。










