🤫
コピペボタンだけで、Slackリマインド作成のWebサービスを作ってみた
コピペボタンだけで、Slack リマインド作成の Web サービスを作ってみた - AI アシスタントとの共創開発
はじめに
「AI アシスタントと一緒に Web サービスを作れたら面白そう...🤔」
「Slack のリマインド設定、手打ちで入力するのめんどくさいから少しでも自動化したい 🙄」
そんな軽い気持ちで始めたプロジェクトが、予想以上に上手くいったので共有したいと思います！
今回は、Anthropic の「Claude」という AI アシスタントと一緒に、Slack のリマインドコマンドを簡単に生成できる Web アプリを作成しました。
特筆すべきは、コードのほぼ 100%が Claude 製。私がやったことは基本的に「要件を伝える」「コードをコピペする」「微調整を依頼する」だけです。
作ったもの
機能：
- 日本語/英語対応
- 直感的な UI
- コピーボタン一発でコマンド取得
- 繰り返し設定も簡単に
開発プロセス - Claude との対話録
1️⃣ 最初の対話：アイデアの具現化
私：「Slackのリマインドコマンドを簡単に作れるWebサービスを作りたいんだけど」
Claude：「面白そうですね！具体的にどんな機能が必要か整理してみましょう。
まずは基本的なUIの設計から始めましょうか？」
[Claudeが提案してくれた基本設計]
2️⃣ 環境構築：超簡単セットアップ
Claude に言われた通りに以下のコマンドを実行するだけ：
npx create-react-app slack-reminder
cd slack-reminder
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
3️⃣ コンポーネントの作成：コピペの旅
Claude との会話で機能を一つずつ実装していきました。
基本的なフォームの作成
私：「まずは基本的なフォームを作って欲しい」
Claude：「はい、では以下のようなコンポーネントはいかがでしょうか？」
[コード提案]
私：「うん、いいね！でも送信先の選択肢も欲しいかな」
Claude：「では、このように修正してみましょう」
繰り返し機能の追加
私：「毎週とか毎月とかの繰り返し設定も欲しいな」
Claude：「なるほど、では以下のような実装はどうでしょうか？」
[繰り返し機能のコード提案]
4️⃣ バグ修正：Claude 任せ
私：「曜日選択したあとのコマンドが日本語になってるよ」
Claude：「申し訳ありません。英語出力に修正しましょう」
[修正コード]
5️⃣ デプロイ：Vercel で公開
私：「次にデプロイしたいんだけど、手順教えて」
Claude：「Vercel がおすすめです。以下のコマンドを実行してください」
[デプロイコマンド]
驚いたポイント 🎯
- コードの質が高い
- 整理された構造
- 適切なコメント
- モダンな実装手法
- UI の考慮が細かい
- レスポンシブ対応
- アクセシビリティ
- エラーハンドリング
- 的確な提案
- 必要な機能の先回り
- ベストプラクティスの提案
- バグの素早い修正
工夫したポイント 💡
- 要件の明確な伝え方
❌「繰り返し機能を追加して」
⭕「毎週・毎月の設定ができて、曜日も選べる機能が欲しい」
- 段階的な実装
- 基本機能から開始
- 一つずつ機能を追加
- 都度動作確認
- フィードバックの具体化
- 期待する動作を明確に
- 問題点を具体的に
- 参考にしたい UI/UX を共有
まとめ
AI アシスタントとの共創で、予想以上に効率的に開発ができました。
特に以下の点が印象的でした：
- コードの品質が一貫して高い
- 要件の解釈が的確
- バグ修正が素早い
今回のプロジェクトを通じて、「AI と人間の良い協業の形」が見えた気がします。
皆さんも、「これ、作りたいな」と思う Web サービスがあれば、
Claude と一緒に作ってみてはいかがでしょうか？
予想以上に楽しく、予想以上に良いものができるはずです！
ちなみにこの記事も、Claude に書かせています 🤭 ぜひ試してみてください！
Discussion