FlutterとReact Nativeの違い — 小さな買い物メモで選び方を試す

ひよこ

買い物メモのスマホアプリを作りたい！FlutterとReact Nativeはどう選ぶの？

ペンギン先生

どちらも複数のOSに向けたアプリを作れる道具だよ。FlutterはDartとWidget、React NativeはJavaScriptやTypeScriptとReactの部品で画面を組み立てる。まず同じ1画面を作りたい、と目的をそろえよう。

ひよこ

1つのコードなら、OSごとの確認はいらない？

ペンギン先生

共通にできる部分は多いけれど、権限、キーボード、画面サイズ、OS固有の機能には差があるよ。iOSとAndroidの両方で確認し、必要なら別の実装や設定を用意するんだ。

ひよこ

画面の描き方も違う？

ペンギン先生

Flutterは独自のWidgetと描画処理を使い、React NativeはOSのネイティブコンポーネントを使うのが基本だよ。Flutterでもネイティブビューの埋め込みや環境への適応がある。完全に同じ見た目、とは保証できないんだ。

ひよこ

Reactを知っていれば、そのままWebのコードを使える？

ペンギン先生

状態や部品の考え方は役立つけれど、HTMLのdivなどをそのまま使うわけではないよ。ViewやTextなどを使い、ライブラリもReact Nativeと利用するOSで動くかを確認するんだ。

ひよこ

FlutterのImpellerなら全部の環境で同じ？

ペンギン先生

OSや端末によって適用の条件が違うよ。AndroidはAPI 29以上で既定だけれど、Vulkanに対応しない端末などでは別方式へフォールバックする。Webの描画方式も同じとは限らないんだ。

ひよこ

React Nativeの新しい仕組みなら、遅さの問題はなくなった？

ペンギン先生

New Architectureは描画やネイティブとのやり取りを改善する仕組みだけれど、すべてのボトルネックが消えるわけではないよ。0.82では旧アーキテクチャを有効にできなくなった一方、互換層は残った。使う版とライブラリを確認しよう。

ひよこ

変更した画面をすぐ見られる？

ペンギン先生

Flutterのhot reloadやReact NativeのFast Refreshで、対応する変更を反映しやすいよ。ただし状態を常に保てるわけではなく、ネイティブ側の変更などでは再起動やビルドが必要。速さの勝敗もアプリ次第だね。

ひよこ

最初に何を作って比べるといい？

ペンギン先生

商品名を入力して追加する1画面がいい入口だよ。長い名前、空欄、文字を大きくしたとき、読み上げ、キーボードを確認する。必要な機能とチームの経験、更新しやすさを見て選ぼう。

最初は「買い物メモ」の1画面を比べよう

「どちらが最強か」を決めるより、作りたいアプリの小さな部分を試すと選びやすくなります。例えば商品名を入力し、追加ボタンで一覧へ入れる買い物メモです。両方で同じ目的を作り、使う端末で確認します。

商品名：りんご
[追加する]
買い物メモ：りんご

これは完成画面を考える例で、動くソースコードではありません。最初は端末へ永続保存せず、画面内の状態で追加を試すだけでも十分。再起動後も残したいなら、保存先と読み込みの処理を別に足します。

画面ができるまでの道具の違い

Flutterは同じデザインを作りやすい一方、フォントやOSへの適応、独自に埋め込むネイティブビューもあり、すべての環境で完全に同じ見た目になるとは限りません。React Nativeもスタイルや独自コンポーネントで見た目を設計します。自動で理想のUIになるわけではありません。

1画面で確認する6つのこと

1. 入力して追加すると、期待する商品が1件増えるか。
2. 空の入力、長い商品名、同じ名前をどう扱うか。
3. キーボードが出ても入力欄とボタンを使えるか。
4. 文字サイズを大きくしたとき、ラベルが読めるか。
5. 読み上げや操作の順序は分かりやすいか。
6. 必要なOS・端末で動き、依存ライブラリを更新できるか。

この段階で「片方のコードが短い」だけを評価しません。開発チームが説明できるか、エラーを調べられるか、実機で保守できるかも選び方になります。カメラや通知などを追加する前に、対応OS・権限・パッケージの互換性を確かめましょう。

描画・更新・性能は条件付きで見る

FlutterのImpellerはiOSで使われ、AndroidではAPI 29以上で既定です。ただしVulkan非対応などでは別の描画方式へフォールバックし、Webは別方式です。「全環境の移行が完了した」とまとめません。

React Native 0.82はNew Architectureだけで動作する最初のリリースでした。ただし互換層は残っており、「旧コードが全部消えた」「ボトルネックがなくなった」という意味ではありません。現在使う版と依存の対応を確認します。

Flutterのhot reloadとReact NativeのFast Refreshは変更を確かめる道具です。保持される状態や反映できる変更には条件があり、ネイティブ側の変更では再起動やビルドが必要になります。性能は対象端末・画面・処理で測定し、方式の名前だけで優劣を決めません。

Flutterを触る入口はFlutter入門、Reactの状態と部品はReact入門へ。React Nativeの新規アプリでは、公式が案内するExpoなどのフレームワークも検討できます。

参考資料

• Flutter — Architecture — Widgetと描画・ネイティブビュー
• Flutter — Impeller — OSごとの適用とフォールバック
• Flutter — Platform adaptations — フォントなどの環境差
• Flutter — Hot reload — 状態の保持と反映の制限
• Flutter — Platform channels — OS固有機能
• React Native — Components — 基本コンポーネント
• React Native — Platform-specific code — OS別の処理
• React Native — 0.82 — New Architectureと互換層
• React Native — Fast Refresh — 保持条件
• React Native — Get started — フレームワークによる開始