国際電話番号入力UIコンポーネント比較：react-intl-tel-input vs react-phone-input-2 vs react-phone-number-input

国際電話番号の入力フォームを実装する際、ユーザー体験と開発者のメンテナンス性の両面で適切なライブラリ選定は重要です。この3つのパッケージはいずれもReact向けに国際電話番号入力を提供しますが、アーキテクチャ、機能、保守状況に大きな違いがあります。以下では、実際の開発現場での使用観点から深く比較します。

📞 パッケージの現状と保守状況

まず重要なのは、react-intl-tel-input は公式に非推奨（deprecated）とされています。npmページおよびGitHubリポジトリには明確に「This package is deprecated. Please use react-phone-number-input instead」と記載されており、新規プロジェクトでの使用は避けるべきです。

一方、react-phone-input-2 と react-phone-number-input はともに積極的にメンテナンスされており、最新のReactバージョンとの互換性も確保されています。

🧩 基本的な使い方とAPI設計

react-intl-tel-input（非推奨）

このパッケージはjQueryベースの intl-tel-input をラップしたもので、Reactのライフサイクルと完全に統合されていません。そのため、状態管理や再レンダリングの挙動が予測しづらい場合があります。

// 非推奨：react-intl-tel-input
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/libphonenumber.js';

function PhoneInput() {
  return (
    <IntlTelInput
      preferredCountries={['jp', 'us']}
      onSelectFlag={(countryCode) => console.log(countryCode)}
      onPhoneNumberChange={(isValid, value) => {
        console.log('Valid:', isValid, 'Number:', value);
      }}
    />
  );
}

react-phone-input-2

このコンポーネントは軽量でスタンドアロンの実装を持ち、外部依存が少なく、カスタマイズ性が高いのが特徴です。国コード選択ドロップダウンと入力フィールドが一体化しており、見た目の調整もしやすいです。

// react-phone-input-2
import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/style.css';

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

  return (
    <PhoneInput
      country={'jp'}
      value={phone}
      onChange={(value, country) => {
        setPhone(value);
        console.log('Country code:', country.dialCode);
      }}
      inputProps={{
        name: 'phone',
        required: true
      }}
    />
  );
}

react-phone-number-input

このライブラリは、電話番号の検証・正規化・フォーマットに特化した libphonenumber-js を内部で使用しており、データの正確性と国際標準への準拠に重点を置いています。UIはシンプルですが、電話番号そのものの扱いが非常に堅牢です。

// react-phone-number-input
import { PhoneInput } from 'react-phone-number-input';
import 'react-phone-number-input/style.css';

function PhoneInput() {
  const [value, setValue] = useState();

  return (
    <PhoneInput
      international
      defaultCountry="JP"
      value={value}
      onChange={setValue}
    />
  );
}

🔍 電話番号の検証と正規化

react-intl-tel-input

内部でGoogleの libphonenumber の古いバージョンを使用していますが、手動で追加のスクリプトを読み込む必要があり、バンドルサイズも大きくなります。また、検証結果はコールバック経由でしか取得できず、Reactの状態管理と同期しにくいです。

react-phone-input-2

電話番号の検証機能は内蔵されておらず、入力された文字列をそのまま返します。検証が必要な場合は、別途 libphonenumber-js や他のバリデーションライブラリと組み合わせる必要があります。

// react-phone-input-2 + libphonenumber-js で検証
import { isValidPhoneNumber } from 'libphonenumber-js';

const handlePhoneChange = (value, country) => {
  const fullNumber = '+' + country.dialCode + value;
  if (isValidPhoneNumber(fullNumber)) {
    // 有効な番号
  }
};

react-phone-number-input

電話番号の検証と正規化が最初から組み込まれています。onChange で返される値は常にE.164形式（例: +819012345678）であり、無効な入力の場合は undefined になります。これにより、フォーム送信時のバリデーションが非常にシンプルになります。

// react-phone-number-input：検証済みの値のみ取得
const [phoneNumber, setPhoneNumber] = useState();

// phoneNumber が undefined なら無効、文字列なら有効
const isValid = phoneNumber !== undefined;

🎨 UI/UXとカスタマイズ性

react-intl-tel-input

UIは元のjQueryプラグインに依存しており、CSSのオーバーライドが難しく、モダンなデザインシステムとの統合に課題があります。

react-phone-input-2

CSSクラスが豊富に用意されており、テーマのカスタマイズが容易です。フラグアイコンの表示、検索機能、カスタムラベルなど、多くのUIオプションを提供します。

<PhoneInput
  enableSearch
  searchPlaceholder="国名を入力"
  localization={{ jp: '日本' }}
/>

react-phone-number-input

UIは最小限に抑えられており、カスタマイズ性はやや低めです。ただし、inputComponent プロパティを使えば、独自の入力コンポーネントを注入できます。

// カスタム入力コンポーネントの使用
<PhoneInput
  inputComponent={CustomInput}
  defaultCountry="JP"
/>

🌐 日本語（ja-JP）対応

すべてのパッケージが日本語環境で動作しますが、細かい点に違いがあります。

• react-intl-tel-input: 国名の翻訳は英語固定で、日本語表示には追加の設定が必要。
• react-phone-input-2: localization プロパティで国名を日本語に置き換え可能。
• react-phone-number-input: 国名表示は英語がデフォルトだが、react-phone-number-input/locale/ja をインポートすることで日本語化可能。

// react-phone-number-input の日本語化
import 'react-phone-number-input/locale/ja';

<PhoneInput defaultCountry="JP" />
// → 国選択メニューが「日本」になる

📦 依存関係とバンドルサイズ

• react-intl-tel-input: libphonenumber のフルビルドを含むため、バンドルサイズが非常に大きい（1MB以上）。
• react-phone-input-2: 依存が少なく、軽量（約100KB未満）。
• react-phone-number-input: libphonenumber-js のサブセットを使用しており、必要な国だけを含めることが可能（約200–300KB）。

✅ まとめ：どのパッケージを選ぶべきか？

推奨シナリオ

• データの正確性が最重要（例: 本人確認、SMS認証）→ react-phone-number-input
• UI/UXの自由度が最重要（例: ブランディング重視のLP）→ react-phone-input-2
• 新規プロジェクト → react-intl-tel-input は絶対に使わない

最終的には、電話番号を「ただの文字列」として扱うか、「構造化された識別子」として扱うかで選ぶべきライブラリが決まります。後者であれば、react-phone-number-input が最も堅牢で将来性のある選択肢です。