1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

reate-react-native-library の「ライブラリタイプ」選択肢を徹底解説!📦📚

Posted at

create-react-native-library は、React Native のネイティブモジュールやコンポーネント、または純粋なJavaScriptライブラリを簡単に作成するための便利なツールです。特にネイティブコードを扱うライブラリ開発においては、初期設定が複雑なため、このツールが提供するテンプレートは非常に役立ちます。

表示される選択肢は、React Nativeがネイティブモジュールと通信するための進化してきた異なるアーキテクチャやアプローチを反映しています。

create-react-native-library 選択肢の解説 🚀

それぞれの選択肢がどのような種類のライブラリ開発を意図しているのか、その特徴とメリット・デメリットをまとめました。


1. Turbo module (新しいネイティブモジュール) ⚡

  • 概要: React Nativeの新しいアーキテクチャである「TurboModules」に対応したネイティブモジュールです。JavaScriptとネイティブコード間の通信を、従来のブリッジよりもはるかに高速かつ効率的に行うことを目的としています。
  • 特徴:
    • 型安全性: TypeScript/Flowの型定義からネイティブコードのインターフェースが自動生成されるため、JavaScriptとネイティブコード間の通信に型安全性が保証されます。これにより、開発時のエラーを減らせます。
    • 最適化された通信: JavaScriptスレッドからネイティブスレッドへの直接呼び出しを可能にし、中間層のオーバーヘッドを削減します。
    • 起動時のパフォーマンス: アプリケーションの起動時にすべてのモジュールをロードするのではなく、必要に応じて動的にロードされます(Lazy Loading)。
  • メリット:
    • パフォーマンスが大幅に向上する。
    • 型安全な通信により、開発体験と信頼性が向上する。
    • 新しいReact Nativeアーキテクチャの恩恵を最大限に受けられる。
  • デメリット:
    • まだ比較的新しい技術であり、ドキュメントやコミュニティのサポートが従来のネイティブモジュールに比べて少ない可能性がある。
    • セットアップやデバッグが従来のモジュールより複雑になる場合がある。
  • ユースケース: 高パフォーマンスが求められる、複雑なネイティブ機能(例: 画像処理、動画編集、大量データ処理)を持つライブラリ、または将来を見据えた新しいライブラリ開発。

2. Fabric view (新しいネイティブビュー) 🖼️

  • 概要: React Nativeの新しいレンダリングシステムである「Fabric」に対応したネイティブUIコンポーネント(ビュー)です。UIのレンダリングをより高速かつスムーズに行うことを目指しています。
  • 特徴:
    • 新しいレンダリングパス: React NativeのUIレンダリングがJavaScriptスレッドから独立し、ネイティブスレッドで直接実行されるようになります。これにより、UIの応答性とスムーズさが向上します。
    • 型安全性: Turbo Modulesと同様に、型定義からネイティブUIコンポーネントのプロパティが自動生成されます。
    • 同時実行性 (Concurrency): ReactのConcurrent Modeの恩恵を受け、複雑なUIでも滑らかなアニメーションやインタラクションが可能になります。
  • メリット:
    • UIのパフォーマンスと応答性が大幅に向上する。
    • より複雑でリッチなUIコンポーネントを効率的に開発できる。
    • 新しいReact Nativeアーキテクチャの恩恵を最大限に受けられる。
  • デメリット:
    • Turbo Modulesと同様に、まだ新しい技術であり、学習コストが高い可能性がある。
    • 既存のネイティブビューからの移行には手間がかかる場合がある。
  • ユースケース: 高度なカスタムUIコンポーネント(例: 複雑なグラフ、カスタムビデオプレイヤー、3Dビューアなど)、または将来を見据えたUIライブラリ開発。

3. Nitro module (実験的なネイティブモジュール) 🧪

  • 概要: Nitroは、FacebookがReact Nativeの新しいアーキテクチャのために社内で開発している実験的なモジュールシステムの一部です。これはTurbo Moduleのさらに進化形、あるいは内部的な開発段階の名称である可能性が高いです。
  • 特徴: Turbo Moduleの概念をさらに推し進めたもの、またはより低レベルな最適化や特定のユースケースに特化したものと推測されます。
  • メリット: 将来的にさらに高いパフォーマンスや特定の最適化をもたらす可能性がある。
  • デメリット:
    • 非常に実験的であり、安定性や公式サポートが期待できない可能性が高い。
    • ドキュメントがほとんどなく、変更が頻繁に行われる可能性がある。
    • 一般の開発者が選択することは推奨されない。
  • ユースケース: Facebookの内部開発者や、React Nativeのコアに貢献する非常に高度な開発者向け。一般のライブラリ開発では選択すべきではありません。

