$30 off During Our Annual Pro Sale. View Details »

jsx-slack: React ⾵ Block Kit

jsx-slack: React ⾵ Block Kit

Yuki Hattori

July 25, 2019
Tweet

More Decks by Yuki Hattori

Other Decks in Technology

Transcript

  1. jsx-slack: React ⾵ Block Kit
    Yuki Hattori | Speee, Inc
    Slack Dev Meetup Tokyo #1
    2019-07-25
    2019-07-25

    View Slide

  2. 服部 雄輝
    @株式会社 Speee
    OSS, Frontend
    yhatt
    y_hatt
    2
    2

    View Slide

  3. Block Kit 開発あるある
    凝ったメッセージの JSON が複雑・冗⻑になりがち
    プログラムで動的に⽣成するとよけい複雑に
    後から⾒返した時、構造がわからなくなる
    マークダウン ( mrkdwn
    ) 記号のゲシュタルト崩壊
    `_*${foo}* ${bar}_`
    3
    3

    View Slide

  4. Slack のメッセージをもっとメンテナブルにして
    開発体験を改善したい!
    4
    4

    View Slide

  5. 5
    5

    View Slide

  6. Slack Block Kit のメッセージをよりメンテナブルにする jsx-slack のご紹介
    https://tech.speee.jp/entry/2019/04/23/094015
    6
    6

    View Slide

  7. Block Kit as component
    JSX でコンポーネントを扱うように Block Kit を使える
    7
    7

    View Slide


  8. *@speee-js/jsx-slack*


    Maintained by

    Speee, Inc.




    5
    4
    3
    2
    1


    8
    8

    View Slide

  9. 9
    9

    View Slide

  10. 10
    10

    View Slide

  11. JSX vs JSON
    19⾏ vs 94⾏
    ⾒返しても構造がすぐ分かる
    11
    11

    View Slide

  12. HTML-like formatting
    HTML 要素でメッセージをフォーマット
    12
    12

    View Slide





  13. @speee-js/jsx-slack



    Build JSON for Slack Block Kit from JSX



    Block Kit as component

    Building your blocks as component.



    HTML-like formatting

    Keep a readability by using well-known elements.






    13
    13

    View Slide

  14. 14
    14

    View Slide

  15. デモでお試しください
    デモでお試しください
    https://speee-jsx-slack.netlify.com/
    https://speee-jsx-slack.netlify.com/
    15
    15

    View Slide

  16. インストール
    npm install --save @speee-js/jsx-slack
    16
    16

    View Slide

  17. 例: Bolt + jsx-slack
    const { App } = require('@slack/bolt')
    const { jsxslack } = require('@speee-js/jsx-slack')
    const app = new App({ /* ...set tokens... */ })
    app.message('hi', ({ message, say }) => {
    say({
    blocks: jsxslack`


    Hello, !


    `
    })
    }) 17
    17

    View Slide

  18. JSX transpiler 使⽤時 (Babel, TypeScript など)
    /** @jsx JSXSlack.h */
    import { App } from '@slack/bolt'
    import JSXSlack, { Blocks, Section } from '@speee-js/jsx-slack'
    app.message('hi', ({ message, say }) => {
    say({
    blocks: JSXSlack(


    Hello, !


    )
    })
    })
    18
    18

    View Slide

  19. 応⽤編: カスタムブロックを定義する
    https://codesandbox.io/s/jsx-slack-labs-og7sv
    /** @jsx JSXSlack.h */
    import JSXSlack, { Section, Divider, Fragment } from '@speee-js/jsx-slack'
    const Header: = ({ children }) => (


    {children}



    )

    jsx-slack labs (Custom blocks)
    Loading spinner

    Completed 5 of 20 tasks

    19
    19

    View Slide

  20. 詳しい使い⽅は GitHub で
    https://github.com/speee/jsx-slack
    20
    20

    View Slide

  21. jsx-slack で
    リッチな Slack メッセージの
    Developer experience を
    向上させましょう
    21
    21

    View Slide

  22. 参考資料
    Slack Block Kit のメッセージをよりメンテナブルにする jsx-slack のご紹介
    (弊社ブログでの解説記事)
    https://tech.speee.jp/entry/2019/04/23/094015
    SlackのBlock Kitをjsxの記法で書ける jsx-slackを試してみた - Qiita
    https://qiita.com/selmertsx/items/f3dbd2e4274e8a7966a8
    Anketのメッセージをjsx-slackを使ってBlock Kitベースへ変更しました -
    hatappi.blog
    https://blog.hatappi.me/entry/2019/03/10/110759
    22
    22

    View Slide

  23. 23
    23

    View Slide