📚英単語辞書アプリ

英単語を入力すると意味を表示する辞書アプリ

📚 英単語辞書アプリ

英単語を入力すると、Free Dictionary APIから詳細な意味、発音、例文、同義語・反義語を取得して表示します。
学習目標：外部API利用、非同期データ取得、複雑なJSONデータの表示、ローディング状態の管理

🔍
単語検索
英単語を入力して検索
📖
詳細情報
意味・例文・品詞
🔉
音声再生
発音を音声で確認
🇯🇵
日本語翻訳
Gemini APIで翻訳
💡 英語の単語を入力してEnterキーまたは検索ボタンをクリックしてください
🔍

単語を検索してみましょう

上の検索バーに英単語を入力してください

試してみる単語の例：

🎯 今日学んだこと

技術的な学習

  • • 外部辞書API（Free Dictionary API）の利用
  • • Gemini APIによる翻訳機能の実装
  • • 非同期データ取得とエラーハンドリング
  • • 複雑なJSONレスポンスの型定義と変換
  • • ローディング状態の管理とUX向上
  • • Web Audio APIによる音声再生

React/TypeScriptの練習

  • • カスタムフック（useDictionary）の作成
  • • 複数状態管理（検索・翻訳・言語切り替え）
  • • コンポーネント分割と関心事の分離
  • • TypeScriptでのAPI型定義の実践
  • • useCallback による最適化
  • • 条件付きレンダリングによる多言語対応