React vs. Flutter：フレームワーク

![スクリーンショット 2022-04-07 8.26.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037046/a1e32318-f40e-c981-60c5-6187ac1be811.png)
React NativeとFlutterの両方が話題になっています。どちらもサイトやアプリの構築を容易にするフレームワークですが、すべてのソリューションが万人に通用するわけではないので、自分にとって最適な選択肢を調べることが重要です。今日は、ReactとFlutterの比較をしてみましょう。あなたのプログラミングのニーズに最適なのはどちらでしょうか？

今やアプリは、私たちの生活のほぼすべてを管理するために使われています。[Global Web Index](https://www.gwi.com/)によると、人々は自分の時間やその他すべてのことを把握するために、ますますモバイルアプリを利用するようになっています。
# React NativeがFlutterよりも優れている理由
この2つのプラットフォームを比較する際には、さまざまな要素を考慮する必要があります。しかし、最終的に得たい結果は、意思決定プロセスにおいて大きな役割を果たします。扱いやすく、高速で、必要な機能を備えた安定したアプリを実現できるフレームワークが必要です。もちろん、アプリの更新やコードの管理も簡単に行いたいところですが、一番の目的は、機能的で問題のない製品を最終的に手に入れることです。

React Nativeは2015年にFacebookがリリースしたもので、React（2013年から利用可能）を使ってネイティブアプリを作るためのフレームワークです。Flutterもネイティブアプリの構築を目的としていますが、ポータブルなUIツールキットです。Flutterは2018年に、Googleからリリースされました。

どちらのフレームワークも無料で、どちらもオープンソースであり、エンジニアは開発を続けています。

__ユーザーインターフェースのバリエーションが増える__
アプリのフレームワークを選ぶ際に重要なのは、ユーザーインターフェイスです。ユーザーは、異なるプラットフォームであなたのアプリをどのように体験するでしょうか？

React Nativeは、AndroidとiOSの[ネイティブコンポーネントを提供](https://www.uxpin.com/studio/blog/6-reasons-to-prototype-your-app-idea/)しているので、プラットフォームを問わず同じ体験ができます。コンポーネント、ボタン、ウィジェットなどはすべてプラットフォーム間で同じで、OSのUIを更新すると、アプリのコンポーネントもすべて即座に更新されます。React Nativeには、多種多様な外部UIキットが用意されており、その中から選ぶことができます。iOSスタイルのコンポーネントや、他のいくつかのキットからニーズに合わせて選ぶことができます。

Flutterには、インタラクティブなウィジェット、プラットフォーム、ビジュアルデザインなど、独自のデザインを持つ柔軟で高速なレンダリングのUIがあります。これらは、誰もが望んでいるわけではありませんが、ネイティブのコンポーネントを置き換えることができます。また、Flutterはピクセルレンダリングを採用しており、どのデバイスでもUIがピクセル単位で同一になるようになっています。

 [多様性とオプション](https://www.uxpin.com/studio/blog/13-ways-to-make-your-ui-writing-better/)を求めるなら、React Nativeが必要です。Flutterは柔軟性に優れていますが、種類は少なくなります。

__よりシンプルなプログラミング言語__
React NativeがJavaScriptを使用していることは、すでにご存知かもしれません。これは、ほとんどの開発者がすでに慣れ親しんでいる有名なプログラミング言語です。実際、[Stack Overflow](https://insights.stackoverflow.com/survey/2018/#technology)によると、プロの開発者の70％以上がJavaScriptに精通しています。以前にJavaScriptを使用したことがあれば、直感的に操作できます。

Flutterは、Googleがほぼ独占しているDartというプログラミング言語を使用しています。Dartを使うことで、ネイティブコードをより高速にコンパイルすることができますが、Google以外の人にとっては学習曲線が急になるということです。

この場合、多くの人はすでに知っているものにこだわりたいので、React Nativeが選ばれる傾向にあります。

__開発に必要な時間が少ない__
開発者は常に、アプリを完成させ、完璧にして送り出すことを急いでいます。つまり、Flutterよりもはるかに高速なReact Nativeが必要なのです。このフレームワークは、モバイルアプリを非常に迅速に作成できるように設計されています。これには、Dartの代わりにJavaScriptを簡単にプログラミングできることなど、さまざまな要因があります。

Flutterは、各セクションを個別にコーディングする必要があるため、時間がかかります。React Nativeでは、必要に応じて配置や調整ができる既製のコンポーネントが用意されています。また、アプリ内の他のコンポーネントに影響を与えることなく、必要に応じてこれらのコンポーネントを再利用することができます。

__異なるコーディングスタイル__
React Nativeはより複雑なコード構造を持っていますが、Webアプリ、Android、iOS、Windows OSなどを通して同じコードを使用することができます。そのため、無償で提供されているサードパーティのライブラリでコードを共有することが可能です。開発者であるあなたは、互換性があるかどうかを気にすることなく、実際のコードに集中することができます。

一方、Flutterは、よりシンプルなコードの選択肢に傾いています。すべてのコードを一箇所に集めて、すべてにアクセスすることができます。テンプレート、データ、スタイルは分離されていません。この方が使いやすいのですが、コードの共有は、AndroidとiOSの間でしかできません。これは変更されることが予想されますが、今のところ、FlutterはReactよりもはるかに制限されています。

全体として、React Nativeは[42％の開発者](https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/)に、Flutterは39％の開発者に選択されており、React Nativeが好まれていることがわかります。アプリの作成にはどちらのオプションも使用されますが、FlutterではなくReactを選択する明確な理由があります。

[UXPin](https://www.uxpin.com/jp)は、世界中の製品チームがアイデアをより早く製品にするためのデザインプロセスツールです。

UXPinの革新的なテクノロジーであるMergeにより、PayPalのような企業はDesignOpsの課題を簡単に解決することができます。[UXPin Merge](https://www.uxpin.com/merge/developers)では、Reactコンポーネントを使ってデザインし、最終製品との完全な一貫性を実現することができます。
![スクリーンショット 2022-04-07 8.49.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1037046/36623171-3b58-a6f1-4b2b-a1cc5bf0dc20.png)