Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Node-REDフローの静的解析ツール「Flow Linter」
Search
Kazuhito Yokoi
September 01, 2023
Technology
0
270
Node-REDフローの静的解析ツール「Flow Linter」
「Node-RED 影の薄い機能特集!」のイベントの登壇スライドです。
https://node-red.connpass.com/event/293534/
Kazuhito Yokoi
September 01, 2023
Tweet
Share
More Decks by Kazuhito Yokoi
See All by Kazuhito Yokoi
ローカルLLMを活用したコード生成と、ローコード開発ツールへの応用
kazuhitoyokoi
0
550
ストリートビューで思い出振り返りダッシュボードを作成
kazuhitoyokoi
0
130
Node-RED in Industrial IoT
kazuhitoyokoi
0
1k
Node-REDのフローファイルをGitLabで共有してみる
kazuhitoyokoi
2
630
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
280
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
170
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
200
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
210
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
Model Mondays S2E04: AI Developer Experiences
nitya
0
140
Featured
See All Featured
Code Review Best Practice
trishagee
69
18k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
GitHub's CSS Performance
jonrohan
1031
460k
KATA
mclloyd
30
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Six Lessons from altMBA
skipperchong
28
3.9k
Practical Orchestrator
shlominoach
189
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Optimizing for Happiness
mojombo
379
70k
Done Done
chrislema
184
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Transcript
フローの静的解析ツール「Flow Linter」 2023年8月31日 横井一仁 https://kazuhitoyokoi.github.io/flow-linter/ 1
自己紹介 横井 一仁 (よこい かずひと) Node-RED開発メンバ Node-RED User Group運営 日立製作所
ソリューションアーキテクト DX、Industry 4.0研修講師 2
最近のNode-RED関連の ニュース (1/2) GAIA-X 製造業サプライチェーンをつ なぐGAIA-XがNode-RED採用 Eclipse Foundationの管理下 でOSS開発を推進 NECさん
会社ブログでNode-RED v3.1への 貢献、イベント登壇について紹介 https://jpn.nec.com/oss/communit y/blog/node-red_v3.1.html 3
最近のNode-RED関連の ニュース (2/2) Node-RED Con 2023 11月にNTTコミュニーケーション ズでカンファレンスを開催 OpenJS World
China 2023 9月に上海でOpenJS Foundationのイベントを開催 Node-REDもセッション有 4
Flow Linterの紹介 5
フロー開発で生じる問題 個人開発での から、 大規模開発での まで色々 http-in、responseがペアでない フローにループが存在 ノード名にローカル言語を使用 functionノードの JavaScriptコードの記述が自由
-> これらの問題を避けて、 フローをサクサク開発したい 6
Flow Linterとは バグを生じる可能性があるフローの作成方法に対して警告を表示するツール フローエディタ上でリアルタイムに解析し、警告を表示 functionノードのJavaScriptコードの解析にはESLintを採用 InfoQのニュースでの紹介 7
インストール方法 $ cd ~/.node-red $ npm install nrlint フローエディタを開くと、右側に リントタブが追加される
フローの静的解析も有効となり、 警告時はノードの右上に「!」マ ークが表示される 8
標準で用意されているルール # ルール 説明 1 align-to-grid ノードの配置をワークスペースの格子に合わせる 2 max-flow-size フロー内のノードの上限数(デフォルト:
100個) 3 no-duplicate-http-in-urls http-inに設定したURLの重複を警告 4 no-loops フローのループを検出 5 no-overlapping-nodes ノードが重なりを検出 6 no-unconnected-http-nodes http-in、http responseがペアになっているか 7 no-unnamed-functions functionノードに名前が付けられているか 8 no-unnamed-links linkノードに名前が付けられているか 9
ユーザ設定の画面 ルールの無効/有効は、ユーザ設定 から設定可能 各ルールの詳細設定も可能 カスタムルールの場合、ユーザ設 定UIに独自UIを表示可 10
本格的な使い方 11
functionノード向けルール ESLintのルールを利用できる https://eslint.org/docs/latest/rules/ 12
カスタムルールを作成 標準ルール以外を用いたい場合は、 カスタムルールも作成可能 プラグイン化してnpmに公開する ことも可能 CLI版Flow Linterでも利用可能 https://github.com/kazuhitoyokoi/nrlint -plugin-rules-english-node-name.git 13
カスタムルールのコード 判定条件とメッセージを記載するだけでカスタムルールを実装できる module.exports = { "english-node-name": { meta: { type:
"suggestion", severity: "warn", docs: { description: " 全てのノードの名前を英語のみにする" // ユーザ設定に表示するメッセージ } }, create: function (context, ruleConfig) { return { "node": function (node) { if (!node.config.name.match(/^[ -~]*$/)) { // 判定条件 context.report({ location: [node.id], message: " ノード名は英数字、または記号である必要があります" // 警告メッセージ }) } } } } } }; 14
コマンドライン版Flow Linter フローの静的解析をコマンドラインで行う インストールと実行 $ npm install -g nrlint $
nrlint --init > .nrlintrc.js $ nrlint ~/.node-red/flows.json 15
設定ファイル「.nrlintrc.js」の内容 ルールを有効にしたい際は「true」、無効にしたい際は「"off"」を指定 module.exports = { "rules": { "align-to-grid": true, "max-flow-size":
true, "no-duplicate-http-in-urls": true, "no-loops": "off", // 無効 "no-overlapping-nodes": true, "no-unconnected-http-nodes": true, "no-unnamed-functions": true, "no-unnamed-links": true, } } 16
カスタムルールも動作 module.exports = { "plugins": [ "nrlint-plugin-rules-english-node-name" // 追加 ],
"rules": { "align-to-grid": true, "max-flow-size": true, "no-duplicate-http-in-urls": true, "no-loops": "off", "no-overlapping-nodes": true, "no-unconnected-http-nodes": true, "no-unnamed-functions": true, "no-unnamed-links": true, "english-node-name": true // 追加 } } 17
GitHub Actionsで 自動テスト GitHubにフローを置くタイミング で、自動的にFlow Linterを実行 開発プロジェクトにて、フローの 開発方法を事前定義 18
最後に 19
日本語化のPull Requestを出してみました https://github.com/node-red/nrlint/pull/40 20
書籍紹介 秋に発売予定の書籍で、 GitLab CIでの活用例を紹介予定 21