【アプリ開発歴8年】Flutterとは?Flutterの特徴・メリット・デメリットを徹底解説

株式会社Pentagon (ペンタゴン) の山本です。私は、7年以上アプリ開発をしており、iPhoneアプリはもちろんAndroidの開発も行っています。言語としては、Objective-C, Swift, Kotlin, React Native, 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ツールです。

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/

ステートフルホットリロードを使えば、開発中のアプリを数秒で更新することができます。

ホットリロードとは、ソースコードを書いた時点でリアルタイムに変更がアプリに反映される機能です。

従来のネイティブアプリ開発では、コードを変更後アプリを再起動する必要があり、コードの変更を確認するまで数分かかることも少なくありませんでした。

②表現力豊かで柔軟な 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/

完全なカスタマイズが可能なアプリケーションインターフェイスを作成することができます。驚くほど高速なレンダリングと、表現力豊かで柔軟性のあるデザインの実現が可能です。

③ネイティブなパフォーマンス

“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は、1回コードをかけば、スマホアプリ・Webアプリ・デスクトップアプリがすべて開発できるというところを目指しています。

⑤ Dartというプログラミング言語による開発


Flutterでアプリを開発する場合、Dartという言語を使います。Dartは2011年にGoogleによって開発されたオープンソースプログラミング言語です。その記述の仕方は、C言語の書き方に似ています。

アプリ開発の外注をお考えの方へ

アプリ制作を依頼したいけど、どの会社に依頼したら良いかわらない...
わからないことが多くて不安ですよね?

株式会社Pentagonでは、技術力はもちろんデザインに特化した開発をしております。
また、最新技術を採用し、iOSアプリとAndroidを同時に開発することも可能です。

当社と連携することで、大手企業のアプリにも勝る「美しく使いやすくアプリ」を開発することができます。

【お問い合わせ】アプリ開発のご相談はこちらから

Flutterならアプリ開発がスピードアップ・コスト減

Flutterならホットリロードで開発時間を短縮できる他、iPhone・Android2つのOSに対してそれぞれアプリを開発する必要がなくなります。1つのコードで両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にそれぞれ配信します。

従来の開発手法では異なる言語で2つのソフトウェアを開発する必要がありましたが、Flutterを使うと1つの言語で2つの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"です。「1回書けば、すべてのプラットフォームで動く」というところを目指しています。

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の事例は?Flutterで開発されたアプリ

An open list of apps built with Flutter にて、Flutterで開発されたアプリが紹介されています。有名なアプリをいくつかあげると以下の通りです。

  • Google Ads
  • eBay
  • IKEA

実際にFlutterで開発してみた感想と評判

実際に弊社でFlutterで開発してみた感想

株式会社Pentagonでも実際にFlutterを使って大規模なアプリを開発した経験があります。開発速度は、従来の開発手法よりかなり速くなります。また、Flutterでは1つのソースコードでiOS・Android両アプリが開発できるので、修正がある場合も1回で済みます。詳しくはこちらの記事をご覧ください。

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の歴史はまだ浅いので英語のドキュメントが読めないと開発していくのが難しいかもしれません。

ネイティブコードを書かなければならない場合もある

必要なコードがFlutterのパッケージとして準備されていない場合も少なからずあります。そんなときは、iOSとAndroidのネイティブ言語を書く必要がある場合もあります。手間ではありますが、逆にネイティブ言語を書けば、OS独自の機能も呼び出せるので、メリットとも言えるかもしれません。

Flutter Webはまだまだ準備中

Flutterが目指すところは、1つのコードでモバイルアプリもWebアプリも制作できるツールです。ただ、2020年7月現在、Webサービスを開発するには、まだまだFlutterを採用するメリットが少ないと考えています。Webアプリを作る場合、一般的にはHTMLやCSSでUIを実装します。それ故、比較的簡単にUIを作ることができ、Webインスペクターでデバッグすることもできます。FlutterはWebインスペクターでデバッグできないので、レスポンシブなUIをつくるのに苦労します。

Flutterの将来性は?今後も手厚くサポートされていくのか?

Googleの動き

2020年9月、Googleの開発チームが、Google PayのモバイルアプリをFlutterで書き換えたことが話題になっています。Googleが積極的にFlutterを利用していることから、Flutterの将来性は高いと言えます。

今後Flutterでの開発が主流になっていくと確信

また、実際に当社でFlutterで大規模なアプリを開発してみましたが、十分に商用の要件に耐えることができるフレームワークでした。

近年、iOS・Android両OSに対応したアプリを迅速に開発することが求められているおり、今後Flutterでの開発が主流になっていくと感じています。

まとめ

Flutterには、人材の採用が難しいというデメリットがあるものの、Flutterで開発をすると大幅に開発・保守・運用のコストを削減できることが見込めます。Googleトレンドを見てもわかる通り、人気がでてきているフレームワークなので、1回ソースコードを書けば、モバイルアプリも作れて、Webサービスも作れる日が近いかもしれません。

当社PentagonでもFlutterでのアプリ開発をしております。アプリ開発を企画されている方は、お気軽にお問い合わせください。

\アプリ・Webサイト制作のご相談はこちら/ お問い合わせ