📝 Node-RED Comment ノードガイド

📚 目次

📖 1. 概要

Comment ノードは、フロー内にコメントやメモを残すためのノードです。プログラムのソースコードにコメントを書くのと同じように、フローの説明、注意事項、TODOなどを記録できます。

📚 本のしおりや付箋に例えると:Comment ノードは本に貼る付箋のようなものです。本文(フローの処理)には影響を与えませんが、読む人に重要な情報を伝えます。

📝 コメント (他のノードと接続しない独立したノード)

💡 ポイント:

⚙️ 2. 設定詳細

プロパティ説明デフォルト
名前コメントのタイトル(フロー上に表示)(空)
Info詳細なコメント内容(Markdown対応)(空)

Info フィールドの Markdown 記法

# 見出し1 ## 見出し2 **太字** と *斜体* - 箇条書き 1. 番号付きリスト `コード` や ```コードブロック```

🔧 3. 実用的な使用パターン

パターン1: フローの説明

📝 センサーデータ処理フロー

ポイント: フロー全体の目的や概要を記述します。

パターン2: セクション区切り

━━━ データ検証 ━━━

ポイント: 処理ブロックの区切りとして使用します。

パターン3: TODO管理

📋 TODO: エラーハンドリング追加

パターン4: 警告・注意

⚠️ 本番環境では要修正

📥 4. サンプルフロー

📥 サンプルフローJSON(クリックで展開)
[ { "id": "comment_sample_tab", "type": "tab", "label": "Comment サンプル", "disabled": false, "info": "" }, { "id": "comment_overview", "type": "comment", "z": "comment_sample_tab", "name": "📚 フロー概要", "info": "# センサーデータ処理フロー\n\n## 目的\nセンサーからのデータを監視し、\n閾値チェックを行います。\n\n## 作成者\n- 開発者: Node-RED学習者\n- 作成日: 2024/01/15", "x": 140, "y": 60, "wires": [] }, { "id": "comment_section1", "type": "comment", "z": "comment_sample_tab", "name": "━━━ 入力セクション ━━━", "info": "センサーデータの模擬入力", "x": 170, "y": 120, "wires": [] }, { "id": "inject_sensor", "type": "inject", "z": "comment_sample_tab", "name": "センサーデータ", "props": [{"p": "payload"}], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "{\"temperature\": 28.5}", "payloadType": "json", "x": 160, "y": 180, "wires": [["debug_output"]] }, { "id": "comment_todo", "type": "comment", "z": "comment_sample_tab", "name": "📋 TODO: 閾値チェック追加", "info": "温度が30度以上でアラートを出す機能を追加予定", "x": 440, "y": 120, "wires": [] }, { "id": "debug_output", "type": "debug", "z": "comment_sample_tab", "name": "結果表示", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "x": 370, "y": 180, "wires": [] } ]

📝 5. 演習問題

演習1: 基本的なコメント追加 初級

📋 課題: Inject → Debug のフローを作成し、フローの説明コメントを追加してください。

✅ 成功の条件:

💡 ヒント

フローの左上にCommentノードを配置すると見やすくなります。

✅ 解答例フロー
[ {"id": "ex1_tab", "type": "tab", "label": "演習1"}, {"id": "ex1_comment", "type": "comment", "z": "ex1_tab", "name": "📚 テストフロー", "info": "メッセージ送信のテスト", "x": 140, "y": 60, "wires": []}, {"id": "ex1_inject", "type": "inject", "z": "ex1_tab", "name": "送信", "props": [{"p": "payload"}], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "Hello!", "payloadType": "str", "x": 130, "y": 120, "wires": [["ex1_debug"]]}, {"id": "ex1_debug", "type": "debug", "z": "ex1_tab", "name": "表示", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "x": 290, "y": 120, "wires": []} ]

演習2: セクション分けコメント 初級

📋 課題: 複数のセクションを持つフローを作成し、各セクションにコメントを追加してください。

✅ 成功の条件:

💡 ヒント

「━━━ セクション名 ━━━」のような区切り線を使うと視認性が向上します。

