React vs Flutter　どちらのフレームワークがベストなのか？

[(原文) React vs. Flutter: Which Framework Works Best?](https://www.uxpin.com/studio/blog/react-vs-flutter/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=React%20vs%20Flutter%E3%80%80%E3%81%A9%E3%81%A1%E3%82%89%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8C%E3%83%99%E3%82%B9%E3%83%88%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F)
![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2020/12/The-Best-React-Design-Patterns-You-Should-Know-About-copy-8.png.webp?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=React%20vs%20Flutter%E3%80%80%E3%81%A9%E3%81%A1%E3%82%89%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8C%E3%83%99%E3%82%B9%E3%83%88%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F)

最近、React Native と Flutter の両方が話題になっています。どちらもサイトやアプリの構築を容易にするフレームワークですが、どちらか一方の方が優れています。すべてのソリューションがすべての人に当てはまるわけではないので、自分にとって最適な選択肢をリサーチすることが重要です。今日は、React vs Flutterについて見ていきましょう。

アプリは今や私たちの生活のほぼすべてを管理するために使われています。調査会社[GlobalWebIndex](https://www.globalwebindex.com/)によると、人々は時間やその他すべてのことを管理するためにモバイルアプリをますます利用するようになっています。

## React Native が Flutter よりも優れている理由

これら2つのプラットフォームを比較する際に考慮すべき要素は数多くあります。しかし、望ましい最終結果は、意思決定プロセスで大きな役割を果たします。作業が簡単で、高速で、結果として安定したアプリで必要なことを行うフレームワークが必要です。もちろん、アプリを簡単にアップデートしてコードを管理したいと思うでしょうが、主な目標は、機能的で問題のない製品を最終的に手に入れることです。

それを念頭に置いて、この2つのフレームワークが提供するものを見てみましょう。

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

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

## ユーザーインターフェイスはより多彩に

アプリのフレームワークを選択する際に考慮すべき重要な要素は、ユーザーインターフェイスです。ユーザーはさまざまなプラットフォームでアプリをどのように体験するでしょうか？

![image.png](https://studio.uxpincdn.com/studio/wp-content/uploads/2020/12/The-user-interface.png.webp?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=React%20vs%20Flutter%E3%80%80%E3%81%A9%E3%81%A1%E3%82%89%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8C%E3%83%99%E3%82%B9%E3%83%88%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F)

React NativeはAndroidとiOS用の[ネイティブコンポーネント](https://www.uxpin.com/studio/blog/6-reasons-to-prototype-your-app-idea/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=React%20vs%20Flutter%E3%80%80%E3%81%A9%E3%81%A1%E3%82%89%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8C%E3%83%99%E3%82%B9%E3%83%88%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F)を提供しているので、プラットフォームを問わず同じ体験ができます。コンポーネント、ボタン、ウィジェットなどはすべてプラットフォームをまたいで同じで、OSのUIをアップデートすると、すべてのアプリのコンポーネントがすぐにアップデートできます。React Nativeには、多種多様な外部UIキットが用意されています。iOSスタイルのコンポーネントから選ぶこともできますし、他にもいくつかのキットからニーズに合わせて選ぶこともできます。

Flutterは、インタラクティブなウィジェット、プラットフォーム、ビジュアルデザインなど、柔軟で高速なレンダリングが可能な独自デザインのUIを持っています。これらは、誰もがやりたがらないネイティブコンポーネントの代わりになります。また、Flutter はピクセルレンダリングを使用して、すべてのデバイス上でピクセルに至るまで UI が同一であることを保証します。

[多様性とオプション](https://www.uxpin.com/studio/blog/13-ways-to-make-your-ui-writing-better/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=React%20vs%20Flutter%E3%80%80%E3%81%A9%E3%81%A1%E3%82%89%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8C%E3%83%99%E3%82%B9%E3%83%88%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F)を求めるなら、React Native が最適です。Flutter はより柔軟性がありますが、多様性はありません。

## よりシンプルなプログラミング言語

React NativeがJavaScriptを使用していることはすでにご存知だと思います。これはほとんどの開発者がすでに慣れ親しんでいるよく知られたプログラミング言語です。実際、[Stack Overflow](https://insights.stackoverflow.com/survey/2018/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=React%20vs%20Flutter%E3%80%80%E3%81%A9%E3%81%A1%E3%82%89%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8C%E3%83%99%E3%82%B9%E3%83%88%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F#technology)によると、プロの開発者の70%以上がJavaScriptに精通しています。Reactの使用に移る際には、以前にJavaScriptを使用したことがあれば直感的に理解できると思います。

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

この場合、ほとんどの人はすでに知っているものに固執することを好むので、React Nativeが選ばれる傾向にあります。

## 開発時間が短くて済む

開発者は常にアプリを作り、完璧に仕上げ、市場に送り出すことを急いでいます。つまり、React NativeはFlutterよりもはるかに高速なので、React Nativeを必要としているのです。このフレームワークは、モバイルアプリを非常に素早く作成できるように設計されています。これには、Dartの代わりにJavaScriptで簡単にプログラミングできるなど、数多いメリットがあるからこそです。

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

## さまざまなコーディングスタイル

React Nativeはコード構造がより複雑ですが、Webアプリ、Android、iOS、Windows OSなどを通して同じコードを使うことができます。これにより、サードパーティ製の無料ライブラリでコードを共有することが可能になります。開発者は、互換性があるかどうかを気にせず、実際のコードに集中することができます。

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

結果的に全体では、[開発者の42%](https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=React%20vs%20Flutter%E3%80%80%E3%81%A9%E3%81%A1%E3%82%89%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8C%E3%83%99%E3%82%B9%E3%83%88%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F)がReact Nativeを好んでおり、Flutterは39%が選択しており、明らかにReact Nativeの方が好まれていることがわかります。アプリの作成には両方のオプションが使用されますが、Flutter よりも React を選択する明確な理由があります。アプリやウェブページの作成をお考えですか？今すぐ [UXPin](https://www.uxpin.com/sign-up?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=React%20vs%20Flutter%E3%80%80%E3%81%A9%E3%81%A1%E3%82%89%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8C%E3%83%99%E3%82%B9%E3%83%88%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F) に無料で参加して始めましょう。

**[UXPin](https://www.uxpin.com/studio/wireframing-jp/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=React%20vs%20Flutter%E3%80%80%E3%81%A9%E3%81%A1%E3%82%89%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8C%E3%83%99%E3%82%B9%E3%83%88%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F)は、世界中の製品開発チームがアイデアをより早く製品に変えるのに役立つデザインプロセスツールです。**

**[UXPin](https://www.uxpin.com/studio/wireframing-jp/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=React%20vs%20Flutter%E3%80%80%E3%81%A9%E3%81%A1%E3%82%89%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8C%E3%83%99%E3%82%B9%E3%83%88%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F)の革新的なテクノロジーである[Merge](https://www.uxpin.com/studio/merge-jp/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=React%20vs%20Flutter%E3%80%80%E3%81%A9%E3%81%A1%E3%82%89%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8C%E3%83%99%E3%82%B9%E3%83%88%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F)を活用することでPayPalなどの企業はDesignOpsの課題を簡単に解決するができました。[UXPin Merge](https://www.uxpin.com/studio/merge-jp/?utm_source=Blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=React%20vs%20Flutter%E3%80%80%E3%81%A9%E3%81%A1%E3%82%89%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8C%E3%83%99%E3%82%B9%E3%83%88%E3%81%AA%E3%81%AE%E3%81%8B%EF%BC%9F)は、Reactコンポーネントを利用することで、最終完成品と完全な一貫性を持つデザインを実現します。**

**本記事は2020/12/30投稿を翻訳したものです。**