React / JS 開発者なら、おそらくこう考えたことがあるでしょう 「React Native を学んだほうがいいでしょうか?」 これは当然の質問であり、私も数年前に自分自身に問いかけました。 。結果的に、React Native を学習したことは間違いなく正しい決断でした。これが私に Amazon のシニア デベロッパー アドボケートとしての役割を与えてくれたもので、現在は React Native を使用して Android、Fire TV、タブレット デバイスにわたるアプリを構築しています。

Web アプリの枠を超えて飛躍するかどうかを検討している場合は、検討する価値がある理由についていくつか考えてみます。

React Nativeを学ぶ理由

• 「一度学べばどこでも書ける」という哲学は、iOS や Android だけを超えて広がり、現在では tvOS、VisionOS などのプラットフォーム、さらには React-native-macos などのデスクトップ環境も含まれています

• 業界との関連性: Amazon、Meta、Microsoft などの大手企業はすべて React Native を採用しています。 なぜ？コードの再利用性、コスト効率が高く、クロスプラットフォームの構築が可能です。

• 強力なコミュニティ サポート: React Native には、GitHub 上に 100,000 を超えるスターと 24,000 のフォークがあり、定期的な更新と活発な開発が行われています。

• 開発者の高い満足度: React Native の現状調査によると、開発者の 90% が再び React Native を使用すると回答しています。

• 統合エコシステム: React Native コミュニティが Expo を中心に結集し、より迅速な改善、適切に統合されたサードパーティ ライブラリ、豊富な共有リソースにつながります。

• 使い慣れた開発者エクスペリエンス

React と React Native: 類似点と相違点

アーキテクチャとコンパイル

類似点:

どちらも、「仮想 DOM」と呼ばれることが多い調整プロセスを使用します。このプロセスでは、あるツリーを別のツリーと比較して、UI のどの部分を更新する必要があるかを判断します。このため、どちらも高速更新をサポートしており、UI の変更をリアルタイムで確認できます。

違い:

React は、DOM と Web API を活用して、Web ブラウザーでレンダリングするようにコンパイルします。モバイル ブラウザ経由でアクセスした場合でも、ブラウザの機能によって制限され、ネイティブ デバイス機能へのアクセスは制限されます。

React Native はネイティブ コードにコンパイルされ、プラットフォーム固有の API や機能に直接アクセスできます。これは、React Native アプリがカメラ アクセス、プッシュ通知などのデバイス機能を利用して、ネイティブ ユーザー エクスペリエンスを提供できることを意味します。このため、「ブリッジレス」アーキテクチャと呼ばれる、アーキテクチャに対して異なるアプローチを採用しており、DOM の代わりにネイティブ コンポーネントを備えています。 Turbo Native Module を使用し、JavaScript インターフェイス (JSI) を活用して、JavaScript とネイティブ コード間の直接通信を可能にします。このアーキテクチャは新しいものであり、「新しいアーキテクチャ」という言葉が飛び交っているのを耳にするかもしれません。詳細については、以前の記事で説明しました。

JSX とフック

類似点

どちらも UI の記述に JSX を使用し、React フック (useState、useEffect など) をサポートします。これにより、両方のライブラリにわたって一貫したコーディング スタイルと状態管理アプローチを維持できます。

コンポーネント

類似点

React と React Native はどちらもコンポーネントベースのアーキテクチャに従い、コンポーネントは内部的には同じライフサイクル メソッドに従います。

違い:

1. コンポーネントのインポート: React Native では、HTML 要素がグローバルに利用できる React とは異なり、反応ネイティブから UI コンポーネントをインポートします。この違いは、実際に React Native について私が気に入っている点の 1 つです。なぜなら、すぐに構築済みのコンポーネントのセットにアクセスできるからです。ビュー、テキスト、画像、TextInput、ScrollView.
2. プラットフォーム固有のコンポーネント: React Native では、すぐに使える iOS および Android 向けのコンポーネントと API も提供します。
3. テキスト処理: React Native では、テキストを多くの要素に直接配置できる React とは異なり、すべてのテキストを コンポーネントで囲む必要があります。これにより、さまざまなプラットフォーム間でテキストの適切なスタイルと動作が保証され、一貫性とアクセシビリティが向上します。
4. イベント処理: React はクリック イベントに onClick を使用しますが、React Native はタッチ インタラクションに onPress を使用し、インタラクションの異なる性質を反映しています。

