モバイルアプリ開発にGoogleのFlutterを使うべき8つの理由

今日モバイルユーザーがアプリに求めるものは、美しいデザイン、スムーズなアニメーション、優れた性能です。

開発者はアプリの品質や性能に妥協することなく、新たな機能をこれまで以上に速くユーザーのもとに届けなければなりません。

こうしたニーズを受けて、Googleは『Flutter』を開発しました。

Flutterとは？

Flutterは、2017年5月に公開された、Googleが無料で提供するオープンソース型のモバイルUIフレームワークです。iOS / Android向けのネイティブアプリを、スピーディかつ表現豊かに開発するための機能が備わっています。

FlutterはC、C++、Dart、Skia Graphics Engineを使ってプログラムされています。Flutterは既存のコード上で簡単に呼び出すことができ、世界中のユーザーや企業から採用されています。FlagsもGoogleにより開発されたものです。

またFlutterにはモバイルSDKが備わっており、JavaScriptブリッジを使うことなくモバイル端末に対応したデザインを作成できる、唯一のフレームワークです。モバイルSDKは強力なトラッキングアプリを開発するための開発ソースとして公開されており、無料で利用できます。

くわえてFlutterは単一のコードベースから出来ており、ネイティブARMコードに直接コンパイルし、GPUを使ってプラットフォームのAPIやサービスにアクセスできます。

FlutterとReact Nativeの違いと共通点

「GoogleのFlutterは、FacebookのReact Nativeに対抗したものだ」という声も多くありますが、私はこれについては部分的にしか正しいと思いません。Flutterは決してReact Nativeの対抗馬などではないのです。

まず最も大きな違いは、Flutterはインターネット上でよく使われる言語のいずれもを使っていないということです。React NativeがJavaScript、JSX、CSSを使う一方で、FlutterはDartという単一のコードベースを使っています（下図参照）。この単一のコードベースによりiOS / Android向けアプリを開発するために、JavaScript、Swift、C++などを使わなくてよいのです。

一方でFlutterやReact Nativeは、ともにビジネスにソリューションをもたらすものです。

AmazonやNetflixのアプリを例に見てみましょう。すでに安定したビジネスを展開しているこれらの企業がiOS / Android向けアプリを開発していると想定してください。

FlutterやReact Nativeを採用することで、これらの企業がアプリ開発に割り当てるのは1チームで済み、彼らは共通認識をもったコードベースでアプリを管理できます。FlutterやReact Nativはコスト削減に役立つだけではなく、開発チームとコードベースの管理・統率をより簡単にするのです。

▲FlutterとReact Nativeの比較

モバイルアプリ開発にFlutterを使うべき9つの理由

1. ホットリロードによりスピーディな開発が可能

Flutterはスピーディな開発に対応できるように設計されています。

ステートを利用したホットリロードにより、コードを書き換えてから1秒も絶たないうちに実際の動きを確認できます。ブラウザのリロードと同じように、更新ボタンをクリックするとコードも更新されます。この際、アプリのステートが失われることはありません。

▲ホットリロード

FacebookアプリのSDKを想像してみてください。Android向けにアプリを開発している時にリコンパイルしようとしたら、コードはとんでもないボリュームになることでしょう。すべてをリコンパイルするのに、恐らく数日はかかってしまいます。Facebookのような膨大なコードを持つアプリやプロダクトにとって、ホットリロードは必要な機能です。

またFlutterにはカスタマイズ可能なウィジェットが豊富に揃っており、これらはすべてモダンなモバイル端末対応フレームワークにより作られています。

2. 柔軟なUIで豊かな表現が可能

Flutterはウィジェット、レンダリング、アニメーションやジェスチャーなどに幅広く対応しており、スクリーン上のあらゆる要素を細かくコントロールできます。

つまり、デザインを柔軟にカスタマイズできるということです。

3. iOS / Android向けネイティブアプリどちらにも対応可能

Flutterを使ったアプリは、スクロールバー、ナビゲーション、アイコン、フォントなどの、プラットフォームに元からある要素やインターフェイスの機能を継承します。

このため、Flutterにより開発されたアプリは、App StoreとGoogle Playのどちらにも対応できます。

4. 処理速度か高速で高性能

