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
280
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
650
ストリートビューで思い出振り返りダッシュボードを作成
kazuhitoyokoi
0
130
Node-RED in Industrial IoT
kazuhitoyokoi
0
1k
Node-REDのフローファイルをGitLabで共有してみる
kazuhitoyokoi
2
660
Other Decks in Technology
See All in Technology
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
19
9.1k
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
160
Flutterでキャッチしないエラーはどこに行く
taiju59
0
220
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
110
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
230
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
200
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
9k
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
420
Agile PBL at New Grads Trainings
kawaguti
PRO
1
300
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
サンドボックス技術でAI利活用を促進する
koh_naga
0
190
2025年になってもまだMySQLが好き
yoku0825
8
4.1k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Typedesign – Prime Four
hannesfritz
42
2.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Building Adaptive Systems
keathley
43
2.7k
Become a Pro
speakerdeck
PRO
29
5.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Experiences People Love
moore
142
24k
We Have a Design System, Now What?
morganepeng
53
7.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
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