Flutterとは何か？ 使うメリットや特徴を理解する

Flutterで始めるモバイルアプリ開発 第1回

Flutterの特徴

　これまで、Flutter以外のフレームワークを通じて、Flutterを見てきましたが、ここからはFlutterならではの特徴を紹介します。これらを見ると、ここまで紹介してきた「文化」や「アーキテクチャー」などの違いの理由を感じることができます。

Android Studioとの高い親和性

　Flutterでモバイルアプリを開発する場合には、Android StudioがおすすめのIDEになります。Android Studioを使った際の開発画面が図5です。

図5：Android Studioを使った開発環境

　Google製のフレームワークということもあり、どうしてもiOSよりもAndroidの環境の方が親和性が高いのは否めません。すでにAndroidアプリの開発をしている方ならば使い慣れている方も多いと思いますが、同じように実行やデバッグが行えます。

　そして、iOSであっても、Android端末と同じように実行やデバッグは行えます（ただし、MacOSの場合）。そのため、iOSであってもXCodeを立ち上げる必要はありません。

Hot ReloadとHot Restart

　Flutterを使って開発していると、これまでの開発と異なる点にびっくりすることがあります。それは、コードを変更しているとその変更がすぐに実機デバイスなどに反映されることです。

　その機能を「Hot Reload」と言います。「Hot Reload」を使うと、変更した部分のみをすぐに反映できるので、画面開発などをしている最中には非常に便利な機能になります。また、変更した部分がバックグラウンドでステートを維持してしまっている場合には、「Hot Reload」では変更部分の反映ができない場合があります。この場合には、「Hot Restart」を使います。どちらもストレス無く実行され、Webアプリのように「変更したら、すぐに確認」という開発スタイルがモバイルアプリ開発でもそのまま使えます。

iOSとAndroid用の豊富な標準UIセット

　Flutterでは、AndroidとiOS用に標準で多くのUIセットを提供しています。そのため、サードパーティー製のUIを探してくる必要はありません。用意されているUIはリファレンス（図6）から見ることができます。

図6：Flutterが提供しているUIセット（Widgets）のリファレンスページ

　基本的なボタンなどのようなものだけではなく、モバイルアプリではよく使うものが多数用意されています。そして、リファレンスが英語ではありますが充実しています。また、UIが標準で用意されていることで、少々分からなくても、多くの開発者が同じUIを使って開発をしているので、すぐにノウハウなども共有されやすくなっています。このような点は特に初心者にとって大きな利点になるはずです。

Flutter DevTools（開発支援ツール）

　Flutter DevToolsは一言で言えば、Chrome devtoolsのFlutter版です。アプリ内のメモリ状況やパフォーマンスを調べることができるのはもちろん、実際の画面上のUI部分がどのようになっているかまで調べることができます。

　例えば、図7のようなアプリの表示部分で実際のUIの設定や状態がどうなっているのかを、画面上で実際に部品をタップして、見ることができます。

図7：Flutter Devtools

　画面からUIがはみ出してしまっている原因や、思い通りにレイアウトされない場合などこのツールを使うことで調べることが可能です。Web開発者にとってChrome devtoolsのようなUIを調べることができるツールがあることは当たり前と言えますが、アプリ開発者にとってはびっくりする方もいるのではないでしょうか。

まとめ

　Dartという言語であったり、アーキテクチャーも新しく作り直していたりと、それらの表面的な側面だけを見ると、全く新しいことを覚えるのは面倒だと感じる方もいると思います。実は、筆者もほかのモバイルフレームワークと比較したときに、最初に候補から外したのがこのFlutterでした。しかし、ほかのモバイルフレームワークを使って見て、改めてFlutterを見てみると異なる見方になっていました。

　それはiOSやAndroidというプラットフォームの違いを解決するためのソリューションではなく、モバイルアプリ開発自体のあり方を改善するためのソリューションという一面です。まだまだ、新しく情報が不足していると思う方もいると思うので、次回以降も深い情報や具体的な使い方などを紹介していきます。