本文へ移動

ホーム / App / 第2部 プラットフォームの基礎

第2部 プラットフォームの基礎・第4章

クロスプラットフォーム

★☆☆ 発展3トピック・面接 2問

1つのコードで iOS と Android を作る方法と、その得失を押さえる。

4.1Flutter・React Native・KMP

用語★☆☆ 発展
ひとことで

画面まで共通にするか(Flutter・RN)、ロジックだけ共通にするか(KMP)が大きな違い。

1つのコードから iOS と Android の両方のアプリを作る方法です。代表的な3つは、どこまでを共通にするかが違います。

観点FlutterReact NativeKotlin Multiplatform(KMP)
言語DartJavaScript・TypeScriptKotlin
共通にする範囲画面も含めてほぼ全部画面も含めてほぼ全部ロジック(通信・DB・業務処理)。画面は各 OS で作るか Compose Multiplatform
画面の描き方自前の描画エンジンで描く。どの OS でも同じ見た目各 OS の本物の部品を使うネイティブの UI(SwiftUI・Compose)
向いている場面見た目を両 OS でそろえたい、少人数Web(React)の人が多いチーム既存のネイティブアプリに少しずつ共通化を入れたい
どの層を共通にするかが違うFlutter画面:共通Dart・自前の描画ロジック:共通Dart端末の機能Platform ChannelReact Native画面:共通各 OS の本物の部品ロジック:共通JavaScript・TypeScript端末の機能ネイティブモジュールKotlin Multiplatform画面:各 OSSwiftUI・Composeロジック:共通Kotlin端末の機能expect/actualどれでも、通知・課金・ウィジェットなどはネイティブの知識が要る
色の付いた層が両 OS で共通のコード。KMP は画面を各 OS で作るのが基本

どれを選んでも、プッシュ通知・課金・ウィジェット・OS の新機能などはネイティブの知識が必要です。「ネイティブを書ける人がチームにいるか」は選ぶ前に確かめておきます。

面接ではこう答える

クロスプラットフォームの代表は Flutter、React Native、Kotlin Multiplatform で、どこまでを共通にするかが違います。Flutter は自前の描画エンジンで画面まで共通にし、React Native は各 OS の本物の部品を JavaScript から使い、Kotlin Multiplatform は通信や業務処理などのロジックを共通にして画面は各 OS で作るのが基本です。どれを選んでも、通知や課金などの OS の機能ではネイティブの知識が必要です。

ひとことで

クロスプラットフォームでも OS の機能は Swift・Kotlin のコードを呼んで使う。呼び方は Platform Channel・ネイティブモジュール・expect/actual。

クロスプラットフォームでも、カメラの細かい制御・課金・ウィジェット・OS の新機能などは、Swift や Kotlin で書いたコードを呼んで使います。呼び方はそれぞれ決まっています。

  • Flutter:Platform Channel(メッセージで Swift・Kotlin のコードを呼ぶ)。型を自動生成する Pigeon を使うと間違いが減ります。
  • React Native:ネイティブモジュール(新しい仕組みでは TurboModules・JSI で直接呼べる)。Expo を使うなら Expo Modules で書けます。
  • KMP:expect/actual で「宣言は共通、実装は OS ごと」に分けます。iOS 側からは共通コードがフレームワークとして見えます。

呼ぶ部分は、型の定義を1か所にまとめて自動生成すると、両 OS の食い違いが減ります。

面接ではこう答える

クロスプラットフォームのアプリでも、課金や通知、ウィジェットなど OS の機能は Swift や Kotlin のコードを呼んで使います。Flutter は Platform Channel、React Native はネイティブモジュール、Kotlin Multiplatform は expect と actual で、宣言を共通にして実装を OS ごとに書きます。型を自動生成する仕組みを使うと、両 OS の食い違いが減ります。

クロスプラットフォームにするかどうかは、技術の好みではなく、チームと作るアプリの性質で決めます。

判断軸クロスプラットフォームが向くネイティブが向く
チーム少人数で両 OS を出したい。Web(React)の人が多いOS ごとに担当がいる
見た目両 OS で同じデザインにしたい各 OS らしい操作感を大事にしたい
OS の機能標準的な画面と通信が中心ウィジェット・バックグラウンド・カメラ・OS の新機能を多く使う
性能一般的な一覧・入力の画面重い描画・動画・ゲームに近い動き
既存のアプリこれから作るすでにネイティブの資産が大きい(KMP で少しずつ共通化はできる)

どちらを選んでも、ネイティブを書ける人が1人もいない状態は避けます。新しい OS の対応や、ライブラリが追いつかないときに自分たちで直せる必要があるからです。

この章のまとめ

🖨 まとめシート(印刷・PDF)
  • Flutter・React Native・Kotlin Multiplatform の違い
  • ネイティブとの使い分けの判断軸
  • Flutter・React Native・KMP:画面まで共通にするか(Flutter・RN)、ロジックだけ共通にするか(KMP)が大きな違い。
  • ネイティブの機能を呼ぶ:クロスプラットフォームでも OS の機能は Swift・Kotlin のコードを呼んで使う。呼び方は Platform Channel・ネイティブモジュール・expect/actual。

この章のクイズ

面接ではこう聞かれる

まず答えを見ずに声に出して答え、そのあと開いて比べる。

Q1クロスプラットフォームを選ぶ判断軸は?

模範回答

チーム、体験、保守の3つで考えます。チームでは、今いる人の得意な言語と、両 OS を何人で見るかです。少人数で両方を出すならクロスプラットフォームが効きますし、Web の React の人が多いなら React Native、既存のネイティブアプリがあるなら KMP でロジックだけ共通にする手もあります。

体験では、OS らしい操作感や最新の OS 機能、ウィジェット・通知・カメラなどの端末の機能をどれだけ使うかを見ます。ここが多いほどネイティブの割合が増え、共通化の効果が薄れます。保守では、フレームワークの版上げに追従する手間と、OS が新しくなったときに対応が遅れるリスク、そして結局ネイティブを書ける人が必要になる点を含めて判断します。最初に「どの機能をネイティブで書くことになるか」を洗い出すと、比べやすくなります。

深掘りされたら

  • クロスプラットフォームで困った経験はありますか?
  • 途中からネイティブに戻す判断はどんなときにしますか?

見られているポイントチーム・体験・保守のトレードオフ

Q2Flutter と React Native の違いを説明してください。

模範回答

大きな違いは画面の描き方です。Flutter は自前の描画エンジンで画面を描くので、どの OS でも同じ見た目になり、細かい見た目の差に悩みにくいです。React Native は JavaScript から各 OS の本物の部品を使うので、OS らしい見た目と操作感になります。

言語も違い、Flutter は Dart、React Native は JavaScript・TypeScript です。Web の React に慣れた人が多いなら React Native、見た目を両 OS でそろえたいなら Flutter が選ばれやすいです。どちらも端末の機能を深く使う部分ではネイティブのコードが必要になります。

深掘りされたら

  • Kotlin Multiplatform はどんなときに選びますか?
  • ネイティブの機能を呼ぶ方法は?

見られているポイント描き方と言語の違い、選ぶ理由