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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. JSONata よく使っています
   

   View Slide

6. いくつか事例を紹介
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. function ノード
    

    View Slide

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

    View Slide

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

    View Slide

17. デモしてみる
    

    View Slide

18. change ノード＋JSONata
    

    View Slide

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

    View Slide

20. デモしてみる
    

    View Slide

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

    View Slide

22. 鍛え方とか、便利 TIPS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. デモしてみる
    

    View Slide

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

    View Slide

30. デモしてみる
    

    View Slide

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

    View Slide

32. デモしてみる
    

    View Slide

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

    View Slide

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

    View Slide