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

国際電話番号を扱うUIコンポーネントは、フォーム実装でよく必要になります。しかし、それぞれのnpmパッケージには設計思想や技術的トレードオフが大きく異なります。この記事では、プロフェッショナルなフロントエンド開発者がアーキテクチャ選定を行う際に役立つ、実践的な観点から4つの主要パッケージを比較します。

📱 基本的な使用方法とAPI設計

react-international-phone

このパッケージはシンプルでモダンなAPIを提供し、valueとonChangeによる制御型コンポーネントとして動作します。国コード（例: "JP"）と電話番号（例: "9012345678"）を別々に管理する設計です。

import { InternationalPhone } from 'react-international-phone';
import 'react-international-phone/style.css';

function App() {
  const [phone, setPhone] = useState({ country: 'JP', value: '' });

  return (
    <InternationalPhone
      defaultCountry="JP"
      value={{ country: phone.country, phone: phone.value }}
      onChange={(data) => setPhone({ country: data.country, value: data.phone })}
    />
  );
}

react-intl-tel-input

注意：このパッケージは非推奨（deprecated）です。 公式npmページおよびGitHubリポジトリに明確な非推奨通知があり、新規プロジェクトでの使用は避けるべきです。代わりにメンテナンスされている代替品を検討してください。

// 非推奨のため、新規プロジェクトでは使用しないでください
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';

<IntlTelInput
  preferredCountries={['jp']}
  onSelectFlag={(countryCode) => console.log(countryCode)}
  onPhoneNumberChange={(status, value, countryData) => {
    // 複雑なコールバック引数
  }}
/>

react-phone-input-2

非常にカスタマイズ性の高いコンポーネントで、電話番号全体を1つの文字列（例: "+819012345678"）として扱います。多くのpropsオプションがあり、細かい見た目や動作の調整が可能です。

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

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

  return (
    <PhoneInput
      country={'jp'}
      value={phone}
      onChange={(phone, country, e, formattedValue) => setPhone(phone)}
      inputClass="custom-input"
      buttonClass="custom-button"
    />
  );
}

react-phone-number-input

このパッケージは電話番号のバリデーションとフォーマットに特化しており、libphonenumber-jsライブラリを内部で使用しています。電話番号はE.164形式（例: "+819012345678"）で扱われ、正確なバリデーションが可能です。

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

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

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

✅ バリデーションとフォーマットの精度

react-international-phone

基本的なフォーマット機能はありますが、厳密な電話番号バリデーションは含まれていません。独自にバリデーションルールを追加する必要があります。

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

内部でlibphonenumberを使用していましたが、非推奨のため信頼性に問題があります。

react-phone-input-2

フォーマット表示は優れていますが、バリデーション機能は限定的です。isValid propで基本チェックは可能ですが、完全な国際標準準拠ではありません。

<PhoneInput
  isValid={(value, country) => {
    // カスタムバリデーションが必要
    return value.length > 10;
  }}
/>

react-phone-number-input

最も正確なバリデーションを提供します。 libphonenumber-jsを使用しているため、各国の電話番号形式に厳密に従ったバリデーションが可能です。

import { isValidPhoneNumber } from 'react-phone-number-input';

// バリデーション例
if (isValidPhoneNumber(phone)) {
  // 有効な電話番号
}

🎨 カスタマイズ性とスタイル

react-international-phone

CSS Modulesを使用しており、スタイルのカスタマイズが比較的容易です。クラス名を指定して独自のスタイルを適用できます。

<InternationalPhone
  inputClassName="my-custom-input"
  dropdownClassName="my-custom-dropdown"
/>

react-phone-input-2

最も豊富なスタイルカスタマイズオプションを提供します。inputClass、buttonClass、dropdownClassなど、各要素に対して個別にクラスを指定できます。

react-phone-number-input

スタイルのカスタマイズは可能ですが、他のパッケージと比べるとオプションが少ないです。主にCSSで上書きする必要があります。

🌐 国際化（i18n）対応

react-international-phone

言語ファイルをインポートすることで多言語対応が可能です。

import { InternationalPhone } from 'react-international-phone';
import 'react-international-phone/locales/ja';

react-phone-input-2

localization propで言語をカスタマイズできます。

<PhoneInput
  localization={{ jp: '日本' }}
/>

react-phone-number-input

国名の翻訳はreact-phone-number-input/localeからインポート可能ですが、設定がやや複雑です。

import ja from 'react-phone-number-input/locale/ja.json';

<PhoneInput
  labels={ja}
/>

📊 まとめ：各パッケージの特徴

💡 実践的な選定ガイド

• 正確な電話番号バリデーションが必要な場合 → react-phone-number-inputが最適です。金融サービスや認証システムなど、データの正確性が重要な場面で活躍します。

• 見た目の細かいカスタマイズが必要な場合 → react-phone-input-2が最適です。デザインシステムに完全に統合したい場合や、ブランドに合わせたUIが必要な場合に適しています。

• シンプルで軽量な実装が欲しい場合 → react-international-phoneが最適です。基本的な電話番号入力機能だけで十分な場合や、最小限の依存関係を保ちたい場合に適しています。

• react-intl-tel-inputは非推奨のため、新規プロジェクトでは絶対に使用しないでください。