Topotal では Waroom(ワルーム) という SaaS を作っており、 Slack App を使った機能もあるため Slack UI を構築する場面が頻繁にあります。
ただ Slack UI の開発は Web UI などの開発と比べると開発しづらく、なんとか解決できないかと悩んでいた中で見つけたのが jsx-slack でした。 結果として劇的に開発体験が向上したので今回は jsx-slack を使用するといかに幸せになれるかをご紹介します。
https://github.com/yhatt/jsx-slack
Block Kit のつらさ
まず jsx-slack の魅力を伝える前に現状の「つらさ」をお伝えします。 Slack UI を構築するには Slack が提供してくれている Block Kit という UI フレームワークを使用するのですが、これがなかなかにシンドい。。。
- 1️⃣ 非直感的な JSON で UI を構築する必要がある 😢
- 2️⃣ Block Kit Builder がやや使いづらい 😢
https://api.slack.com/block-kit
1️⃣ 非直感的な JSON で UI を構築する必要がある 😢
Block Kit は JSON 形式で UI を構築します。例えばこんな UI を構築したい場合の Slack API に渡さなければならない JSON データはこちら。
構築したい UI に対して記入する JSON の量が多く感じます。また JSON のままでは直感的にレンダリングされる UI のイメージが湧きづらいです。このサンプルはかなり簡素なものなのでまだギリギリイメージできますが、フォーム系のUIが加わるとより複雑化します。このJSONをメンテナンスしていくのはかなり骨が折れます。
2️⃣ Block Kit Builder がやや使いづらい 😢
1️⃣のペインを解消すべく Slack は Block Kit Builder というエディターを用意してくれています。Block Kit Builder を使えば、API Document を確認することなく Web UI からボタンを押すだけで JSON を生成できます。生成された JSON を右側に用意されているエディターから編集もでき、作成したUIを実際に自分の Slack Workspace に送る事ができるため便利です。
ただこのエディターの挙動があやしく、意図しないタイミングでコードが消えてしまったり、UNDOができなくなるタイミングがあったりと、使っていると「キィーーーー！」と叫びたくなる事が多々あります。ここに関しては今後の改善に期待です。
ここまでで現状の Slack UI 開発のペインがざっくりわかっていただけたと思います。
jsx-slack という名の救世主
これらを解決してくれるのがこの jsx-slack です。その名の通り jsx を使ってこの JSON を作成できます。この jsx-slack を使って記述することで多くのメリット享受できます。
UI をイメージしやすい 👍
百聞は一見にしかず。先程の例で言うと以下のようなコードになります。
JSON で書いたものと比較すると圧倒的に記述量が少なく、また自分のようなフロントエンドの開発に長く携わってきた身からすると jsx で記述されているだけで出来上がる UI がイメージしやすいです。
ただ、この「イメージしやすい」というのにはもうひとつ理由があります。
HTML ライクに書ける 👍
jsx-slack はなるべく HTML ライクに書けるように設計されおり、 p や img、 blockquote などの HTML タグをいくつか使用できます。そのため、より親しみ深いコードで記述できイメージがよりしやすくなっています。またHTMLの知識があるだけで構築できるため学習コストも少なく感じました。
REPL が用意されている 👍
jsx-slack にも Block Kit Builder のような、ちょっと試したい時のエディターが用意されています。こちらはプレビューやボタンからUIを追加する機能はありませんが、シンプルで使いやすいエディターと Block Kit Builder でプレビューするためのボタンも用意されているため快適に構築できます。
基本的には VSCode などでコードを書くことになると思いますが、ちょっと確認したい時にはかなり重宝します。
https://jsx-slack.netlify.app/#message
まとめ
もし既に Slack App の開発をされている方であれば jsx-slack の良さが分かっていただけたかと思います。TypeScript 以外の言語で Slack App を開発されている場合でも UI の構築だけ jsx-slack に切り出すだけでも開発体験が絶対に良くなると思うのでおすすめです!
是非 jsx-slack を使って楽しい Slack App 開発をしていきましょう！
最後に宣伝
インシデント発生時に Slack から離れること無く、効率よく対応するための SaaS、 Waroom（ワルーム） を提供しています。AI を用いて Slack の情報から自動的にインシデント概要をまとめる機能や、ポストモーテムを生成する機能など Slack を用いた機能が盛り沢山なので是非お試しください。
