ChatGPTを使用したアプリ開発記【プロフィール編集画面のモバイル最適化・自動フォーカス制御の実装】

📱 モバイル最適化について

1. レスポンシブなレイアウト

FditProfile.js

<div className="max-w-2xl mx-auto ... px-4 py-10">

• max-w-2xl: モバイルでは画面幅を自動的に縮小し、タブレット以上では中央寄せ
• px-4 py-10: モバイルでも見やすいパディングで余白を確保

2. タップしやすいボタンサイズ

FditProfile.js

className="w-full bg-blue-500 text-white px-4 py-2 rounded ..."

• w-full: モバイルでは横幅いっぱいに
• py-2: ボタンが小さすぎないよう高さを確保

3. 読みやすいフォントサイズ

FditProfile.js

className="space-y-5 text-sm"

• text-sm はモバイルで見やすいバランス。必要なら text-base に拡大可

4. フォームのサイズ・余白・フォーカスリング

FditProfile.js

className="w-full border px-3 py-2 rounded focus:outline-none focus:ring ..."

• フォームに指での入力がしやすいサイズと余白があり、選択中もリングで見やすくなる

🎯 自動フォーカス制御の実装について

1. useRef で対象のDOM要素にアクセス

FditProfile.js

const nameRef = useRef(null);
const mailRef = useRef(null);

2. 初回レンダリング時にフォーカス

FditProfile.js

useEffect(() => {
  setTimeout(() => {
    nameRef.current?.focus(); // 名前欄にフォーカス
  }, 100); // モバイルでソフトキーボードの表示が安定するように若干遅延
}, []);

• モバイルブラウザでは、初回で即 .focus() すると反応しないことが多いため、setTimeout で100ms程度遅らせるのがベターです。

3. バリデーションエラー時に対象欄へフォーカス

FditProfile.js

if (name.trim() === '') {
  setStatus('❌ 名前を入力してください。');
  nameRef.current?.focus();
  return;
}
if (mail.trim() === '') {
  setStatus('❌ メールアドレスを入力してください。');
  mailRef.current?.focus();
  return;
}

• 入力が不足していたら、その欄に自動でカーソルが移動するようにしています。

UI