amocode024's profile picture. 🌎 看護師 × Webアプリ開発学習中 🌎 React / TypeScript / Next.js 📱 看護師向け計算ツール・家族健康アプリを開発中 ⚙️ 技術ログ・成果物を発信しています

あも

@amocode024

🌎 看護師 × Webアプリ開発学習中 🌎 React / TypeScript / Next.js 📱 看護師向け計算ツール・家族健康アプリを開発中 ⚙️ 技術ログ・成果物を発信しています

DnD-kit学習で得た5つの教訓👇 ① flex非対応 ② delay設定が命 ③ idはStringで統一 ④ localStorageで保存 ⑤ grid推奨 「ボタンが動く瞬間」が一番感動した🥹


【Next.js × DnD-kit】 スマホでも動く「長押し並び替えUI」を実装📱 ▫️ delay/tolerance設定で誤作動防止 ▫️ flex非対応→gridで解決 ▫️ localStorageで順序保存 苦戦した分だけ理解が深まった🥹


Jestで計算テスト👇 expect(calcDose(50,2,1)).toBe(10); expect(calcDose(70,0,1)).toBe(0); 0%はエラー返却で確認。 #React #Jest #看護師アプリ


テストケースは現場シナリオで作成👇 ✔︎ 体重50kg × 2mg/kg = 100mg ✔︎ 1%液→10mg/mL→100mg=10mL ✔︎ 0や100%など極端値も確認 #React #看護師アプリ


<select {…register(“mgPerMl”)}> {presets.map(p => {p})} <input type=“number” {…register(“mgPerMl”)} /> → プリセット+編集可能UIを実装! #React #個人開発


製剤濃度はプリセット+編集式に実装💡 選択で時短、自由入力で柔軟性。 「選べるけど縛らない」設計でミス防止を意識。 #React #看護師アプリ


異常系テスト👇 空文字/“abc”/Infinity/NaN/極端値。 正規化→Zod→最終Finite判定まで多層で防御。 #RHF #Zod #テスト


丸め/表示テスト👇 mLは1桁、mgは0〜1桁、%は1桁など。 format関数でスナップショット化し崩れ検知。 #UI #品質保証


mEq計算の定数テスト👇 Na(23,1)/K(39.1,1)/Ca(40.1,2)…分子量と原子価の組を固定化し、逆算一致を検証。 #医療計算 #TypeScript


相関テスト👇 (用量mg or 体重×mg/kg)の少なくとも一方必須。 両方未入力/両方入力/片方のみを網羅。 #フォーム設計 #テスト


同値分割テスト👇 %は[0–100]を有効、他は無効。 各グループの代表値で網羅して効率UP。 #ソフトウェアテスト #看護師アプリ


境界値テストを導入👇 %:-0/0/0.1/100/100.1 mg/mL:-0/0/0.1 「ちょうど/少し手前/少し先」を網羅。 #テスト #医療計算 #品質


エラーは“近く・短く・気づける”。 フィールド直下+aria-live="polite"+色/アイコン。 #アクセシビリティ #UX


isValid=falseで送信ボタン無効化。 isSubmitting中はラベル切替+スピナー。 成功/失敗はトーストで即返答。 #RHF #UX


相関バリデ👇 (用量mg or 体重×mg/kg)のどちらか必須。 Zod refineで「少なくとも一方必須」を表現。 #Zod #フォーム設計


単位依存バリデ👇 %は0–100、mg/mLは0以上。 Zod superRefineで分岐し、field単位でメッセージ。 #Zod #医療計算


空文字→未定義に正規化してNaN回避。 z.preprocess(v=>v===""?undefined:v, z.number()) UXは短い日本語で即理解。 #Zod #RHF


数値バリデは入口で落とす👇 valueAsNumber / inputMode="decimal" Zod: z.number().min(0) 最後にNumber.isFiniteで再確認。 #ReactHookForm #Zod


ResultBoxをレスポンシブ対応📱💻 スマホは1行、PCは見出し+数値分離で見やすさ最適化。再利用性も◎ #React #TailwindCSS


計算結果表示をResultBoxで統一📦 数値+単位を見やすく整形し、再利用可能なUIに。 Tailwindで色分け&レスポンシブ対応。 #看護師アプリ #React #UI


United States Trends

Loading...

Something went wrong.


Something went wrong.