はじめに

今回は、「React Nativeを学ぶなら今がベストである」という内容で記事を執筆していこうと思います。

React Nativeは最近のリアーキテクチャにより、ますます流行するだろうという見解がかなり多いです。
（このリアーキテクチャには6年半かかったと言われています）

それも踏まえて、学ぶなら今という話をします。
（投資には「稲妻が輝く瞬間に市場に居合わせなければいけない」という格言がありますが、私は、React Nativeにも同じことが言えると予想しています）

What's React Native？

React Nativeとは「JavaScriptとReactを使用して、完全にネイティブなアプリを構築できるフレームワーク」です。

React Nativeは、Reactの宣言型UIと、ネイティブプラットフォームをつなぐネイティブモジュールおよびコンポーネントシステムを組み合わせることで機能します。

つまり、React Nativeは以下のように機能します。

開発者はJavaScriptでUIとロジックを記述する
記述したコードが自動でiOSやAndroidのネイティブ要素に変換される

これにより、1つのJavaScriptコードで、ネイティブ要素を使用し、ネイティブアプリのようなシームレスなUXを実現できます。実際、iOSとAndroidの両方に対応するネイティブアプリを効率よく開発できるのです。

これがReact Nativeの概要です。

Why do you need React Native？

ネイティブプラットフォームが独自の開発ソリューションを提供している中で、なぜ私たちはReact Nativeを選ぶのでしょうか？

それは、クロスプラットフォームの効率性とネイティブ開発の特異性という二つの課題が関わっているからです。

ネイティブ開発では、各プラットフォームごとに個別のコードベースを構築する必要があり、同じ機能を複数のプラットフォームで実現するために重複した作業が発生します。これには時間やコストがかかることが容易に想像できます。

React Nativeは、JavaScriptという単一のコードでネイティブプラットフォーム上のネイティブUI要素をレンダリングすることで、この問題に対処できます。

具体的には、Reactコンポーネントをネイティブと同等のものに変換することで、プラットフォーム固有のコードを必要とせずに、ネイティブアプリのUIや操作感を提供します。

さらに、Reactや同等のフレームワーク（Next.jsなど）を通じてWebアプリを構築した経験を、ほぼそのままReact Nativeにも応用することができます。

しかし、直近のリリース以前は、JavaScriptとネイティブスレッド間の通信が非同期Bridgeに大きく依存しており、これがReact Nativeを採用しづらくする要因となっていました。

この問題に対して、最新リリースのリアーキテクチャにより、このBridgeが完全に排除され新しいアーキテクチャになったことにより、React Nativeのパフォーマンスや効率性が大きく向上しました。
だからこそ、非常にHotなフレームワークの1つと言えるのです。

では、そもそも、Bridgeとはなんなのでしょうか？

Bridgeとは

React Nativeにおける「Bridge（ブリッジ）」とは、JavaScriptコードとネイティブコード（iOSやAndroidのネイティブ側のコード）間でデータやメッセージをやり取りする仕組みのことです。React Nativeでは、JavaScriptとネイティブコード間で非同期通信を行う必要があり、このBridgeがその重要な役割を担っています。

React Nativeには主に2つのスレッドが存在します：

JSスレッド: JavaScriptコードを実行する部分で、アプリのロジックや状態管理などを処理
UIスレッド: ネイティブアプリのUIを管理し、画面の描画やユーザーの入力を処理

これらのスレッドは直接通信できないため、必ずBridgeを介してデータをやり取りする必要があります。例えば、JavaScriptでアプリのロジックを実行した結果をUIスレッドに伝え、画面を更新する処理が行われます。

具体的には、以下のような処理の流れとなっていました：

ユーザーの入力
データのJSONシリアライズ
Bridgeを通過
JSバンドル（React Nativeのバンドルされたコード）に渡る
JavaScriptで解析
データのJSONシリアライズ
UIスレッドでの実行

処理の流れを追うとわかるように、非常に複雑で重たそうな処理が行われています。実際、このBridgeを介した通信は非常に重く、アプリがカクついたり、最悪の場合はアプリが落ちる原因となることがありました。これが「React Nativeってなんか重たいよね」という印象を与えていた要因の一つです。

このように、Bridgeの仕組みに関しての理解が深まると、React Nativeのパフォーマンスが改善された背景についても気になるところです。次に、リアーキテクチャによる改善点について説明していきます。

新アーキテクチャについて

リアーキテクチャ後、最も大きな変更点はBridgeが完全に排除されたことです。これにより、従来の重い通信やカクつきが解消され、パフォーマンスが大幅に向上しました。

