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
250
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
140
ストリートビューで思い出振り返りダッシュボードを作成
kazuhitoyokoi
0
110
Node-RED in Industrial IoT
kazuhitoyokoi
0
960
Node-REDのフローファイルをGitLabで共有してみる
kazuhitoyokoi
2
570
Other Decks in Technology
See All in Technology
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
400
30分でわかる『アジャイルデータモデリング』
hanon52_
10
2.9k
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
1.1k
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
370
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
370
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
160
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
880
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
350
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
150
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.6k
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
520
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
1
1.4k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
It's Worth the Effort
3n
184
28k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Bash Introduction
62gerente
611
210k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
YesSQL, Process and Tooling at Scale
rocio
172
14k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
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