jsx-slack: React ⾵ Block Kit

jsx-slack: React ⾵ Block Kit

16f3ea7644bc4ce1dfc7de932291af58?s=128

Yuki Hattori

July 25, 2019
Tweet

Transcript

  1. jsx-slack: React ⾵ Block Kit Yuki Hattori | Speee, Inc

    Slack Dev Meetup Tokyo #1 2019-07-25 2019-07-25
  2. 服部 雄輝 @株式会社 Speee OSS, Frontend yhatt y_hatt 2 2

  3. Block Kit 開発あるある 凝ったメッセージの JSON が複雑・冗⻑になりがち プログラムで動的に⽣成するとよけい複雑に 後から⾒返した時、構造がわからなくなる マークダウン (

    mrkdwn ) 記号のゲシュタルト崩壊 `_*${foo}* ${bar}_` 3 3
  4. Slack のメッセージをもっとメンテナブルにして 開発体験を改善したい! 4 4

  5. 5 5

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

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

    7
  8. <Blocks> <Section>*@speee-js/jsx-slack*</Section> <Image src="https://bit.ly/2Y1FeHi" alt="jsx-slack" /> <Context> Maintained by <Image

    src="https://github.com/speee.png" alt="Speee" /> Speee, Inc. </Context> <Divider /> <Actions> <Select actionId="rating" placeholder="Rate it!"> <Option value="5">5 </Option> <Option value="4">4 </Option> <Option value="3">3 </Option> <Option value="2">2 </Option> <Option value="1">1 </Option> </Select> </Actions> </Blocks> 8 8
  9. 9 9

  10. 10 10

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

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

  13. <Blocks> <section> <blockquote> <strong> <a href="https://github.com/speee/jsx-slack">@speee-js/jsx-slack</a> </strong> <br /> <i>Build

    JSON for Slack Block Kit from JSX</i> </blockquote> <ul> <li> <strong>Block Kit as component</strong> <ul> <li>Building your blocks as component.</li> </ul> </li> <li> <strong>HTML-like formatting</strong> <ul> <li>Keep a readability by using well-known elements.</li> </ul> </li> </ul> <img src="https://github.com/speee.png" alt="Speee" /> </section> </Blocks> 13 13
  14. 14 14

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

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

  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` <Blocks> <Section> Hello, <a href=${'@' + message.user} />! </Section> </Blocks> ` }) }) 17 17
  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( <Blocks> <Section> Hello, <a href={'@' + message.user} />! </Section> </Blocks> ) }) }) 18 18
  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 }) => ( <Fragment> <Section> <strong>{children}</strong> </Section> <Divider /> </Fragment> ) <Blocks> <Header>jsx-slack labs (Custom blocks)</Header> <Throbber>Loading spinner</Throbber> <Progress max="20" value="5"> Completed 5 of 20 tasks </Progress> </Blocks> 19 19
  20. 詳しい使い⽅は GitHub で https://github.com/speee/jsx-slack 20 20

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

    21
  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
  23. 23 23