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