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
jsx-slack: React ⾵ Block KitYuki Hattori | Speee, IncSlack Dev Meetup Tokyo #12019-07-252019-07-25
View Slide
服部 雄輝@株式会社 SpeeeOSS, Frontendyhatty_hatt22
Block Kit 開発あるある凝ったメッセージの JSON が複雑・冗⻑になりがちプログラムで動的に⽣成するとよけい複雑に後から⾒返した時、構造がわからなくなるマークダウン ( mrkdwn) 記号のゲシュタルト崩壊`_*${foo}* ${bar}_`33
Slack のメッセージをもっとメンテナブルにして開発体験を改善したい!44
55
Slack Block Kit のメッセージをよりメンテナブルにする jsx-slack のご紹介https://tech.speee.jp/entry/2019/04/23/09401566
Block Kit as componentJSX でコンポーネントを扱うように Block Kit を使える77
*@speee-js/jsx-slack*Maintained bySpeee, Inc.5 4 3 2 1 88
99
1010
JSX vs JSON19⾏ vs 94⾏⾒返しても構造がすぐ分かる1111
HTML-like formattingHTML 要素でメッセージをフォーマット1212
@speee-js/jsx-slackBuild JSON for Slack Block Kit from JSXBlock Kit as componentBuilding your blocks as component.HTML-like formattingKeep a readability by using well-known elements.1313
1414
デモでお試しくださいデモでお試しくださいhttps://speee-jsx-slack.netlify.com/https://speee-jsx-slack.netlify.com/1515
インストールnpm install --save @speee-js/jsx-slack1616
例: Bolt + jsx-slackconst { 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, !`})}) 1717
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, !)})})1818
応⽤編: カスタムブロックを定義する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 spinnerCompleted 5 of 20 tasks 1919
詳しい使い⽅は GitHub でhttps://github.com/speee/jsx-slack2020
jsx-slack でリッチな Slack メッセージのDeveloper experience を向上させましょう2121
参考資料Slack Block Kit のメッセージをよりメンテナブルにする jsx-slack のご紹介(弊社ブログでの解説記事)https://tech.speee.jp/entry/2019/04/23/094015SlackのBlock Kitをjsxの記法で書ける jsx-slackを試してみた - Qiitahttps://qiita.com/selmertsx/items/f3dbd2e4274e8a7966a8Anketのメッセージをjsx-slackを使ってBlock Kitベースへ変更しました -hatappi.bloghttps://blog.hatappi.me/entry/2019/03/10/1107592222
2323