jsx-slack: React ⾵ Block Kit

Slack Dev Meetup Tokyo #1
https://slack-dev-jp.connpass.com/event/138388/

@speee-js/jsx-slack
https://github.com/speee/jsx-slack/
https://speee-jsx-slack.netlify.com/ (demo)

jsx-slack labs: https://codesandbox.io/s/jsx-slack-labs-og7sv

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. 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. View Slide

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. 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. View Slide