新しいアーキテクチャでは、JSI(JavaScript Interface)と呼ばれるC++で作られたインターフェースが導入され、JSスレッドとUIスレッドが直接通信できるようになります。これにより、ネイティブの速度でアプリが動作し、より高速な通信、複雑なアニメーション・トランジション、リアルタイムなインタラクションが可能になりました。

新アーキテクチャの4つの主要な部分

1. ネイティブレイヤーへの直接アクセス

新しいReact Native Renderer（描画エンジン）は、ネイティブレイヤーに直接同期アクセスできるようになり、イベント処理やレイアウトの同期・非同期読み取りが可能になります。これにより、UIの応答性が向上します。

具体的には、React Nativeがネイティブプラットフォーム（iOSやAndroid）のUIレイヤーに直接アクセスできるようになったということです。

先程のBridgeで解説したように、従来のアーキテクチャでは、JavaScript側とネイティブ側が非同期で通信しており、その通信に遅延が生じたり、アプリがカクついたりすることがありました。

しかし、新しいアーキテクチャでは、JavaScriptとネイティブ側が直接同期してやり取りできるようになり、遅延が減少し、UIの応用性が向上することになるのです。

2. 遅延ローディングの導入

ネイティブモジュールがデフォルトで遅延ローディングされ、必要なときにのみモジュールがロードされるため、アプリのパフォーマンスが向上します。

具体的には、アプリが必要なときにだけ特定の機能やライブラリを読み込むようになったことを意味しています。これによって、アプリが初めて起動する際や動作中に無駄にリソースを消費せず、より効率的に動作します。

3. スレッド間での効率的な更新管理

新しいRendererは、スレッド間で複数の更新ツリーを管理し、メインスレッドまたはバックグラウンドスレッドで同時更新を処理できるようになります。これにより、よりスムーズで応答性の高いUIが実現します。

新しいRendererは、UIの更新を管理する際に、複数の「更新ツリー」（UIの状態や描画のデータ構造）を同時に管理する能力を持っています。これにより、異なるスレッド（メインスレッドやバックグラウンドスレッド）で並行して処理を行うことができます。

メインスレッドまたはバックグラウンドスレッドでの同時更新処理：
- メインスレッドは、ユーザーのインタラクションやUIの更新などを担当します
- バックグラウンドスレッドは、非同期で動作する処理（例えばデータのフェッチや重い計算処理）を担当します

新しいRendererでは、これらのスレッドが協力して、UIの描画や処理を並列に行えるようになったということです。つまり、UIの更新や非同期処理がより効率的に並行して行われ、ユーザーが操作しているときに感じる「カクつき」や「遅延」が減ります。

4. 高速な通信とタスク切換えの最適化

Bridgeが削除されることで、JSからネイティブへの直接通信が可能となり、起動が高速化され、タスク切換えのオーバーヘッドが削減されます。これにより、全体的なパフォーマンスが向上します。

まとめると、新アーキテクチャは、パフォーマンスを大幅に改善するための複数の重要な変更を導入しました。これにより、React Nativeは以下の点で強化されています。

UIの応答性の向上：ネイティブレイヤーへの直接アクセスにより、イベントやレイアウト処理が高速化され、よりスムーズなユーザー体験が実現した
効率的なリソース管理：遅延ローディングにより、不要なリソースを事前にロードせず、必要なときだけモジュールをロードすることで、アプリのパフォーマンスが向上した
スレッド間の同期処理の強化：複数の更新ツリーを効率的に管理し、スレッド間での同期更新を可能にすることで、よりスムーズで反応速度の高いUIが提供される
通信の高速化：Bridgeが排除され、JSとネイティブコード間の直接通信が可能となることで、アプリの起動速度やタスク切換えが高速化され、全体的なパフォーマンスが改善された

これらの変更により、React Nativeは以前のパフォーマンス問題を解消し、より快適で効率的なアプリ開発環境を提供するようになりました。特に複雑なアニメーションやリアルタイム操作が求められるアプリケーションにおいて、その効果を実感できるでしょう。

さらに、Hotなポイントはこのリアーキテクチャだけに留まりません。
React NativeのフレームワークのExpoの進化が凄すぎるのです。

React Nativeをさらに強力にするExpo

1. use dom

まずは、以下の投稿を見てください。

この機能はuse domと宣言するだけで、webviewが実装できるという機能です。
webviewを簡単に実装できるという点も、もちろん凄すぎるのですが、Webとネイティブアプリで同じコンポーネントを使い回すことも、この機能で可能になる点が革新的すぎるのです。

