🌱 プログラミング超初心者がAIと二人三脚でWEBアプリ作ってみた
🎯 はじめに
みなさん、こんにちは！プログラミング歴3ヶ月の超初心者です。今回、AIと一緒に「びょういんナビ」というWEBアプリを開発してみましたので、その過程で学んだことを共有させていただきます。
初心者ならではの試行錯誤や、AIとの効果的なコミュニケーション方法について、私なりの発見がありましたので、それを中心にお話しできればと思います。
🏥 アプリケーションの概要
「びょういんナビ」は、症状から適切な診療科を提案してくれるWEBアプリです。開発のきっかけは、「病院に行きたいけど、どの診療科に行けばいいかわからない」という身近な悩みでした。
主な機能
- 🎈 年齢選択（子供向けのUIを実装）
- 🤒 症状選択（部位別に整理）
- 🏥 診療科レコメンデーション（AIによる判断）
技術スタック
技術選定のポイント
-
React 🎯
- コンポーネントベースの開発
- 豊富な教材とコミュニティ
- 直感的な状態管理
-
Tailwind CSS 🎨
- 高速なUI開発
- モバイルファーストの設計
- クラス名で直感的にスタイリング
-
Framer Motion ✨
- 直感的なアニメーション
- スムーズな遷移効果
- ユーザー体験の向上
-
AWS Bedrock (Claude) 🤖
- 高精度な症状分析
- 柔軟なプロンプト設計
- 医療知識の活用
🤖 AIとの二人三脚開発
AIとの効果的なコミュニケーション
🔍 開発プロセスで発見した3つの重要ポイント：
1. 課題の明確な定義
❌ 改善が必要な例：
「UIをもっと使いやすくしたいです」
⭕ 具体的な例：
「年齢選択画面で、子供向けに
大きなボタンと絵文字を使いたいです。
TailwindCSSでの実装方法を
教えてください」
2. 段階的な問題解決アプローチ
- 全体像の設計を相談
- 具体的な実装方法の確認
- エラー発生時の適切な情報共有
- フィードバックに基づく改善
3. イテレーティブな開発サイクル
- 実装 → テスト → 改善点の特定 → 実装
というサイクルを小さく回す
🚀 実装のハイライト
1. インタラクティブなUI
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="bg-green-500 text-white px-8 py-3 rounded-full"
>
びょういんをさがす 🏥
</motion.button>
2. 効率的な状態管理
const [age, setAge] = useState(null);
const [selectedSymptoms, setSelectedSymptoms] = useState([]);
const [recommendedDepartment, setRecommendedDepartment] = useState(null);
- ユーザー入力の段階的管理
- 状態に応じたUI制御
- エラーハンドリング
3. レスポンシブデザイン
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
{/* コンテンツ */}
</div>
🎯 今後の展望
追加予定の機能
- 📝 症状データベースの拡充
- 📱 スマートフォン最適化
- 🌍 多言語対応
学んだこと
- AIは明確な目標設定で真価を発揮
- エラーメッセージは重要な学習機会
- 小さな成功体験の積み重ねが大切
- コミュニティの知見活用が成長の鍵
🌟 おわりに
プログラミング初心者でも、AIとの適切なコミュニケーションを通じて、実用的なアプリケーションを開発できることが分かりました。
特に、課題を具体的に定義する能力は、プログラミングに限らず、様々な場面で活きてくるスキルだと実感しています。
みなさんも、ぜひAIとの協働開発に挑戦してみてください！
ソースコードはこちらで公開しています：
GitHub - medical-department-finder