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
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