これは現状、React Native Expoでしか実現できない機能の1つと言えるでしょう。

2. RSC（React Server Component）

Expoでも、いよいよRSCが使用できるようになります。
RSCはUXもDX（開発体験）も改善されるので、これは非常にHotなポイントでしょう。
（RSCの概念や技術の内容を知っていたらHotと言わざるを得ないでしょう）

Next.jsなどWebと異なる点としては、デフォルトでClient Componentなので、Server Componentにしたい箇所にuse serverを使用するということのみです。

Expoは本当にすごすぎます。
（ちなみに、Expo Routerも搭載してファイルベースルーティングをすることもできます）

Web開発者はReact Nativeへ！

ここまで見ると、React Nativeは今後、ますますHotな領域になることがお分かりになるのではないかと思います。

そして、React Nativeは、Web開発の経験をそのまま活かせる環境を提供します。特に、以下の5つの基本概念を理解すれば、React Native開発が非常にスムーズに進むことでしょう。

React Nativeの5つの概念

1. コンポーネントベースのアーキテクチャ

React Nativeは、Reactと同じくコンポーネントベースでアプリを構築します。小さなボタンや画面全体に至るまで、すべてがコンポーネントとして扱われるため、構造がシンプルで再利用可能なコードを書きやすいです。

2. Reactの機能

UIを構成するためにReactの基本機能（useState, useEffectなど）を利用できるため、Webアプリと同じように動作します。UIの管理やコンポーネントの状態管理が非常に簡単です。

例えば、以下のコードはReact Nativeでも動作します。

import React, {useState} from 'react';
import {Text, View} from 'react-native';

const HelloWorldApp = () => {
  const [name, setName] = useState('Johe Due');
  
  const handleChange: React.ComponentProps<'input'>['onChange'] = (e) => {
    setName(e.target.value)
  }
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Greeting name={name} />
      <input type="text" onChange={handleChange} />      
    </View>
  );
};

const Greeting = ({ name }: Record<'name', string>) => {
  return <Text style={{ marginBottom: '8px' }}>Hello, {name}!</Text>
}

export default HelloWorldApp;

3. Flexboxによるレイアウト

React Nativeは、レイアウトにFlexboxを使用しているため、プラットフォーム固有の調整を必要とせず、レスポンシブデザインを作成できます。Web上のCSSに慣れている方なら、直感的に使いこなせるでしょう。

また、昨今勢いがありBootstapに2倍以上の大差をつけているTailwind CSSもライブラリを導入し、少し設定するだけで使用できます。

4. ナビゲーション

React Navigationを使用することで、アプリ内のナビゲーション（スタックナビゲーション、タブナビゲーション、ドロワーナビゲーションなど）を簡単に実装できます。ユーザーがシームレスに画面を遷移できるUIを作成できます。

5. Native Modulesによるプラットフォーム固有機能の活用

React Nativeでは、プラットフォーム固有のAPIにアクセスするためのNative Modulesを利用できます。JSI（JavaScript Interface）を介して通信が最適化され、パフォーマンスが向上します。これにより、ネイティブアプリで求められる機能も容易に実現できます。

このように、React NativeはWeb開発者にとって非常に親しみやすく、効率的な開発が可能です。Expoの新機能と合わせて、React Nativeの強力な機能を活かしたアプリ開発を進めることができます。

おわりに

いかがでしたでしょうか？

React Nativeは、Web開発者にとって非常に親しみやすく、効率的な開発を可能にする強力なツールです。それに加え、Expoが提供する新機能を活用することで、より一層のパフォーマンス向上と開発の効率化が図れます。React Nativeはこれからも進化を続け、多くの開発者にとって欠かせない選択肢となることでしょう。

また、React Native以外にも盛り上がりを見せているのが、LLM（大規模言語モデル）やAIの分野です。これらの技術は、開発現場においてますます重要な役割を果たしていますが、Hotな領域はそれだけではありません。例えば、Local-FirstやWASM（WebAssembly）、SQLiteなど、今後さらに注目を集めるであろう技術がいくつもあります。

これらの用語を初めて耳にする方は、なぜこれらが流行するのか、どのような利点があるのかという視点も踏まえて、積極的に情報を収集していくことをお勧めします。技術の進化に追いつくためにも、常に最新の動向を把握し、次に来る技術に備えることが、開発者としての成長につながるでしょう。

参考文献