React Nativeとは
まずは、Expoの基礎技術である、React Nativeについて解説します。React Nativeは、Facebookを運営するMeta社が開発した、JavaScriptやTypeScriptを使ってモバイルアプリを開発するためのフレームワークです。例えば、次のようなコードを書いたとします（リスト1）。
import React from 'react';
import { Text, View } from 'react-native';
const App = () => {
return (
<View
style={{ // (1)
// React Nativeのflex-directionはcolumnがデフォルト
flex: 1, // Viewを画面全体に広げる
alignItems: 'center', // コンテンツを左右中央に配置
justifyContent: 'center', // コンテンツを上下中央に配置
}}
>
<Text>Hello, world!</Text>
</View>
ViewやTextといったコンポーネントは見慣れないかもしれませんが、Reactコンポーネントとしては一般的な形です。（1）のstyle propsも、ブラウザ向けにインラインで記述する場合と同じ書き方に見えますね。
リスト1をReact Nativeのコードとして実行すると、AndroidとiOSそれぞれで、図1のように描画されます。
こうして見ると、全画面のブラウザ（WebView）が表示されているだけではないかと勘繰ってしまいますが、実際にはもう少し込み入った仕組みで動いています。「各プラットフォームのネイティブなUIをReactの方法論で制御する」コンセプトが、React Nativeの名前の由来です。つまり、画面に表示されているテキストは、Androidでは TextView 、iOSでは UIView といった、各プラットフォームのSDKで定義された画面部品を使って描画されているのです（図2）。
React Nativeランタイムは、Hermes（ヘルメス）という独自のJavaScriptエンジンをベースに作られており、JavaScriptコードをモバイルアプリでの動作に最適化された形で実行します。
ブラウザと違って、レンダリングはネイティブUIに任せるため、DOM APIが用意されていないJavaScriptランタイムです。画面更新は、基本的にReactの仕組みの範疇で行うことになります。Reactらしい操作を行っている間はブラウザとさほど変わらない開発体験になりますが、DOM APIに対して込み入った操作をするスタイルでの開発に慣れていると、できることが少なくて戸惑うかもしれません。ブラウザでのアプリケーション開発経験者がReact Nativeを始める場合にも、多少の慣れは必要になるでしょう。
React Nativeの苦しみ
React Nativeは「ReactからネイティブUIを管理する」といった観点ではよくできたフレームワークです。しかし、カスタマイズ性を最優先に設計されているため、単独で運用すると、プロジェクト内にさまざまな技術スタックが剥き出しのまま混在することになります。
試しに、React Nativeのプロジェクト作成コマンドを npx @react-native-community/cli init MyApp のように実行してみると、図3のプロジェクトが生成されます。
AndroidアプリとiOSアプリとnpmの各プロジェクトが同居していますね。このプロジェクトを運用する場合、担当者はReact Nativeとは別に、次の技術について一定の知識を持つ必要に迫られます。
- npm：Node.jsのパッケージ管理ツール
- Gradle（グレードル）：Androidアプリで採用されているビルドシステム
- Xcode（エックスコード）：iOSアプリで採用されているIDE兼ビルドシステム
-
CocoaPods（ココアポッズ）：iOSアプリで採用されていた依存関係管理ツール
- ※ 将来的にSwift Package Manager（Swift言語向けの依存関係管理ツール）に移行される見込みです
- Bundler（バンドラー）：RubyGems（Ruby言語のライブラリ）の依存関係管理ツール
android フォルダや ios フォルダには基本的に手を入れなくて済む、などといった甘い話はなく、AndroidやiOSの固有の機能を利用するライブラリを追加する際には、それぞれのプロジェクトを編集する必要がありますし、リリースビルドの際にはGradleやXcodeを扱わなければなりません。
React Nativeのアーキテクチャを簡単に図示すると、図4の通りです。
Android SDKやiOS SDKの上に、JavaScriptエンジンを動かしたりネイティブUIを操作したりするためのランタイムの仕組みがあります。その上にJavaScriptのフレームワークとして動く部分があり、その上で私たちが作ったReactアプリケーションが動く、といった作りになっています。真っ当に運用するのであれば、Android SDKやiOS SDKでのアプリ開発の経験がある人を雇って、専任の運用チームを作ることまで視野に入れてもいい難易度だと言えるでしょう。
