Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

5 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

*@speee-js/jsx-slack* Maintained by Speee, Inc. 5 4 3 2 1 8 8

Slide 9

Slide 9 text

9 9

Slide 10

Slide 10 text

10 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

@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.
Speee 13 13

Slide 14

Slide 14 text

14 14

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

応⽤編: カスタムブロックを定義する 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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

参考資料 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

Slide 23

Slide 23 text

23 23