Ateam Group Manager ＆ Specialist Advent Calendar 2020の13日目は株式会社エイチーム引越し侍のアシスタントマネージャー、小堀が担当します！
はじめに
普段はWebアプリ開発をメインでやっております。
だた、このご時世、いつ何時モバイルアプリ開発のノウハウが必要になるかはわかりません。
そこで、この記事を書こうと思いました。
この記事では、Flutterの概要やReact Nativeとの比較にフォーカスをあてます。
具体的な開発（コード）については触れないので、ご了承ください。
普段はweb開発をしているけど、モバイルアプリの知識も欲しいという方はぜひみていってください！
2020年のモバイルアプリ開発事情とFlutter
Webの移り変わり同様、モバイルアプリもここ数年で大きく変わっていっています。
JavaとObjective-Cでモバイルアプリ開発をしていた時代から、
ネイティブのモバイルアプリ開発で用いられるのは、KotolinやSwiftへ移り変わり、
クロスプラットフォームとしては、ReactNativeやFlutterとさまざまな選択肢が出てきました。
その中でも今回取り上げる「Flutterとは何者なのか？」とよく比較される「React Nativeとの違い」を順に説明します。
Flutterとは？
Googleが2018年に公開した、モバイルアプリフレームワークになります。
大きな特徴は以下の5点です。
- クロスプラットフォームで動く
- Dartという言語を用いて書く
- ホットリロードで高速開発できる
- UIライブラリが豊富
- ネイティブと同等のパフォーマンス
1. クロスプラットフォームで動く
iOS、Androidそれぞれでコードを管理し、記述量も2倍となってくると目に見えて大変なので、クロスプラットフォームはとても魅力的に思えます。
デメリットとして、一部、ライブラリ等で対応できていないネイティブ機能があるようですが、Google製ということもあり、ライブラリも拡充しており、おおよそのことはネイティブのコードを書かなくても実現できそうです。
2. Dartという言語を用いて書く
モバイルアプリを作ることをメインに作られた言語のため、
UI作りに最適化されています。
Flutterのサンプルアプリをざっとみてみると、言語の特徴はある程度掴めるかと思います。
https://flutter.dev/docs/get-started/codelab
3. ホットリロードで高速開発できる
モバイルアプリ開発では、ビルドに時間がかかるという課題を長らく抱えていました。
ただ、FlutterはホットリロードでリアルタイムにUIを確認しながら開発することができます。
Webアプリでフロントエンド開発をしている方は、ホットリロードに慣れているかと思うので、この機能はありたいですね。
4. UIライブラリが豊富
標準コンポーネントとして、マテリアルデザインのUIが用意されています。
もちろん完全にカスタマイズすることも可能です。
5. ネイティブ同等のパフォーマンス
Flutterでは、Dartのネイティブコンパイラにより、ネイティブマシンコードにコンパイルされるため、
ネイティブアプリ同等のパフォーマンスがあります。
React Nativeとの違い
クロスプラットフォームにおいて、React Nativeは大きな選択肢の一つです。
特にWebアプリ開発のノウハウを最大限に生かせるReact Nativeはとても魅力的に思えます。
会社の状況や個人のスキルに応じて変わってくる部分も多いと思うので、
単純な比較でできる限り個人的な感情は排除して比較していきます。
1. 人気
それぞれ良い点が違うので、単純な人気で測れない部分もありますが、
コミュニティの活発やライブラリの拡充などに寄与してくるので、
Githubスター数やGoogle検索トレンドをみておきます。
人気度や勢いはFlutterの方が強そうです。
Githubスター数
Flutter： 109k
React Native： 92.1k
Google検索トレンド
2. パフォーマンス
Flutterは上に記載した通り、ネイティブ同等のパフォーマンスを持っており、
React Nativeよりもパフォーマンスは良いとされています。
3. 開発体験
ホットリロードはどちらも対応しており、エディタもネイティブアプリと比べると共に自由度が高くなっています。
4. 技術的難易度
こちらは、今までの経験によって変わってくることかと思います。
FlutterはDartという言語を用い、React Nativeはjsやtsを使えるため、
Webアプリ開発でReactを用いていた人にとっては、React Nativeの方が難易度は低く、
Flutterの方がハードルがあるかもしれません。
ただ、そこまでFlutterに特殊な構文があるわけではなく、アプリに特化した言語のため、チャレンジする価値はありそうです。
5. デプロイ
React Nativeはjsのため、ストアを通さずにUIの変更をすることも可能です。
ストア審査は厳しく、時間もかかるため、FlutterよりもReact Nativeの方が優れているかと思います。
おわりに
普段Webアプリ開発をやっていて、なかなかモバイルアプリの知識を仕入れる機会がなかったので、
今回はFlutterについて色々調べてみました。
皆さんのご参考になれば幸いです。