今日 昨日やったこと
- Context API を全ページに適用
- Context対応に変更
- データ追加のリアルタイム反映
- サイドバーを実装(カード一覧・ナビゲーション・総残高)
- API呼び出し準備
- axiosインストール
- UI全体の見た目をcssで整理
- スクロールバー・フォーカス・ボタンを統一
Context API を全ページに適用した
前回はCardFormだけ対応したので、今回残りを全部対応。
これで全ページが同じデータを見るように
axiosの準備
C#バックエンドが完成したら差し替えるだけで繋がるらしい。
Nodeじゃないのは業務C#が多いため勉強を兼ねて・・・次はフルJSもやってみたいなぁ
// src/api/client.ts
const client = axios.create({
baseURL: import.meta.env.VITE_API_URL || 'http://localhost:5000/api',
})
呼び出し
// ダミーデータの代わりにAPIを呼ぶ
const response = await client.get('/cards')
const cards = response.data
.ts と .tsx の違い（ByClaude)
今回ファイルを作りながら気になったので整理。
| 拡張子 | 用途 |
|---|---|
.ts |
型定義・API関数など、JSXなし |
.tsx |
Reactコンポーネント、JSXあり |
画面を返すファイルは .tsx、それ以外は .ts と覚えればOK！
// ① クラスは className（classはJSの予約語）
<div className="card">
// ② 変数は {} で埋め込む
<div>{card.companyName}</div>
// ③ 必ず1つの要素で囲む
// ❌ ダメ
return (
<h1>タイトル</h1>
<p>本文</p>
)
// ✅ OK
return (
<div>
<h1>タイトル</h1>
<p>本文</p>
</div>
)
// ④ タグは必ず閉じる
<input /> // ← 自己閉じ
JSXとはなんぞや🤔
JSX = JSの中にHTMLが書ける便利な構文
Reactと一緒に使う
ブラウザが直接読めないのでViteが変換してくれる
// クラスは className
<div className="card">
// 変数は {} で埋め込む
<div>{card.companyName}</div>
// タグは必ず閉じる
<input />
Vite（ヴィート）とは
フロントエンド開発ツール
- JSX・TypeScript → JS に変換
- 複数ファイルを1つにまとめる
- 開発サーバーを立ち上げる（localhost）
- ファイル保存で即ブラウザに反映（HMR）
HMR（Hot Module Replacement）= ページ全体をリロードせずに変更だけ反映する仕組み
以前は webpack というツールが主流だったが遅かった。
Viteは爆速で登場して一気にスタンダードになった。
npm create vite@latest # Viteでプロジェクト作成
npm run dev # 開発サーバー起動
npm run build # 本番用にビルド
今日の躓き🐶
フォームの文字が黒くなる
index.css でグローバルに色を指定しても
インラインスタイルが優先されるため反映されなかった。
各コンポーネントのstyleに color: '#e2e6f0' を個別に追加して解決。
なぜ#fffじゃないか聞いてみた。AIは↓こんなことを考えているのだな
背景 #0d0f14（ほぼ黒）に
#ffffff（純白）→ コントラストが強すぎて目が疲れる
#e2e6f0（オフホワイト）→ 柔らかくて目に優しい
...普段はfffつかうだろうな🤔
年・月の横幅が揃わない（宿題）
selectとinputの高さ・幅が微妙にずれる問題が発生。
height: '38px' で高さは合わせたが幅はまだ調整中…（Claudeは41px指示だがはみ出る)
C#着手前に解決したい🐰
インラインでべた書きとかしても変わらんかった...デザイン苦手の民
次回予告🐇
つぎこそ C# + ASP.NET Core + PostgreSQL
一昨日眠れず昨日は1時間程度で寝落ち...
続きはできれば今晩とかやりたいなぁ