TextInput — とは何か、テキスト入力とReact Native

React NativeのTextInputとは

TextInputは、ユーザーがデバイスのキーボードを使用してテキストを入力できるようにするReact Nativeコンポーネントです。これは、登録フォーム、検索バー、メッセージ入力フィールド、およびユーザー入力が必要なその他のあらゆるシナリオの主要な構成要素です。ウェブ開発では個別のinputタイプ（text、email、password、search）が存在しますが、React Nativeではこれらすべてのバリアントが、異なるpropsを持つ単一のTextInputコンポーネントを通じて実装されます。

TextInputは2つの動作モードをサポートしています:制御（React状態を通じて管理）と非制御（refを使用）です。制御モードでは、フィールドの値はコンポーネントの状態に保存され、onChangeTextコールバックを通じて更新されます。このアプローチは、単一の真実源を提供し、検証を簡素化するため、ほとんどのアプリケーションで推奨されます。

React Native Handling Text Input、2024によると、TextInputは自動的にプラットフォームに適応します:iOSではネイティブのUITextField、AndroidではEditTextを使用します。これにより、追加設定なしでオートコンプリート、自動修正、システムメニュー（カット/コピー/ペースト）の適切な動作が保証されます。

TextInputのプロパティとAPI

TextInputは、入力、外観、動作を制御するための広範なpropsセットを提供します。すべてのpropsは、値管理、キーボードタイプ、スタイリング、イベント、プラットフォーム固有の機能のいくつかのカテゴリに分類されます。

値管理のプロパティ

value — フィールドの現在の値（制御モード用）。onChangeText — テキストが変更されるたびに呼び出されるコールバック。placeholder — フィールドが空のときに表示されるヒントテキスト。defaultValue — 非制御モード用の初期値。maxLengthはユーザーが入力できる最大文字数を制限します。

TextInputのイベント

コンポーネントはonFocus（フィールドがフォーカスを受け取った）、onBlur（フィールドがフォーカスを失った）、onSubmitEditing（ユーザーがEnter/Returnを押した）、onKeyPress（キー押下）をサポートしています。onEndEditingイベントは、フォーカスを失ったときに編集が完了した後に呼び出されます。これらのコールバックにより、複雑な検証やフォーム送信ロジックを実装できます。

プラットフォーム固有のプロパティ

iOSでは:clearButtonMode（クリアボタン）、keyboardAppearance（ライト/ダークキーボード）、returnKeyType（Returnボタンのタイプ）、enablesReturnKeyAutomatically。Androidでは:textContentType（自動入力）、underlineColorAndroid、inlineImageLeft。secureTextEntryはパスワード入力のために両方のプラットフォームで動作します。

制御入力と非制御入力

React Nativeでは、TextInputは2つのモードで動作できます。制御モードでは、Reactがフィールドの値を管理します。状態から値を渡し、onChangeTextを通じて更新します。非制御モードでは、Reactはフィールドを初期化するだけで、DOMのような値はネイティブコンポーネント内に保存されます。

制御されたTextInput

制御モードは、入力データの検証、フィルタリング、または書式設定が必要なすべてのフォームで推奨されます。フィールドの状態はReactコンポーネントの状態と同期され、値に対する完全な制御を提供します。

const LoginForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    return (
        <View>
            <TextInput
                placeholder="Email"
                value={email}
                onChangeText={setEmail}
                keyboardType="email-address"
                autoCapitalize="none"
            />
            <TextInput
                placeholder="Password"
                value={password}
                onChangeText={setPassword}
                secureTextEntry
                maxLength={32}
            />
        </View>
    );
};

この例では、両方のフィールドが制御モードを使用しています。メールフィールドはemail-addressキーボードタイプで、自動大文字化が無効になっています。パスワードフィールドはsecureTextEntryを使用して入力文字を非表示にし、maxLengthによって32文字に制限されています。

非制御のTextInput

非制御モードは、検証や入力への即時反応が不要な単純なフィールドに適しています。フィールドの値は、フォーム送信時にrefを通じて取得されます。

const SimpleSearch = () => {
    const inputRef = useRef(null);

    const handleSearch = () => {
        console.log(inputRef.current.value());
    };

    return (
        <TextInput
            ref={inputRef}
            placeholder="Search..."
            onSubmitEditing={handleSearch}
        />
    );
};

非制御モードでは、テキストが変更されるたびに状態を同期する必要がないため、コンポーネントのレンダリングが高速になります。ただし、リアルタイムで入力をフィルタリング、書式設定、または検証する機能は失われます。

キーボードタイプとプラットフォーム機能

TextInputは、期待される入力形式に合わせてレイアウトを適応させるさまざまなキーボードタイプをサポートしています。正しいキーボードタイプを選択することで、ユーザーエクスペリエンスが向上し、モバイルデバイスでの入力エラーが減少します。

iOSでは追加タイプが利用可能:numbers-and-punctuation、twitter、web-search（音声検索付き）。Androidではvisible-passwordも利用可能（パスワードを表示）。正しいkeyboardTypeの選択は、モバイルアプリケーションのUXの重要な側面です。

プラットフォーム機能にはautoCapitalize（最初の単語の自動大文字化）、autoCorrect（自動修正）、spellCheck（スペルチェック）、textContentType（iOSでの自動入力）も含まれます。これらのpropsはプラットフォームごとに異なる動作をし、テストが必要です。

TextInputの実践例

2つの実際のシナリオを考えてみましょう:メッセージ入力用の複数行フィールドと、マスクされた電話番号入力フィールドです。どちらも異なるpropsを使用して目的の動作を実現するTextInputを使用しています。

例1: メッセージ用の複数行フィールド

長いテキスト（コメント、説明）を入力するために、TextInputはmultilineプロパティを通じて複数行モードに切り替わります。このモードでは、フィールドは垂直方向に拡大し、改行をサポートします。

const MessageInput = ({ onSend }) => {
    const [text, setText] = useState('');

    return (
        <TextInput
            style={styles.input}
            multiline
            numberOfLines={4}
            placeholder="Write a message..."
            value={text}
            onChangeText={setText}
            textAlignVertical="top"
        />
    );
};

multilineプロパティは複数行モードを有効にし、numberOfLinesは行単位の初期高さを設定します。textAlignVertical: 'top'はテキストを上部に配置します（デフォルトでは、Androidの複数行TextInputはテキストを垂直方向に中央揃えにします）。

例2: 電話番号書式設定フィールド

電話番号を入力する場合、リアルタイムの書式設定がしばしば必要になります。onChangeTextを正規表現と組み合わせることで、入力マスクを実装できます。

const PhoneInput = () => {
    const [phone, setPhone] = useState('');

    const formatPhone = (text) => {
        const cleaned = text.replace(/\D/g, '');
        if (cleaned.length <= 11) {
            return cleaned.replace(
                /(\d{1})(\d{3})(\d{3})(\d{2})(\d{2})/,
                '+$1 ($2) $3 $4 $5'
            );
        }
        return cleaned;
    };

    return (
        <TextInput
            keyboardType="phone-pad"
            value={phone}
            onChangeText={(t) => setPhone(formatPhone(t))}
            placeholder="+7 (999) 123 45 67"
            maxLength={20}
        />
    );
};

formatPhone関数はすべての数字以外の文字を削除し、番号を標準的な国際形式に書式設定します。keyboardType: 'phone-pad'は電話キーボードを表示します。このアプローチは電話番号入力のUXを改善し、書式設定エラーを防止します。