Reactの独自関数normalizeTitle：入力文字列の整形を部品化する

通常の関数とHooksの違いを整理し、入力文字列の整形・イベント処理・純粋関数のテストを実例で学びます。

normalizeTitleは何をする関数か

React専用APIではなく、自分で定義する関数

normalizeTitle は、入力の前後の空白を削り、連続する空白を1つにまとめる独自関数です。Reactから提供される関数ではありません。表示とは独立した処理を通常のJavaScript関数に切り出すと、複数のコンポーネントやサーバー側でも再利用できます。

stateやEffectを使わないため、名前に use を付けません。今回は文章の見出しを1行に整える用途です。パスワード、改行を保存したい本文、空白に意味があるソースコードには使わないでください。

引数・戻り値と実装

src/lib/normalizeTitle.ts

引数は string、戻り値も string です。入力値を書き換えるのではなく、新しい文字列を返します。空白だけの入力は空文字列になります。

export function normalizeTitle(value: string): string {
  return value.trim().replace(/\s+/g, ' ');
}

trim() で前後の空白を除き、正規表現で途中の空白や改行を半角スペースにまとめています。この処理は入力が同じなら結果も同じで、通信やstate更新を行わない純粋関数です。TypeScriptの型は実行時の入力検証ではないため、APIの不明な値を直接渡す前には型を確認します。

Reactのイベントから呼び出す

src/App.tsx

ViteなどのReact＋TypeScriptプロジェクトを用意し、上のファイルを保存してから次のコンポーネントを配置します。

import { useState } from 'react';
import { normalizeTitle } from './lib/normalizeTitle';

export default function App() {
  const [draft, setDraft] = useState('');
  const [title, setTitle] = useState('');
  function handleApply() {
    setTitle(normalizeTitle(draft));
  }
  return (
    <main>
      <h1>タイトルを整える</h1>
      <label>入力<input value={draft}
        onChange={event => setDraft(event.target.value)} /></label>
      <button type="button" onClick={handleApply}>反映</button>
      <p>{title || 'タイトル未設定'}</p>
    </main>
  );
}

onClick={handleApply} は関数を渡す指定です。onClick={handleApply()} と書くとレンダー中に呼び出してしまいます。入力途中の値は draft、確定値は title として用途を分けています。送信せず常に整形結果だけを表示するなら、const title = normalizeTitle(draft) と計算でき、結果用stateは不要です。

動作確認と活用例

期待する変換結果

normalizeTitle('  React   入門  '); // 'React 入門'
normalizeTitle('React\nAPI');       // 'React API'
normalizeTitle('   ');             // ''

入力欄に連続スペースを含む文字列を入れ、「反映」を押してください。入力欄は編集中の値を保ち、下の表示だけが整います。空白だけの場合は「タイトル未設定」と表示されます。

共通化しすぎない

用途ごとに空白のルールが違うなら、1つの関数へ無理に統合しません。文字列整形はHTMLのサニタイズや認可とは別です。Reactの文字列として表示し、整形したから安全という理由でHTMLとして挿入しないようにします。

次に読む記事

通常の関数にstateを持たせたくなったら、useToggleの作成へ進みます。通信だけを切り出す例はfetchJsonです。