🎃

子ども向け学習アプリ開発ログ：タグ選択&UI改善

に公開
AI
Tailwind CSS
UI
tech

今回は、タグ機能の改善とUIデザインの統一を中心に進めました。
特に「タグを選択 → 再クリックで解除できる」ようにすることで、登録操作の快適さを向上させました。

前回

  • タグ別検索・フィルタリングの実装

今回

  • タグを登録し、選択中のタグを外せるようにすること
  • UI デザインの再調整（ボタンの色・一覧性改善）

① 選択中のタグを外せるようにする

以前は、誤ってタグを選択してしまった場合に解除する方法がなく、不便でした。
そこで、同じタグを再クリックすると選択が解除されるように修正しました。

toggleTag

const toggleTag = useCallback((tagName: string) => { 
  setForm((prev) => {
    const already = prev.tags.includes(tagName);
    return {
      ...prev,
      tags: already
        ? prev.tags.filter((t) => t !== tagName) // タグネームが違うものだけ残す（＝解除）
        : [...prev.tags, tagName], // 新しいタグなら追加
    };
  });
}, []);

実装例（選択したタグを解除できるUI）

<div>タグ：
  {form.tags.length === 0 ? (
    <span className="px-3 py-2 rounded-lg">なし</span>
  ) : (
    form.tags.map((tag, idx) => (
      <button 
        key={tag + idx}
        type="button"
        onClick={() => toggleTag(tag)} // toggleTagでトグル
        className="px-3 py-1 rounded-lg border mr-2"
      >
        {tag}
      </button>
    ))
  )}
</div>

クリックしたタグがすでに配列に含まれていれば filter() で削除し、
含まれていなければ新規追加する仕組み。
シンプルながら直感的に動作するトグルロジック。

② Dashboard UI

デザインのベース構造はAIを活用して作成し、その後、自分で間隔や色など細かい部分を調整しました。
これにより、Dashboardの全体的な統一感を維持しながら、より見やすい構成になりました。

Dashboard

③ Login, WordEditor UI

Login

Login

WordEditor

WordEditor

悩んだこと / 学んだこと

  • AIに任せる部分と、自分で調整すべき部分のバランスを意識することで、作業スピードとデザイン品質の両立ができると感じました。

次回やること

  • 学習関連API
    　- /api/words/today：今日の単語を10件取得して表示
    　- /api/words/test：学習済み単語からランダムに10件抽出（テスト用）
    　- 取得データをダッシュボードに反映

  • 学習イベントの保存
    　- action, lang, wordId を記録
    　- 例：{ action: "learn", lang: "ja", wordId: "xxxx" }

  • Firebaseセッションの安定化
    　- Cookieの有効期限切れに備え、認証ロジックを再確認・修正

  • UI/UX改善
    　- ダッシュボードとエディタのデザイン統一
    　- スマホ表示での余白や配置調整

Discussion