Flutterとは？Flutterの特徴・メリット・デメリットを専門家が解説
株式会社Pentagon (ペンタゴン) の山本です。私は、約10年アプリ開発をしており、iPhoneアプリはもちろんAndroidの開発も行っています。言語としては、Objective-C, Swift, Kotlin, React Native, Flutterと様々な手法でアプリ開発をしてきました。そんな私が、今回、新技術であるFlutterの特徴やメリット・デメリットを詳しく説明したいと思います。
Flutterを使ったアプリ開発を検討中の方は、ぜひこちらのチェックリストを確認してみてください。パートナー選びの基礎知識や、アプリマーケティングが失敗する理由と対策をご紹介しています。
【資料を読む】このチェックリストでアプリ開発は成功する！なぜ失敗するのか解説
Flutterとは、Googleが開発したiPhone/Androidアプリを同時に制作できるツール
“Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.”
https://flutter.dev/
Flutterとは、単一のコードベースから、美しくネイティブにコンパイルされたモバイル、Web、デスクトップアプリケーションを開発することができるGoogle製のUIツールです。
従来の開発手法では、iOSアプリとAndroidアプリをそれぞれ別のソースコードで開発する必要がありましたが、Flutterを使うと１つのソースコードでiOSアプリとAndroidアプリの両方を同時に開発できるということです。
Flutterの特徴
①ホットリロードによる高速開発
“Paint your app to life in milliseconds with Stateful Hot Reload. Use a rich set of fully-customizable widgets to build native interfaces in minutes.”
https://flutter.dev/
従来のネイティブアプリ開発では、コードを変更後アプリを再起動する必要があり、コードの変更を確認するまで数分かかっていました。Flutterには、ホットリロードと呼ばれる機能があり、開発中のアプリを数秒で更新することができます。ホットリロードとは、ソースコードを書いた時点でリアルタイムに変更がアプリに反映される機能です。すぐに変更の確認ができるので、従来のネイティブアプリ開発よりも効率よく、快適に開発することができます。
②表現力豊かで柔軟な UI
“Quickly ship features with a focus on native end-user experiences. Layered architecture allows for full customization, which results in incredibly fast rendering and expressive and flexible designs.”
https://flutter.dev/
完全なカスタマイズが可能なアプリケーションインターフェイスを作成することができます。驚くほど高速なレンダリングと、表現力豊かで柔軟性のあるデザインの実現が可能です。
https://pentagon.tokyo/app/2867/③ネイティブなパフォーマンス
“Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts, and your Flutter code is compiled to native ARM machine code using Dart's native compilers.”
https://flutter.dev/
Flutter のウィジェットは、スクロール、ナビゲーション、アイコン、フォントなどの重要なプラットフォームの違いをすべて吸収します。Flutterコードは、Dartのネイティブコンパイラーによってネイティブマシンコードに変換されます。
④クロスプラットフォーム
Flutterは、”write once, run anywhere” という思想のもとに開発されています。従来の開発では、OSやプラットフォームごとにソフトウェアを開発する必要がありました。Flutterは、１回コードをかけば、スマホアプリ・Webアプリ・デスクトップアプリがすべて開発できるというところを目指しています。
⑤ Dartというプログラミング言語による開発
Flutterでアプリを開発する場合、Dartという言語を使います。Dartは2011年にGoogleによって開発されたオープンソースプログラミング言語です。その記述の仕方は、C言語の書き方に似ています。
Flutterならアプリ開発がスピードアップ・コスト減
Flutterならホットリロードで開発時間を短縮できる他、iPhone・Android２つのOSに対してそれぞれアプリを開発する必要がなくなります。１つのコードで両OSに対応することができるので、開発コストが半分とまではいかないものの、大幅にコストを削減できます。
従来のアプリ開発手法とFlutterでのアプリ開発の違い
従来の開発では、iOS・Androidアプリそれぞれのアプリを作成する必要がありました。iOSアプリは、Swiftという言語とXcodeという開発ツールを使い開発します。そして、開発したアプリをApple Storeに提出します。また、Androidアプリは、Kotlinという言語とAndroid Studioという開発ツールを使い開発します。開発したアプリは、Google Playに提出します。
一方、Flutterを使用する場合、Dartという言語とAndroid Studioを使ってアプリを開発します。開発したアプリをXcode、Android Studioを使用し、Apple Store, Google Playにそれぞれ配信します。
従来の開発手法では異なる言語で２つのソフトウェアを開発する必要がありましたが、Flutterを使うと１つの言語で２つのOSに対応したアプリを作成することができます。
FlutterとReact Nativeとの違い
iPhone・Androidアプリを同時に開発できるフレームとしてReact Nativeというフレームワークも存在します。React NativeとFlutterの違いが気になる方も多いと思うので、FlutterとReact Nativeを比較したいと思います。
FlutterとReact Nativeは思想が違う
React Nativeは”Learn once, Write anywhere”という思想のもと開発されています。「Reactを一度学べば、どのプラットフォームでもReactを使える」ということです。
一方でFlutterは、"Write once, Run anywhere"です。「１回書けば、すべてのプラットフォームで動く」というところを目指しています。
Flutterの方がReact Nativeより人気がある
React NativeもiOSアプリ・Androidアプリを同時に開発できるフレームワークとして知られています。Googleトレンドで見てみると、React NativeよりもFlutterの方が人気があることがわかります。
FlutterはReact Nativeに比べて安定
実際にReact Nativeでの開発をした経験がありますが、React Nativeはバージョンアップが激しく不具合も多い印象を受けました。またエラーの説明があまり親切ではないので、エラーの解決にかなり時間を要します。実装よりも調査に時間がかかります。
またiOSアプリの開発ツールであるXcodeのアップデートによりReact Native制のアプリがビルドできないという問題に遭遇したこともあります。
この不安定さがReact Native制のアプリの保守・運用のコストを引き上げてしまう要因になっています。
実際に、不動産のCtoCサービスで有名なAirbnbも当初はReact Nativeを採用していましたが、ネイティブでの開発に移行しました。
FlutterではOTAアップデートができない
React Nativeにも、もちろんメリットはあります。"Over The Air"アップデートとは、ストアの審査を通さずにアプリをアップデートできる方法です。React Nativeは、Javascriptベースで動作するため、Javascriptバンドルをインターネット経由で取得し、アプリを更新することができます。審査を通す必要がないので、テキストの変更や修正が素早く行えます。
開発言語はFlutterやReact NativeのほかにもSwiftなどさまざまな種類があります。それぞれの言語で、コストや性能はどのように違うのでしょうか。こちらの資料で詳しくまとめています。
【資料を読む】このチェックリストでアプリ開発は成功する！なぜ失敗するのか解説
Flutterの事例は？Flutterで開発されたアプリ
Flutterはどのようなアプリの開発に利用されているのでしょうか。ここでは、Flutterで開発されたアプリの事例を3つ紹介します。
通販アプリ「SHOPLIST」
CROOZ社は、ファッション通販アプリSHOPLISTの開発においてFlutterを採用しました。SHOPLISTはレディースの低単価商品を提供しており、ダウンロード数は200万を超えている人気アプリです。
以前はレガシーシステムを使用していましたが、技術的な負債が蓄積されていました。そこで、Flutterを導入することで、これらの課題に対処し、アプリの品質と開発効率を向上させることを目指しました。
その結果、iOS/Androidを同一設計、同一実装で開発できるフレームワークと体制により、約2倍の生産性向上を実現。また、フルスクラッチ開発を行ったことで、以前のアプリにあった「いつ誰によって書かれたかが分からないコード」を読み解く作業からの決別を実現したそうです。
参考：CROOZ TECH BLOG～読んだらわかるSHOPLISTの裏側～/【テックヒルズイベントレポート】SHOPLISTアプリを1年かけてFlutterアプリとしてリニューアルした話
求人アプリ「Green」
株式会社アトラエは、成功報酬型求人メディア「Green」のAndroidアプリ開発をFlutterで実施しました。以前はスマホアプリの開発エンジニアが不足しており、アプリの開発に多くの課題があったそうです。そこで同社は、クロスプラットフォーム開発に挑戦することを決定し、開発効率を向上させるためにFlutterを採用しました。
Flutterは初めての技術でありながら、4か月間でアプリのリリースを実現したそうです。
また、FlutterのコードはWebフロントエンドのメンバーにも理解しやすく、メンテナンス性が向上しました。
参考：note/求人メディア Green の Android アプリを Flutter で開発した裏話
ギフトアプリ「giftee」
株式会社ギフティは、ギフトアプリ「giftee」のAndroidアプリをFlutterでリニューアルしました。以前はiOSとAndroid向けのアプリをそれぞれSwiftとJavaで提供していたそうです。
同社はサービスの大幅アップデートに伴い、アプリの機能とUIをアップデートしたい意向がありました。また、サーバーサイドエンジニアがアプリを片手間で運用していたため、盤石な開発体制を整えたいこと、アーキテクチャを再構築し、継続的な改善と運用が可能なコードベースを目指したいことが、Flutter導入に踏み切った理由だったそうです。
手軽で使いやすいUI構築と高い表示パフォーマンスを実現したため、開発者はエミュレーターとVS Codeとの連携がスムーズに行えました。また、公式サイトの手順に従えば、迅速に開発が可能だった点もメリットだったそうです。
さらにCIやビルド、テスト管理がサポートされており、Firebaseとの相性も良い点もgifteeの開発には有用だったとのこと。
参考：株式会社ギフティ/Flutter でアプリをリニューアルしました
実際にFlutterで開発してみた感想と評判
実際に弊社でFlutterで開発してみた感想
株式会社Pentagonでも実際にFlutterを使って大規模なアプリを開発した経験があります。開発速度は、従来の開発手法よりかなり速くなります。また、Flutterでは１つのソースコードでiOS・Android両アプリが開発できるので、修正がある場合も１回で済みます。詳しくはこちらの記事をご覧ください。
Flutterエンジニアの声
We wanted to democratize music making. It was really important for us to have both versions of the app available as soon as possible.
https://flutter.dev/showcase
訳：私たちは音楽制作を民主化したいと思っていました。アプリの両方のバージョンをできるだけ早く利用できるようにすることは、私たちにとって本当に重要でした。
Flutter significantly reduced the time we need to develop for new feature from 1 month down to 2 weeks.
https://flutter.dev/showcase
訳：Flutterは新機能の開発期間を1ヶ月から2週間に大幅に短縮しました。
When using Flutter, 90% of the code became multi-platform and only needed to be updated once.
https://flutter.dev/showcase
訳：Flutterを使うと、コードの90%がマルチプラットフォームになり、1回の更新で済むようになりました。
Flutterのデメリットは？人材・資料・アップデート？
人材採用
新しいフレームワークなので、まだFlutterを使える技術者が少ないことが、Flutterを採用するデメリットとも言えます。ただネイティブアプリの開発経験があるエンジニアであれば、比較的容易にFlutterを使いこなせることから、弊社でもFlutterでの開発を進めています。
日本語の資料が少ない
ネイティブ言語での開発は、従来の開発手法なので、数多くの日本語のドキュメントがあります。一方でFlutterの歴史はまだ浅いので英語のドキュメントが読めないと開発していくのが難しいかもしれません。
※2022年現在、日本でもFlutterエンジニアが増えてきたことから日本語のドキュメントも増えてきました。Googleの公式ドキュメントもかなり充実しているので。資料に関してそこまで心配する必要はないでしょう。
ネイティブコードを書かなければならない場合もある
必要なコードがFlutterのパッケージとして準備されていない場合も少なからずあります。そんなときは、iOSとAndroidのネイティブ言語を書く必要がある場合もあります。手間ではありますが、逆にネイティブ言語を書けば、OS独自の機能も呼び出せるので、メリットとも言えるかもしれません。
Flutter Webはまだまだ準備中
Flutterが目指すところは、１つのコードでモバイルアプリもWebアプリも制作できるツールです。ただ、2020年7月現在、Webサービスを開発するには、まだまだFlutterを採用するメリットが少ないと考えています。Webアプリを作る場合、一般的にはHTMLやCSSでUIを実装します。それ故、比較的簡単にUIを作ることができ、Webインスペクターでデバッグすることもできます。FlutterはWebインスペクターでデバッグできないので、レスポンシブなUIをつくるのに苦労します。
また、FlutterはDartコードをjavascriptに変換してWebアプリを構築するため、SEO対策ができません。一般消費者向けのWebアプリをFlutterで作成しても、SEOによる集客が見込めないという大きなデメリットがあります。
Flutterの将来性は？今後も手厚くサポートされていくのか？
Googleの動き
🤩 @GooglePay rewrites their mobile app with @FlutterDev!
— Google Developers (@googledevs) September 19, 2020
Are you in India or Singapore? Test this version on Android and iOS. When #GooglePay fully migrates, it will be one of the largest @FlutterDev deployments.
Learn why Google Pay chose Flutter → https://t.co/RK3AbtcF71 pic.twitter.com/ldOnxEHNSs
2020年9月、Googleの開発チームが、Google PayのモバイルアプリをFlutterで書き換えたことが話題になっています。Googleが積極的にFlutterを利用していることから、Flutterの将来性は高いと言えます。
世界的にもFlutterの採用が広がっている
2022 年にstatistaが実施した開発者調査によると、Flutter は世界の開発者の多くが使用するモバイルフレームワークに成長しています。同調査によると、Futterは年々数値が増えており、反対にReact Nativeは減少気味です。
また近年、Flutterの人気度も高くなっている傾向があります。「Stack Overflow Developer Survey 2023」の「Other frameworks and libraries」では、Flutterは9.12%ということで、8.43%のReact Nativeよりも人気度が高い結果となりました。
2021年のデータではReact Nativeの方が人気は上回っていましたが、2023年のデータでは逆転しています。
さらに、Learning to Code（学習中）の順位でも5位にランクインしており、今後Futterを開発に取り入れようとしているエンジニアが増えていることも示唆しています。
今後Flutterでの開発が主流になっていくと確信
また、実際に当社でFlutterで大規模なアプリを開発してみましたが、十分に商用の要件に耐えることができるフレームワークでした。
近年、iOS・Android両OSに対応したアプリを迅速に開発することが求められているおり、今後Flutterでの開発が主流になっていくと感じています。
アプリ開発では開発手法の他にも決めなければならないことが数多くあり、それらが全てアプリマーケティングの成功を左右します。開発が進んでから困らないためにも、あらかじめ知っておくべきポイントをまとめました。
【資料を読む】アプリマーケティングの基礎を解説！これを知っているだけでC向けアプリの企画が劇的に変わる！
まとめ
Flutterには、人材の採用が難しいというデメリットがあるものの、Flutterで開発をすると大幅に開発・保守・運用のコストを削減できることが見込めます。Googleトレンドを見てもわかる通り、人気がでてきているフレームワークなので、１回ソースコードを書けば、モバイルアプリも作れて、Webサービスも作れる日が近いかもしれません。
当社PentagonでもFlutterでのアプリ開発をしております。アプリ開発を企画されている方は、お気軽にお問い合わせください。