スタイリング

類似点

React と React Native はどちらも、コンポーネントのスタイリングに柔軟なアプローチを提供します。どちらもインライン スタイルをサポートしているため、コンポーネントにスタイルを直接適用できます。さらに、両方とも再利用可能なスタイル オブジェクトの作成を可能にします。

違い

1. スタイリング言語: React は通常、スタイル設定に CSS または CSS-in-JS ライブラリを使用しますが、React Native は JavaScript オブジェクトベースのスタイリング システムを使用しますが、いくつかの違いがあります。
   • プロパティ名: React Native はプロパティ名にキャメルケースを使用します (例: font-size の代わりに fontSize)。
   • 値の単位: React Native では、幅、高さ、fontSize などのプロパティに単位は必要ありません。寸法は密度に依存しないピクセル単位であると自動的に想定されます。
2. StyleSheet API: React Native は、スタイル オブジェクトを作成するための StyleSheet.create() メソッドを提供します。この API は、レンダリングごとにスタイル オブジェクトを再作成する必要性を減らすことでパフォーマンスを向上させます。
3. スタイル アプリケーション: クラス名を使用してスタイルを適用できる React とは異なり、React Native は style prop を使用してコンポーネントにスタイルを直接適用します。
4. 限定された CSS サブセット: React Native は、さまざまなレイアウトに適した CSS プロパティに重点を置いて、CSS プロパティのサブセットのみをサポートします。これは、一部の Web 固有のプロパティ (float など) が使用できない一方で、その他のプロパティ (flex など) は異なる動作をする可能性があることを意味します。

ライブラリとツール

類似点

React と React Native は多くのコア ライブラリを共有します。 Redux、MobX などの同じ状態管理ライブラリと、Axios や Fetch API などのデータ取得ライブラリを使用できます。

違い

Navigation: React では通常、Web ナビゲーションに React Router を使用しますが、React Native には独自の React Navigation ライブラリがあります。これは、React (Web) が通常、現在の URL パスに基づいてさまざまなコンポーネントがレンダリングされる URL ベースのナビゲーションを使用するためです。一方、React Native はスタックベースのナビゲーションを使用し、ネイティブのモバイル アプリのエクスペリエンスを模倣します。画面は互いに「スタック」され、トランジションによって新しい画面がスタックにプッシュされるか、新しい画面が「ポップ」されます。

?注: アプリを構築するときは、フォルダーに「Pages」ではなく「Screens」という名前を付けることを忘れないでください。

テスト: の概念は両方のライブラリで同様であり、コンポーネントのレンダリングとイベント シミュレーションに重点を置いていますが、特定のテスト ライブラリは異なります。 React は React Testing Library を使用しますが、React Native は React Native Testing Library (RNTL) を使用しますが、RNTL は React Test Renderer の上に軽いユーティリティ関数を提供しているだけなので、先延ばしにしないでください。

?一部の React ライブラリは、DOM の依存関係により、すべての React Native プラットフォームと互換性がない場合がありますが、すべてのライブラリのプラットフォーム互換性は (https://reactnative.directory)

で確認できます。

ユニバーサル React アプリでギャップを埋める

まだ迷っているなら、Universal React Apps の台頭は、React と React Native の間のギャップをさらに縮めている、本当にエキサイティングな分野です。通常、react-native-web を利用したユニバーサル React ライブラリとツールを使用すると、共有 React Native コードベースから iOS、Android、Web 上で実行されるクロスプラットフォーム アプリケーションを作成できます。これにより、ナビゲーション、スタイル設定、状態管理、ビジネス ロジックを共有できるようになり、各デバイス タイプ固有の規則を尊重しながら時間と労力を節約できます。

DOM とデバイスの間の境界線が曖昧になり続ける中、React Native を採用することで、マルチプラットフォーム アプリ開発のエキサイティングな世界への扉が開かれます。

始める準備ができている場合は、私のお気に入りのリソースのコメントをチェックするか、以下のコメントをチェックしてください ⬇️