はじめに
メッセージの返信に悩むことが多かったのですが、AIに相談してメッセージを作りそれをさらにメッセージアプリに貼り付けてという手間が係、それをなくしたかったので、今回、「Slackのメッセージを貼るだけで、使えそうな返信文をAIが出してくれて、それを選んでそのまま送れるアプリ」を作りました。
本来はGoogleの拡張機能を使い、届いた通知からアプリを開かずそのまま返信できるようにしたかったのですが、今の技術力では厳しかったのでそれは断念しました。
概要
- アプリからSlackに送信できる
- 返信したい内容を貼ると、返信文を生成できる。また、返信文を編集できる
- メンションすることができる。また送りたいチャンネルを選ぶことができる
実際の画面
返信文の生成
- ChatGPTを用いて返信文を生成できるようにしました
メンション・チャンネル選択
- Slack APIを使用し、メンション・チャンネル選択を可能にしました
返信文の編集・送信
- Slack APIを使用し、返信文の送信を可能にしました
開発をやってみて
- MVPを作る時は最大限細かくタスク分解することが大事
細かくタスク分解をすることで、何をやればいいかやタスクの難易度が下がるのですごい作りやすくなりました。複雑にしてしまうと取り掛かる難易度が高くなります。 - API連携のスムーズさがカギ
Slack APIとOpenAI APIを使うことで、ユーザーが使いたい機能をシンプルに実現できました。特に、Slackのメッセージ送信やチャンネル取得をAPIで連携することで、既存のツールに新しい機能をスムーズに追加することができました - テスト環境の整備が大切
CI/CDを通しテスト環境を整備することで、自分で細かくテストをする手間が省けるし頻繁に間違いがわかり、修正することができるので後から大変な思いをすることがなくなるなと感じました
使用した技術
フロントエンドは Vite・React・TypeScript を使い、バックエンドは Node.jsとHonoでAPIサーバーを構築し、また、Slack Web APIでメッセージ送信、OpenAI APIで返信文生成を可能にしました。テストコードは、VitestとReact-Testing-Libraryを使用して書きました。CI/CDの設定もしました。
GitHub
今後について
今後は、会社のプロダクトの成長に貢献することとNext.js・個人開発を並行してやっていきたいです。
これまでを振り返って
僕が初めてReactを学習したのは３週間前です。それまでは、HTMLやCSS・JavaScriptの学習経験は多少あるだけでした。今では、ReactやTypescriptができるようになったり、CI/CDやテストコードを使えるようになったりしました。この短期間でここまでできるようになるとは思っていませんでした。
おわりに
独学でやるのではなくその道のプロから言われた通りにやり、誰よりも量をこなしたことでここまでできるようになったと思います。JISOUというプログラミングスクールで学びました。おすすめなので興味があればぜひ下のリンクから問い合わせてみてください！このスクールは言われた通りにやれば誰でも再現性を持ってできるようなカリキュラムがあるのが魅力的でした。