React Native Frameworkとは何ですか？どのように機能しますか

公開: 2022-07-08

React Nativeは、クロスプラットフォームアプリ開発に最も適したフレームワークの1つであり、Facebook、Instagram、Skype Microsoft、Tesla、Shopify、Walmart、UberEatsなどの大手企業に採用されています。このフレームワークは、React.jsの制限に対処するためにFacebookチームによって作成されました。

Facebookで開発されたSDKReactは、Webアプリを構築するための実行可能なオプションでした。ただし、Facebookがモバイルファースト戦略を採用した場合、Webアプリをモバイルプラットフォームにレンダリングする必要がありました。このタスクは確かに挑戦的でした！当初、Facebookのエンジニアはモバイルウェブ上でアプリをレンダリングするためにHTML5を採用していましたが、この戦略は失敗しました。その後、モバイルネイティブコンテナ内にWebViewを埋め込みました。このアプローチも、ジェスチャとタッチイベント、キーボードAPI、画像管理機能などの必要な属性がないため、機能しませんでした。

次に、非の打ちどころのないUXを提供するためのネイティブアプリを構築する必要性に気づきました。ただし、AndroidとiOSのネイティブアプリを個別に構築するというアイデアには、障害が含まれていました。必須のコーディングプロセス、プラットフォームごとに個別のコードベース、各アプリのプロトタイプにPlaystoreの事前承認が必要だったため、反復プロセスが遅くなりました。

最後に、Facebookは内部ハッカソンを実施し、Reactの改良版であるReactNativeが造られました。 React Nativeフレームワークは、モバイルアプリ開発のワンストップソリューションとして2015年にリリースされ、同じ年にオープンソースになりました。フレームワークとその機能について詳しく見ていきましょう。

React Native：概要

React Nativeは、AndroidおよびiOSオペレーティングシステム用にネイティブにレンダリングされたモバイルアプリケーションを作成するために使用されるJavaScriptベースのモバイルアプリ開発フレームワークです。 React Nativeのユニークなセールスポイントは、開発者が単一のコードベースを使用して両方のプラットフォーム用のアプリを同時に構築できるという事実にあります。フレームワークは、JSコードをネイティブコンポーネントにコンパイルすることにより、プラットフォーム固有のモジュールとAPIを使用します。そのため、React Native開発者は、Text、View、Imagesなどのネイティブコンポーネントを、新しいコンポーネントを作成するためのビルディングブロックとして使用できます。

React NativeはReactとどう違うのですか？

React Nativeは、UIの開発に使用されるFacebookで開発されたJSライブラリであるReact forthewebに基づいています。ただし、Reactはブラウザーを対象としていますが、ReactNativeはモバイルアプリプラットフォームを対象としています。そのため、モバイルアプリの開発者は、既知のJavaScriptライブラリを使用して、ネイティブのようなルックアンドフィールのモバイルアプリを作成できるという便利さを楽しんでいます。

React Nativeは、Webで使用されるスパンプリミティブの代わりにテキストプリミティブを使用します。このテキストは、Androidアプリ用のネイティブTextViewとiOSアプリ用のネイティブiOSUIViewになります。このため、アプリ開発にJavaScriptを使用しているにもかかわらず、エンドアプリケーションはモバイルアプリのシェルに埋め込まれたWebアプリではなく、実際のネイティブなモバイルアプリです。

React Nativeアプリは、Reactアプリと同様に、JavaScriptとXML風のマークアップを組み合わせたJSXを使用して作成されます。違いは、React Nativeは、ネイティブレンダリングAPIを呼び出すために内部で「ブリッジ」を使用することです。ここでは、Objective-C / Swift APIがiOSアプリでのUIコンポーネントのレンダリングに使用され、Java /KotlinAPIがAndroidアプリの場合に使用されます。簡単に言えば、ブリッジはJSコードをプラットフォーム固有のコンポーネントに変換します。その結果、アプリはWebビューではなく実際のモバイルUIコンポーネントをレンダリングします。モバイルアプリのルックアンドフィールを付与します。さらに、React Nativeは、プラットフォームAPIのJSインターフェースを公開します。これにより、アプリはユーザーの現在地やカメラなどのスマートフォンデバイスの機能にアクセスできるようになります。

React Native Appsはどのように機能しますか？

React Nativeアプリは、ネイティブコード、JavaScriptコード、ブリッジの3つの部分に分かれています。ブリッジは、ネイティブプラットフォームで実行するためにJSコードを解釈し、ネイティブ要素とJSコード間の非同期通信を可能にします。

ReactNativeアプリケーションの機能に関係する重要なスレッド

メイン（ネイティブ）スレッド：メインスレッドはネイティブスレッドとも呼ばれ、iOSおよびAndroidアプリケーションでのUIレンダリングに使用されます。 UI要素を表示するタスクを管理し、ユーザーのジェスチャを処理します。

JavaScriptスレッド： JSスレッドは基本的にアプリのビジネスロジックを処理し、UI関数だけでなく構造も定義します。 JSスレッドの機能には、別のJSエンジン内でのJSコードの実行、API呼び出しの作成、タッチイベントの処理などが含まれます。

