【React×TypeScript】scrollIntoViewでUX改善！スムーススクロール実装の最小構成（看護師向け計算ツール開発 #６②）

職場にあったら便利だなと思い開発を始めた看護師向けの計算ツールアプリ。
今回は、計算結果が見えにくい問題を解消するために、スムーススクロールを導入しました。

✅ 共通関数を定義

lib/scrollToRef.ts

export const scrollToRef = (ref: React.RefObject<HTMLElement>) => {
  if (!ref.current) return;
  ref.current.scrollIntoView({ behavior: "smooth", block: "start" });
};

• SSR安全・再利用可能
• Tailwind等のUIに依存しない汎用設計

✅ 実装例（結果表示位置まで自動スクロール）

"use client";
import { useState, useRef, useEffect } from "react";
import { scrollToRef } from "@/lib/scrollToRef";

export default function MedicationCalculator() {
  const [result, setResult] = useState<string | null>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (result) scrollToRef(resultRef);
  }, [result]);

  return (
    <>
      <button onClick={() => setResult("300")}>計算する</button>
      {result && <div ref={resultRef}>結果: {result}mg</div>}
    </>
  );
}

📌 ポイント

• useEffectで結果の更新を監視し、描画後にスクロール
• setTimeout不要で安定した動作
• 複数ページでも同一関数を使い回し可能

🧠 学び

観点	要点
コード量	5行で実装可能
安全性	SSR環境でも動作
UX効果	「入力→結果→説明」が途切れない

💬 まとめ

scrollIntoViewは最小構成でUXを改善できる実装。
わずかな動きが“現場で使いやすいアプリ”を作る鍵になります。

📘 詳細なUI設計・コード解説はZennで公開中👇
👉 看護師が医療現場で使う計算ツールの開発に挑戦してみた #6②（Zenn)