【AIと一緒に】Context APIで状態管理を実装した Day4 〜メモリ管理とDBの違いを気にした話〜

今日やったこと

• Context API を導入して状態管理を実装
  • src/context/AppContext.tsx を作成し下記を一元管理
    • cards
    • monthlyRecords
    • contactHistories
    • incomeRecords
• カード登録フォームを ダミーから Context 対応に変更
  • 登録内容がダッシュボードにリアルタイム反映されるように
• フォームのリセット処理(setForm)を追加

Context API って何？(By Claude)

全ページが同じデータを共有できる仕組み。

変更前: 各ページが別々のデータを持っていた
変更後: 全ページが同じContextのデータを見ている
水道管に例えると
AppProvider = 家全体に繋がった水道管
useAppContext = 各部屋の蛇口

どの部屋（ページ）からでも同じデータにアクセスできる！

今日も躓く🐇

useAppContext の追加を忘れた

const { addCard } = useAppContext() を書き忘れて
addCard が使えずエラーに
Contextから関数を取得する一行忘れずに...orz

今日のコード① useAppContext の追加忘れ

// ❌ 追加忘れてaddCardが使えなかった
function CardForm() {
  const navigate = useNavigate()

  const [form, setForm] = useState<FormData>({

// ✅ 正しくはこう
function CardForm() {
  const navigate = useNavigate()
  const { addCard } = useAppContext()  // ← これを追加

  const [form, setForm] = useState<FormData>({

今日のコード② フォームがリセットされなかった → setForm で解決

// ❌ フォームの中身がメモリに残ったまま
addCard({ ... })
navigate('/')

// ✅ setFormでリセットしてから
addCard({ ... })
setForm({
  companyName: '',
  cardName: '',
  balance: '',
  interestRate: '',
  dueDateDay: '',
  status: 'active',
  color: '#e05555',
})
navigate('/')

Reactの仕様メモ🐶

useState で管理しているデータはページを離れてもメモリに残り続ける。

CardForm → ダッシュボード → CardForm と移動しても
入力内容が残るのはこのためらしい

登録完了後は setForm() でリセットするのがベスト？
オートコンプリート同様、便利な気もするから要件次第ね

余談：データの永続化についての理解

Context API はメモリ管理　

• Reactが動いてる間だけなので、以下操作で消える😢
  • ブラウザを閉じる
  • ページをリロード
  • サーバーを落とす

方法	永続化	特徴
Context API	❌	Reactが動く間だけ
localStorage	△	ブラウザに保存、サーバー不要
API経由でDB保存	✅	C# → PostgreSQL に保存

明日の予定

LinuxでDBさわった事はあるけど、フロントからの操作を作るのは初めて。
C#経由してDBにつなぐ辺りの実装が楽しみ～！

朝になってしまった...おやすみなさい🌙🐰