今日も開発を行った。

• プレビューページ改善
• タイトルが空かどうかチェックするバリデーションを追加
• アイコンの色を改善

バリデーション

バリデーションチェックを行う関数は以下：

const [title, setTitle] = useState<string>('');
const [errorMessage, setErrorMessage] = useState<string>('');

const validate = () => {
  if (!title) {
    setErrorMessage('タイトルを入力してください');
    return false;
  }
  setErrorMessage('');
  return true;
};

データ保存関数内で呼び出す：

const handleSave = async () => {
  if (!validate()) return;

  // 処理
};

問題はページ遷移が発生する場合のバリデーションである。以下のコードではページ遷移が行われてしまう：

const handleSaveWithPageTransition = () => {
  if (!validate()) return;

  // 処理
};

return (
  // JSX 要素

  <Link href="/preview" onClick={handleSaveWithPageTransition}>
    プレビュー
  </Link>

  // JSX 要素
);

ページ遷移を防ぐには：

const handleSaveToLocalStorage = (
  e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
) => {
  if (!validate()) {
    e.preventDefault(); // バリデーションに失敗した場合はページ遷移を中止
    return;
  }

  // 処理
};

preventDefault()

でイベント既定のアクションが行われるのを防ぐ。

参考：Event: preventDefault() メソッド

なおイベント型だが、

React.MouseEvent

は次のようなジェネリクス型と呼ばれるらしい。

interface MouseEvent<T = Element, E = MouseEvent>

具体的な型を後からパラメータとして指定できる。ここでは

<a>

タグを押下したときのマウスイベントなので、次のように定義する：

React.MouseEvent<HTMLAnchorElement, MouseEvent>

参考：サバイバル TypeScript - ジェネリクス (generics)