シャドウスレッド（シャドウツリー）：このスレッドはシャドウノードを生成し、アルゴリズムを使用してレイアウトの更新を正確なデータに変換し、UIイベントを正しくシリアル化されたペイロードに変換する数学エンジンとして機能します。

ネイティブモジュールスレッド：アプリケーションがプラットフォームAPIへのアクセスを必要とする場合は常に、プロセスはネイティブモジュールスレッドで行われます。

カスタムネイティブモジュールスレッド：このようなスレッドは、カスタムモジュールが使用されている場合にアプリのパフォーマンスを高速化するために使用されます。たとえば、React Nativeは、別のネイティブスレッドを使用してアニメーションを処理するため、このタスクはJSスレッドからオフロードされます。

前述のスレッドの中で、React Nativeアプリが機能するのに役立つ最も重要なスレッドは、ネイティブスレッドとJSスレッドです。興味深いことに、これら2つのスレッド間には直接の通信がないため、相互にブロックすることはありません。

React Nativeアプリの機能：重要なステップ

React Nativeアプリがどのように機能するかを確認してください！

ステップ1

アプリが起動すると、ネイティブスレッドがアプリを読み込み、JSコードを実行するためのJavaScriptスレッドを生成します。ネイティブスレッドは、touch、pressなどのUIイベントを聞き、これらのイベントをReactNativeブリッジを介してJSスレッドに渡します。

ステップ2

JavaScriptが読み込まれ、JSスレッドが画面にレンダリングする必要のある情報をシャドウスレッドに送信します。次に、シャドウスレッドはアルゴリズムを使用してレイアウトを計算し、ビュー位置の計算方法を決定します。次に、シャドウスレッドは、ビューをレンダリングするためにレイアウトパラメータをメインスレッドに渡します。）。

ステップ3

メインスレッドはUIイベントを収集し、それらをシャドウスレッドに送信します。イベントはシリアル化されたペイロードに変換され、JSスレッドに送信されます。

ステップ4

JavaScriptスレッドはペイロードを処理してから、UIを更新するか、ネイティブメソッドを呼び出します。

ステップ＃2、ステップ＃3、およびステップ＃4は、JavaScriptのイベントループが繰り返されるたびに継続的に繰り返されます。

JSスレッドのすべてのイベントループが完了すると、ネイティブ側はネイティブビューへのバッチ更新を受け取ります。これらは、ネイティブスレッドで実行されます。アプリのパフォーマンスを維持するために、バッチ更新は、次のフレームのレンダリングの期限までにJSスレッドからネイティブスレッドに送信される必要があることを忘れないでください。 JSイベントループでの複雑な処理による遅いJSスレッドは、UIを妨げます。遅いJSスレッドがパフォーマンスに影響を与えない唯一の例外は、ネイティブビューが完全にネイティブスレッドで行われるシナリオです。

React Native Bridgeはどのようにしてスレッド間のスムーズな相互作用を保証しますか？

React Native Bridgeを使用すると、スレッド間の非同期通信が可能になり、一方のスレッドがもう一方のスレッドをブロックしなくなります。さらに、メッセージはバッチ処理されます。メッセージは最適化された方法でスレッド間で転送されます。さらに、ブリッジはメッセージをシリアル化して、2つのスレッドが同じデータを共有したり、同じデータを使用して動作したりできないようにします。

React Native App開発環境をセットアップするにはどうすればよいですか？

Expoを使用してReactNativeアプリを作成するための環境を設定する方法は次のとおりです。

Node.jsをインストールし、Expoのコマンドラインツールを入手してから、コマンドnpm install Expo-cli –globalを配置します。 Expo cliツールがインストールされたら、expoinittodo-appと入力します。
画面が表示されます。空白のアプリの場合は「空白」オプションを選択する必要があります。 Expoのワークフロー機能も含めます。次に、アプリの名前を入力し、Enterキーを押して、セットアッププロセスを続行します。
コマンドnpmstartを使用してアプリを起動するために作成された新しいプロジェクトに移動し、アプリを停止するにはCntrl + Cを押す必要があります。開発者のサーバーが実行され、Expoマネージャー画面を含む新しいタブがWebブラウザーで開きます。

アプリは、Androidエミュレーターで実行するか、携帯電話にExpoアプリをインストールし、QRコードをスキャンしてデバイスでアプリを実行することにより、プレビューできます。その後、Atom、Sublime、Visual Studio Codeなどのテキストエディターをインストールする必要があります。これで、ReactNativeアプリを作成するために必要なすべてのツールが手に入りました。

最終評決

React Nativeは、AndroidとiOSオペレーティングシステムをターゲットとするモバイルアプリを構築する必要がある場合に選択する有益なオプションです。 React Nativeを使用したクロスプラットフォーム開発は、開発をスピードアップし、開発コストを削減します。したがって、このフレームワークは、アプリのアイデアを検証するための簡単なアプリのプロトタイプを作成する予定の起業家に最適です。

React Nativeアプリ開発に関する技術支援と専門家のガイダンスが必要ですか？米国とインドで経験豊富なReactNative開発会社であり、世界中のクライアントにワールドクラスのサービスを提供しているBiz4Solutionsにお問い合わせください。