✅ 解答例フロー
[ {"id": "ex2_tab", "type": "tab", "label": "演習2"}, {"id": "ex2_c1", "type": "comment", "z": "ex2_tab", "name": "━━━ 入力 ━━━", "info": "", "x": 140, "y": 60, "wires": []}, {"id": "ex2_inject", "type": "inject", "z": "ex2_tab", "name": "入力", "props": [{"p": "payload"}], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "test", "payloadType": "str", "x": 130, "y": 100, "wires": [["ex2_change"]]}, {"id": "ex2_c2", "type": "comment", "z": "ex2_tab", "name": "━━━ 処理 ━━━", "info": "", "x": 140, "y": 160, "wires": []}, {"id": "ex2_change", "type": "change", "z": "ex2_tab", "name": "加工", "rules": [{"t": "set", "p": "payload", "pt": "msg", "to": "\"処理済: \" & payload", "tot": "jsonata"}], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 130, "y": 200, "wires": [["ex2_debug"]]}, {"id": "ex2_c3", "type": "comment", "z": "ex2_tab", "name": "━━━ 出力 ━━━", "info": "", "x": 140, "y": 260, "wires": []}, {"id": "ex2_debug", "type": "debug", "z": "ex2_tab", "name": "出力", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "x": 130, "y": 300, "wires": []} ]

演習3: Markdown活用 中級

📋 課題: Markdownを使って、構造化されたドキュメントをCommentノードに作成してください。

✅ 成功の条件:

💡 ヒント

見出し、箇条書き、番号付きリストを組み合わせて使いましょう。

✅ 解答例フロー
[ {"id": "ex3_tab", "type": "tab", "label": "演習3"}, {"id": "ex3_comment", "type": "comment", "z": "ex3_tab", "name": "📖 システム仕様書", "info": "# IoT監視システム\n\n## 概要\nセンサーデータを収集・監視するシステム\n\n## 機能一覧\n1. データ収集\n2. 閾値監視\n3. アラート通知\n\n## 注意事項\n- 本番環境では認証を有効化\n- ログレベルを適切に設定", "x": 160, "y": 80, "wires": []} ]

演習4: プロジェクト管理 中級

📋 課題: TODO、バージョン履歴、警告を含むコメント体系を作成してください。

✅ 成功の条件:

💡 ヒント

絵文字(📚 📋 ⚠️ 📌)を使って種類を区別しましょう。

✅ 解答例フロー
[ {"id": "ex4_tab", "type": "tab", "label": "演習4"}, {"id": "ex4_c1", "type": "comment", "z": "ex4_tab", "name": "📚 顧客管理 v1.0", "info": "# 顧客管理システム\n作成日: 2024/01/15", "x": 160, "y": 60, "wires": []}, {"id": "ex4_c2", "type": "comment", "z": "ex4_tab", "name": "📋 TODO", "info": "- [ ] バリデーション追加\n- [ ] 通知機能", "x": 120, "y": 120, "wires": []}, {"id": "ex4_c3", "type": "comment", "z": "ex4_tab", "name": "⚠️ 注意", "info": "本番環境では環境変数を使用", "x": 120, "y": 180, "wires": []}, {"id": "ex4_c4", "type": "comment", "z": "ex4_tab", "name": "📌 変更履歴", "info": "## v1.0 (2024/01/15)\n- 初回リリース", "x": 130, "y": 240, "wires": []} ]

✅ 6. まとめ

🎯 重要ポイント:

⚠️ 注意事項:

🔧 7. ベストプラクティス

種類配置場所内容
フロー概要左上目的、作成者、バージョン
セクション区切り各処理ブロックの上セクションの役割
TODO関連ノードの近く未実装機能
警告注意が必要な箇所注意事項

🏭 8. 実務活用例

ケース1: チーム開発

担当者、連絡先、変更履歴を明記してスムーズな引き継ぎを実現。

ケース2: IoTシステム運用

センサー接続情報、閾値設定、トラブルシューティング手順を記載。

ケース3: プロトタイプ記録

実験結果や今後の改善点を記録。

ケース4: コードレビュー

処理の意図や設計判断の理由を記載してレビューを円滑化。

📚 Node-RED 公式ドキュメント

🏠