4. Legacy native module (従来のネイティブモジュール) 🌉

  • 概要: React Nativeのこれまでの(古い)アーキテクチャである「Bridge」を介して通信するネイティブモジュールです。JavaScriptからネイティブ機能(カメラ、GPS、デバイス情報など)を呼び出す際に使用されてきました。
  • 特徴:
    • JavaScript Bridge: JavaScriptスレッドとネイティブスレッドの間でメッセージを非同期にやり取りする「ブリッジ」を使用します。
    • 成熟したエコシステム: 長年の歴史があり、多くの既存のネイティブモジュールがこの形式で提供されています。
  • メリット:
    • 最も一般的で広く利用されている方式であり、多くの情報や既存のコードベースがある。
    • 比較的理解しやすく、セットアップもTurbo Moduleに比べてシンプル。
    • React Nativeの古いバージョンとの互換性がある。
  • デメリット:
    • パフォーマンスがTurbo Modulesに劣る場合がある(特に通信量が多い場合)。
    • JavaScriptとネイティブコード間の型安全性が保証されない(手動での型変換やチェックが必要)。
    • 起動時にすべてのモジュールがロードされるため、大規模なアプリでは起動が遅くなる可能性がある。
  • ユースケース: 既存のReact NativeアプリやライブラリでBridgeベースの通信を維持したい場合、または新しいアーキテクチャへの移行を急がない場合。多くの既存のライブラリがこのタイプです。

5. Legacy native view (従来のネイティブビュー) 🏞️

  • 概要: React Nativeのこれまでのレンダリングシステムに対応したネイティブUIコンポーネントです。JavaScriptからネイティブUIコンポーネント(地図、動画プレイヤーなど)をReact Nativeのコンポーネントとしてラップして使用する際に利用されます。
  • 特徴:
    • Shadow Tree: JavaScriptでUIツリーが構築され、それを元にネイティブUI要素のレイアウトが計算される「Shadow Tree」という中間表現を使用します。
    • ブリッジ経由での通信: UIのプロパティ更新などもブリッジを介して行われます。
  • メリット:
    • 最も一般的で広く利用されているUIコンポーネントの形式。
    • 既存のネイティブUIコンポーネントをReact Nativeに組み込みやすい。
  • デメリット:
    • Fabric Viewに比べてパフォーマンスやスムーズさに劣る場合がある。
    • UIの更新がJavaScriptスレッドに依存するため、JavaScriptスレッドがブロックされるとUIもフリーズすることがある。
  • ユースケース: 既存のReact Nativeアプリやライブラリで従来のUIコンポーネントを維持したい場合、または新しいレンダリングシステムへの移行を急がない場合。

6. JavaScript library (JavaScriptライブラリ) 💻

  • 概要: 純粋にJavaScript(またはTypeScript)のみで構成されるライブラリで、ネイティブコードを一切含みません。React Nativeだけでなく、WebアプリケーションやNode.js環境でも利用できる可能性があります。
  • 特徴:
    • プラットフォーム非依存: iOS/AndroidのネイティブAPIに依存しないため、クロスプラットフォームで利用できます。
    • ビルド不要: ネイティブコードのビルドプロセスが不要なため、セットアップが非常にシンプルです。
  • メリット:
    • 最も開発が容易で、学習コストが低い。
    • デバッグが簡単。
    • JavaScriptエコシステム内の既存ツール(npm, yarn, webpackなど)と完全に互換性がある。
  • デメリット:
    • ネイティブデバイスの機能(カメラ、GPS、Bluetoothなど)に直接アクセスすることはできない。
    • パフォーマンスがネイティブコードに比べて劣る場合がある(CPU集約的な処理など)。
  • ユースケース: UIコンポーネント(ネイティブUIに依存しないもの)、ユーティリティ関数、カスタムフック、状態管理ライブラリ、APIクライアント、データ処理ロジックなど。

どの選択肢を選ぶべきか? 🤔

現在(2025年6月時点)のReact Nativeの状況を考慮すると、一般的には以下のガイドラインが推奨されます。

  • 新しいライブラリを開発するなら:

    • Turbo module または Fabric view を選択することを強く推奨します。これはReact Nativeの新しいアーキテクチャ(New Architecture)に対応しており、将来性とパフォーマンスに優れています。ただし、学習コストは高めです。
    • ただし、もしそのライブラリがネイティブ機能に一切依存しない純粋なJavaScript製であれば、JavaScript library が最も簡単です。
  • 既存のプロジェクトで互換性を重視するなら:

    • 古いReact Nativeプロジェクトとの互換性を確保する必要がある場合や、新しいアーキテクチャへの移行にまだ抵抗がある場合は、Legacy native module または Legacy native view を一時的に選択することも考えられます。ただし、将来的な移行コストを考慮に入れるべきです。
  • 純粋なJavaScriptコードのみで完結するなら:

    • JavaScript library を選びましょう。最もシンプルで、ネイティブコードの知識が不要です。
  • 「Nitro module」は避けるべき:

    • これは非常に実験的なものであり、一般の開発者が選択することは推奨されません

プロジェクトの目的、必要な機能、チームのスキルセット、そしてReact Nativeのバージョンを考慮して、最適な選択をしてくださいね! 💡

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?