10
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

シーエー・アドバンスAdvent Calendar 2024

Day 5

React Native(EXPO)とFlutterの比較:2024年のクロスプラットフォーム開発

Last updated at Posted at 2024-12-04

はじめに

私はWeb開発を業務で行っています(ここ最近はGoでバックエンドを一年ぐらいしてますが、React.jsなどのフロント側も2,3年ぐらい?は開発していました)。
最近新しいことに挑戦したいと思い、React Native(EXPO)とFlutterの両方を使って、TODOアプリや写真登録、いいね機能などの基本的な部分を開発してみました。その所感を共有したいと思います。:santa:

※バックエンドはFirebase を使いました。本記事はFirebase については触れません。:bow:

クロスプラットフォームフレームワークとは?

単一のコードベースで複数のプラットフォーム(例えばiOSやAndroid)に対応するアプリケーションを開発するためのフレームワークです。これにより、開発者は異なるプラットフォームごとに個別のコードを書く必要がなくなり、開発効率が向上します。
クロスプラットフォームフレームワークは、ネイティブアプリのようなパフォーマンスを提供しつつ、開発コストを削減することが可能です。
今回紹介するReact NativeやFlutterがその クロスプラットフォームフレームワークになります。

React NativeやFlutterの 特徴、利点、欠点はいろんな記事で紹介しているため簡単に載せておきます

React Native

  • 特徴:JavaScriptを使用し、Reactのコンポーネントベースアーキテクチャを採用
  • 利点:大規模なコミュニティ、豊富なライブラリ、ホットリロード機能、既存のウェブ技術の再利用が可能
  • 欠点:ネイティブアプリに比べてパフォーマンスが劣る場合がある

Flutter

  • 特徴:GoogleのDart言語を使用し、全てがウィジェットとして構築される
  • 利点:高いパフォーマンス、カスタマイズ可能な豊富なウィジェット、複数プラットフォームへの対応
  • 欠点:Dart言語の学習が必要、React Nativeに比べてコミュニティがやや小さい

比較

パフォーマンス

React NativeはJavaScriptブリッジを介してネイティブコンポーネントと通信するため、パフォーマンスが若干低下することがあります。一方、Flutterはネイティブコードに直接コンパイルされるため、非常に高いパフォーマンスを発揮します。多くの情報源でこのように紹介されていますが、実際には非常に大きく複雑な処理を行わない限り、ユーザーが体感できるほどのパフォーマンス低下は起こらないかもしれません。(多分w)

開発効率

React NativeはJavaScriptとReactの知識があれば迅速に開発を開始できます。
FlutterはDartの学習が必要ですが、豊富なウィジェットとツールにより効率的な開発が可能です。

開発中のエラー

エラーメッセージなど問題解決にすぐ対応できそうなのはFlutterの方が良いと感じました。
私自身、React.jsについては2,3年ほど開発経験がありましたが、React Native開発中に初見のエラーメッセージや、どこでどんなエラーが出ているかわからないこともありました...orz。

本当にわからない時はシュミレーター画面をスクショを撮りChatGPTに解決してもらいました...:hear_no_evil:w。
なので一応なんとかなりますがエラー情報が少ないのが現状だなと感じました。

ライブラリに関して

React Nativeの方が豊富とされていますが、正直どちらも一長一短です。よく見かける写真登録などの機能はReact Native、Flutterのどちらもありますが、インスタのような写真をスライドできる機能に変えようとした場合、iOSは対応しているが、Androidが対応していないなどの問題もありました。(調べてみるとOSのバージョンによってもライブラリが使えるかどうかの問題もあります...w)

そのため開発中に心が折れないようにするための心構えが大事です:cop:

エコシステムとサポート

React Nativeは大規模なコミュニティと豊富なライブラリが利用可能です。Flutterはコミュニティが急速に成長しており、Googleの強力なサポートがあります。

最新の統計

2023年のStack Overflow調査では、プロフェッショナル開発者の間でFlutterが9.21%、React Nativeが9.14%の支持を得ており、ほぼ拮抗しています。

どちらを選ぶべきか?

どちらも触ってみて思うのは、どんな機能を作りたいかで決まると思います。
そこからライブラリ周りを調べ、作りたい機能がライブラリにあるか(←ここが個人的に一番重要だと思っており、iosで対応されていて、androidで対応されてないとかなると心折れますw)かどうかを確認した上で選ぶのが良いと思います。
また、開発するチームのスキルセットで決めるのが良いと思います。

まとめ

React NativeとFlutterはそれぞれ異なる強みを持つ優れたフレームワークです。プロジェクトの要件やチームのスキルセットに応じて、どちらのフレームワークを選ぶかを慎重に検討することが重要だと思いました。
あと、「React Native vs Flutter」で調べるといろんなエンジニアの意見とかも楽しいですし、今後の展望も楽しみです。

この記事が、あなたのフレームワーク選びの参考になれば幸いです。

10
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?