FlutterはJavaScriptブリッジを必要とせず、処理速度が大きく向上します。

アプリの動作スピードの面でも、Flutterは優れているのです。

5. プログラミング言語 Dartを使用

Dartはオブジェクト指向のプログラミング言語で、Flutterでモバイルアプリのコードを書くのに使われています。Dartはアプリ開発フローの効率と効果を高め、使いやすく、多くのCSSパーツを利用した言語です。

Dartは世代別ガベージコレクションに使われ、不要なオブジェクト用のフレームを作るのに役立ちます。さらにUIの品質低下やシャッターを避けるため、単一のバンプポインターを持つオブジェクトを割り当てる機能もあります。

6. サードパーティ製ライブラリが不要

Flutterだけで、iOS / Androidエクスペリエンスがフル活用できます。そのためサードパーティ製のライブラリ等を多く使う必要がありません。

7. 一貫したAPI

AnimationBuilder、FutureBuilder、StreamBuilderといった機能を理解することで、Flutterの可能性は無限に広がります。

あらゆるものがウィジェットとなり、ボタンをスクリーンとして使えたり、フルページがボタンとして使えたりと、アニメーションとトランスフォーメーションでさまざまなことができます。

8. カスタマイズ可能なウィジェットキット

FlutterはiOS / Androidやマテリアルデザイン向けのカスタマイズ可能なウィジェットを豊富に揃えています。FlutterとGoogleのマテリアルデザインのコラボレーションにより、強力なUIを簡単に作り出せるようになりました。

ネイティブアプリにおいてスムーズで、サクサク動く、洗練されたデザインのアプリの使い心地をもたらします。

▲カスタマイズ可能なウィジェットキット

Flutterを使ったアプリ事例

1. ソーシャル・ネットワーキング

• KlasterMe ：コンテンツの発掘・制作アプリ
• Pairing ：独身者向けマッチングアプリ
• Meeve：オフラインで人々を繋げるアプリ
• n8 ：イベント情報収集アプリ

2. 写真・動画

• PostMuse：Instagramストーリー・写真の編集アプリ

3. 健康・フィットネス

• Reflectly：マインドフルネスアプリ
• Watermaniac：飲料水のトラッキングアプリ

4. ショッピング

• Xianyu by Alibaba：モバイルショッピングアプリ
• HuYu：アンケートに答えて賞品を受け取るアプリ

5. 音楽

• Topline：音楽レコーディングアプリ
• Music Tutor：読譜練習アプリ
• Tencent：ライブ配信アプリ
• Abbey Road Studios：ボイスメモアプリ

6. エンターテイメント

• Hamilton Musical：ミュージカルの公式アプリ
• InKino：Finnkinoシアター向け上演時間検索アプリ

7. スポーツ

• Top Goals：サッカーファン向けアプリ
• EntrenaPro：トレイナー・スポーツセンター検索アプリ

8. 金融

• Cryptomaniac Pro：暗号通貨情報アプリ
• JD Finance：金融情報アプリ

9. 教育

• School planner：生徒・教師用アプリ

10. 地図・ナビゲーション

• Station La Moins Chèr：ガソリン価格検索アプリ

11. ライフスタイル

• Pawfect Match：動物の里親探しアプリ

12. 旅行

• Flydirekt：飛行機のキャンセル待ちアプリ

13. ビジネス

• Google Ads：広告管理アプリ
• AppTree：企業アプリクライアント
• Google GreenTea：Flutterを使ったアプリの公開リスト

Flutterは、モバイルアプリのビギナー開発者とベテラン開発者、どちらにとっても役立つフレームワークです。

モバイルアプリ開発の経験が浅い開発者は、スピーディで、使うのが楽しい、モダンな方法でネイティブアプリを作成できます。経験豊富な開発者は、既存のワークフローとツールにFlutterを取り入れることで、新しく表現豊かなUIを構築できるでしょう。

まとめ

ユーザーはモバイルアプリに、優れた性能やデザインを求めています。

Google開発のFlutterを使って、より良いユーザーエクスペリエンスするアプリを開発しましょう。

（原文：Harshani Chathurika　翻訳：Yui Tamura）

こちらもおすすめ！▼