Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Node-RED Park Vol.3

Node-RED Park Vol.3

Node-RED Park Vol.3「私の JSONata を使う事例紹介」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます!

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

1ft-seabass

January 13, 2022
Tweet

More Decks by 1ft-seabass

Other Decks in Technology

Transcript

  1. Node-RED Park Vol.3 - JSONataについて語ろう
    私の JSONata を使う事例紹介
    ワンフットシーバス 田中正吾

    View full-size slide

  2. 私の話はスライドを後ほど共有します。
    話す内容に注力いただいて大丈夫です!

    View full-size slide

  3. 田中正吾(たなかせいご)
    屋号:ワンフットシーバス
    2004年よりフリーランス。以後、FLASH制作を
    中心にインタラクティブコンテンツを主に行い現
    在に至る。
    最近ではWEBフロントエンドをベースにしなが
    らも、情報とインターフェースが合わさるアプ
    ローチという視点でIoTやMixed Realityといった
    技術も取り入れながら活動しています。

    View full-size slide

  4. まず、気をつけていきたい発音
    じぇーそねーたーって言いがち。じぇーそなたらしい。
    https://www.youtube.com/watch?v=ZBaK40rtIBM

    View full-size slide

  5. JSONata よく使っています

    View full-size slide

  6. いくつか事例を紹介

    View full-size slide

  7. 毎年の年末に振り返る記事2020の事例
    https://www.1ft-seabass.jp/memo/2020/12/31/look-back-over-2020/

    View full-size slide

  8. 2021 だとちょっと別の仕組み
    https://www.1ft-seabass.jp/memo/2021/12/31/look-back-over-2021/

    View full-size slide

  9. Node-RED の JSONata で
    月の初日と最終日を取得するメモ
    https://www.1ft-seabass.jp/memo/2021/12/25/node-red-jsonata-firstday-lastday-span/

    View full-size slide

  10. 日付関連の扱いはやはり強いと思います!
    Node-RED の JSONata で日付と時間をうまく扱える Tips
    https://qiita.com/tseigo/items/e7deb8d6d4902a4aef30

    View full-size slide

  11. こんなデータで JSONata や他の扱い方をしてみる
    タスクを想像させるようなデータ。詳細を見てみましょう。

    View full-size slide

  12. Node-REDにこのデータを入れる

    View full-size slide

  13. テーマは「Priority high だけ取得」

    View full-size slide

  14. function ノード

    View full-size slide

  15. JavaScript で組めるので頑張ればイケるが
    それなりにコードを書くことになる
    自由度も高いが時間もかかる。Array.filterやreduseがハマれば、より簡単にかける場合も。

    View full-size slide

  16. JavaScript Array 関数まわりも強力なので
    併用していくもの良いなと思います
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

    View full-size slide

  17. デモしてみる

    View full-size slide

  18. change ノード+JSONata

    View full-size slide

  19. change ノードで JSONata クエリを通して
    先ほどと同様の処理がイケる

    View full-size slide

  20. デモしてみる

    View full-size slide

  21. 複雑な JSON データから
    (クセはあるが)手軽にデータが取得できる

    View full-size slide

  22. 鍛え方とか、便利 TIPS

    View full-size slide

  23. やはり本家ドキュメントは分かりやすい
    英語だけど大体伝わる。ちょっと見てみましょう。
    https://jsonata.org/

    View full-size slide

  24. クエリ試すときは JSONata Exerciser おススメ
    本家サイトで試せる https://try.jsonata.org/

    View full-size slide

  25. さきほどのもこんな風に試せる

    View full-size slide

  26. いくつか便利クエリ紹介

    View full-size slide

  27. TimeEstimate 値を合計
    $sum(*.TimeEstimate)

    View full-size slide

  28. デモしてみる

    View full-size slide

  29. Tags に private が含まれる
    *[$contains(Tags,"private")]

    View full-size slide

  30. デモしてみる

    View full-size slide

  31. Tags に private が含まれる+TimeEstimate 合計
    $sum(*[$contains(Tags,"private")].TimeEstimate)

    View full-size slide

  32. デモしてみる

    View full-size slide

  33. debug ノードでも JSONata 使える Tips

    View full-size slide

  34. ➔ 複雑な JSON データから JavaScript でループや分岐を駆
    使しがちなものが手軽に取れるようになる!
    ➔ 合計や平均値など SQL にあるような集計関数も使えて
    データの再加工はしやすい!
    ➔ 日付にも強く ISO 8601 フォーマットやタイムスタンプの
    相互変換もしやすく、時差についても考慮がある!
    ➔ JSONata のドキュメントがしっかりあり、自分のデータ
    で試しながら鍛えられる!
    ➔ クセはあるが Node-RED で JSONata を覚えると色々と強
    力な処理ができるので、ぜひ使ってみてください!
    まとめ

    View full-size slide