サードパーティライブラリの導入
React Nativeでは、Core Components and APIsに記載されている通り、多くのUIコンポーネントやAPIが提供されています。 しかし、ナビゲーションやプッシュ通知、ローカル認証など、React Nativeだけではアプリを開発する上で不足する機能があります。
これらの機能は、自身で開発可能ですが、サードパーティライブラリ（以降ライブラリと記載）を利用することで開発工数を大きく削減できます。
ライブラリの選定方針
このアプリでは、Expo SDKに含まれる機能を優先的に利用します。
Expo SDKはReact Nativeに不足している様々な機能を幅広く提供しています。 React NativeのGitHubで公開されているThe React Native Ecosystemでは、Partnersとして定義されており信頼性もあると考えています。
また、Expo SDKはReactやReact Native、Expo SDKが提供する機能など一部の依存パッケージについて、利用可能なバージョンを管理しています。これにより、開発者は依存パッケージの適切なバージョンを迷うことなくインストールできます。
これらの理由から、ライブラリの利用を検討する際は、まずExpo SDKが提供する機能を確認します。
実現したい機能がExpo SDKには存在しない場合、以下の観点を総合的に判断してライブラリを選定します。
| 観点 | 概要 |
|---|---|
| ライセンス | 商用利用や配布が可能なライセンスかを確認します。また、MIT LicenseやApache-2.0など比較的自由度の高いライセンス形態で提供しているかを確認します。 |
| 開発母体の信頼性 | 個人による開発か組織による開発かを確認します。組織による開発の場合は、組織の規模や実績（他にリリースしているアプリやライブラリはあるか）などを確認します。 また、React NativeのGitHubで公開されているThe React Native Ecosystemに紹介されているかも信頼性を判断する上で大きな要素になります。 |
| 経験者の有無 | チーム内に経験者がいるかを確認します。経験者がいると、導入時のコストやライブラリを誤って利用してしまなどのリスクを軽減できます。 |
| 最終リリース日 | 最終リリース日を確認します。最終リリース日があまりに古いと、React NativeやOSのバージョンアップへの追随や、脆弱性に対応できていない可能性があります。 |
| リリース頻度 | リリース頻度を確認します。リリース頻度があまりに少ないと、React NativeやOSのバージョンアップ、脆弱性への対応などが素早く提供されない可能性があります。 |
| 人気度 | GitHubのスター数などを確認します。 |
| Issueの数 | GitHubのIssueの数（Open、Close両方）を確認します。Issueが定期的にCloseされているか、ライブラリの規模や運用年数に対してIssueの数があまりに多すぎないかなどを確認します。 |
| ドキュメントの豊富さ | ライブラリの使い方や、機能一覧、FAQなどがドキュメントとして提供されているかを確認します。 |
| 機能数 | 現時点で必要としている機能以外に、どんな機能があるかを確認します。機能数が多いと、今後のアプリ開発で必要な機能が増えた場合に、新たなライブラリを検討せずに対応できる可能性が高くなります。 また、ロードマップが公表されている場合は、今後提供される見込みである機能に関しても確認します。 |
| 学習コスト | ライブラリ導入時の学習コストの高さを確認します。学習コストが高いと、ライブラリを導入しても開発工数があまり削減されない場合もあります。 また、誤った利用方法により不具合が混入してしまう場合もあります。 |
| 依存ライブラリの数 | 依存ライブラリの数を確認します。依存ライブラリが多いほど、ライブラリの変更や削除、開発終了時の影響も増えます。 |
| 自分たちでメンテナンス可能か | ライブラリのゼロデイ脆弱性を検知した場合や、ライブラリの開発が終了した場合などは、それらのライブラリのメンテナンスを自分たちで実施しなくてはいけないケースもあります。 そのため、ライブラリのソースコードなどを確認して、自分たちでメンテナンス可能かを判断します。 |
| サイズ | ライブラリのサイズが大きいと、リリースするアプリのサイズも大きくなります。そのため、アプリには必要のない機能によってライブラリのサイズが大きくなりすぎていないかを確認します。 |
ライブラリの利用を検討することが多い機能
このアプリの開発や、チーム内のメンバーの経験に基づき、ライブラリの利用を検討することが多い機能を以下に記載します。
| 機能 | 概要 |
|---|---|
| ネットワークアクセス | HTTP通信などのネットワークを使用して外部接続する機能です。 |
| ロギング | ログレベルや出力先を切り替えることができる機能です。出力先が外部サービスの場合は、そのサービスがSDKなどを提供している場合もあります。 |
| メッセージ管理 | アプリ内で表示するメッセージの一元管理や、言語に応じたメッセージを取得する機能です。 |
| プッシュ通知（リモート） | Apple Push Notification service（iOS）やFirebase Cloud Messaging（Android）などを経由したリモート通知機能です。 |
| プッシュ通知（ローカル） | リモート通知のような外部サービスを経由せず、自端末内で通知を送受信するローカル通知機能です。 |
| ローカル認証 | 顔認証や指紋認証などの生体認証機能です。 |
| ナビゲーション | 画面遷移など、画面の表示制御を実施する機能です。 |
| スプラッシュスクリーン | スプラッシュスクリーンの表示制御を実施する機能です。 |
| アプリアップデート | OTA（Over The Air）によるアプリ配信機能です。 |
| セキュアストレージ | Keychain（iOS）やKeystore（Android）などを利用したセキュアなデータが格納されているストレージにアクセスする機能です。 |
| ローカルストレージ | 平文のデータが格納されているストレージにアクセスする機能です。 |
| フォーム管理 | 入力項目の状態を管理する機能です。 |
| バリデーション | 入力値や外部から連携された値を検証する機能です。 |
| 状態管理 | 複数のコンポーネント間で共有する状態や、非同期処理（HTTP API呼び出し時など）の実行状態などを管理する機能です。 |
| WebView表示 | WebViewを使用してWebサイトを表示する機能です。 |
| アプリ内ブラウザ表示 | SFSafariViewControllerやChromeCustomTabsを使用してアプリ内にWebサイトを表示する機能です。 |
| 地図表示 | MapKit（iOS）やGoogle Mapsなどを使用して地図を表示する機能です。 |
| カメラ起動 | OSのカメラを起動する機能です。 |
| QRコード生成・表示 | QRコードを生成し、表示する機能です。 |
| バーコード生成・表示 | バーコードを生成し、表示する機能です。 |
| SVG画像表示 | SVG画像を表示する機能です。 |
| アニメーション | アニメーション機能です。 |
| UIコンポーネント | UIコンポーネントを提供する機能です。AppleのHuman Interface GuidelinesやGoogleが提供するMaterial Designでは多くのコンポーネントが定義されています。 また、デザインシステムで定義された値をテーマとして設定し、各UIコンポーネントをテーマに従って構築する機能などもあります。 |
| 自動テスト | 単体テストやE2Eテストなどを自動で実行する機能です。 |
このアプリで使用しているライブラリ
このアプリでは、以下のライブラリを使用しています。
| 機能 | ライブラリ | 補足 |
|---|---|---|
| ネットワークアクセス | axios | |
| ロギング | React Native Firebase Crashlytics | このアプリでは、ログレベルや出力先の切り替えはライブラリを利用しないで自分たちで開発しています。Firebase Crashlyticsにログを送信する機能に関してはライブラリを利用しています。 |
| メッセージ管理 | - | このアプリでは、メッセージ管理機能はライブラリを利用しないで自分たちで開発しています。 |
| プッシュ通知（リモート） | React Native Firebase Cloud Messaging Notifee | |
| プッシュ通知（ローカル） | - | このアプリには、ローカル通知機能がありません。 |
| ローカル認証 | Expo LocalAuthentication | |
| ナビゲーション | React Navigation | |
| スプラッシュスクリーン | Expo SplashScreen | |
| アプリアップデート | - | このアプリには、OTA（Over The Air）によるアプリ配信機能がありません。 |
| セキュアストレージ | Expo SecureStore | |
| ローカルストレージ | Async Storage | |
| フォーム管理 | Formik | |
| バリデーション | Yup | |
| 状態管理 | TanStack Query | TanStack Queryは非同期処理の状態管理として非常に優れたライブラリであり、機能も豊富です。その反面学習コストは高い傾向にあります。そのため、チーム内に経験者が少ない場合は、導入を慎重に検討してください。 |
| WebView表示 | React Native WebView | |
| アプリ内ブラウザ表示 | - | このアプリには、アプリ内ブラウザでWebサイトを表示する機能がありません。 |
| 地図表示 | react-native-maps | |
| カメラ起動 | - | このアプリには、OSのカメラを起動する機能がありません。 |
| QRコード生成・表示 | react-native-qrcode-svg | |
| バーコード生成・表示 | JsBarcode | |
| SVG画像表示 | react-native-svg | |
| アニメーション | React Native Reanimated | |
| UIコンポーネント | Restyle React Native DateTimePicker @react-native-picker/picker | Restyleは、UIコンポーネント自体を提供しているわけではありませんが、テーマ機能があり、Styled Systemのようにコンポーネントを作成できるライブラリです。 しかし、Restyleを利用したUIコンポーネントの作成は、型定義が難しくTypeScriptに関して十分な知識が必要となります。そのため、チーム内にRestyleやTypeScriptの経験者が少ない場合は、導入を慎重に検討してください。 |
| 自動テスト | jest jest-native React Native Testing Library |