Flutterの魅力と難点

どうも、プログラムのことになると口うるさいTです。

ここ数年、「Flutter」という開発フレームワークを推しています。FlutterはGoogleが提供している「マルチプラットフォーム向けSDK」でして、一つのコードからスマホ、デスクトップ、Webアプリをリリースすることができます。例えばiOS/Androidアプリを開発したい時は、それぞれのネイティブ言語(Swift/Kotlin)で別々に開発をするより、Flutterでまとめて開発する方がトータルコストを下げることができます。

私の所属する部署ではお客様から委託開発を受けたり、自社製品を開発したりする際、また、ちょっとした社内ツールを作る際に積極的に活用しています。

今回はそんなFlutterについて、これまで使ってきて感じた魅力と、現在進行形で悩んでいる難点について書いてみます。


まずFlutterの魅力ですが、一番はUIの開発しやすさにあると感じています。Flutterは「ウィジェット」を組み合わせることでUIを組んでいくのですが、あらかじめたくさんのウィジェットが用意されているためサクサクと開発できます。ウィジェットの数が多すぎてFlutter初心者の方は「どれを使ったらよいかわからない」という状態になるかもしれませんが、UIの「構造／レイアウト」に関するウィジェットと、具体的に目に見える「パーツ」としてのウィジェットを分けて理解すると、習得は早いと思います。

2022年に神奈川県情報サービス産業協会（略称KIA）にて勉強会を開催したのですが、全体で12～13時間ほど、各自の自習時間を加味しても20時間程度しか勉強時間がなかったにもかかわらず、参加してくださった方はかなり高度なUIを開発されていました。参加者の方々が熱心に取り組まれていたのが一番大きなポイントですが、Flutter自体もかなり学習しやすいSDKなのだと思います。


次に難点ですが、これまでお仕事で悩んできただけあってたくさんあります(笑)
そんな中でも現在進行形で悩んでいるものを何点か書こうと思います。

1点目はアーキテクチャ設計とその実現策です。
「アーキテクチャ設計」は「MVC」とか「MVVM」をイメージしています。これらを実現するためには合うOSS探して活用するか、自前でフレームワークを作りこむ必要があります。基本的にはOSSで対応しますが、どうしても学習コストが上がったり、OSSと思想が合わなかったりしてジャストフィット感がありません。かといって自前で作りこむのはコストが高すぎるため選択肢として取るのは難しいです。
直近では「GetX」というOSSを使っていまして、どう使うのがベストか探り中です。

2点目は多機能な画面を作ると重くなりがちなことです。
デスクトップアプリやPC向けWebアプリでは画面が広いため、様々な機能を1つの画面に盛り込みます。ですがそうすると結構な割合でパフォーマンスの問題が出てくる気がしています。Flutterは元々スマホアプリ向けに開発されたからか、それともこちらの作りが悪いのか、原因はハッキリと究明できていませんが、ユーザの操作感にダイレクトに影響するため、調整にはかなりの気を遣います。
ただ幸い、Flutter側もよくある重くなるポイントを把握しているようで、たいていは画像の遅延ロードや各種builderを使う形に変えることで改善できます。

3点目はWebアプリのビルドサイズが大きいことです。
Flutterは2021年にWebアプリの開発機能を安定版としてリリースしたのですが、当時から今に至るまで継続して「ビルド後のサイズがバカでかい」ことが問題になっています。例えばGoogleは「トータルサイズが1.6MB以下」を推奨しているそうです。
ですがFlutterでまっさらなプロジェクトを作成したそのままの状態でWebアプリをビルドすると、何も複雑なことをしていないにもかかわらず17MB以上になります。これはFlutterがどのデバイスでも完全に同じ見た目で動作させるためにCanvasKitを内包しているためです。実際は17MB全てが転送されるわけではなく、Gzip圧縮することで転送量を減らせるのですが、それでも最低2～3MBは転送する必要があります。
しかもライブラリや複雑な画面を追加すればするほどサイズは肥大化していきます。実際の案件ではビルドサイズが45MB程度まで肥大化し、有線LAN通信にもかかわらずWebアプリの表示に数秒かかる…ということがありました。これをスマホからLTE回線でアクセスしようものなら、一体何十秒待たされるかわかりません。一度ロードすればキャッシュが利いて次回から速くはなりますが、それでもGoogleの推奨する「1.6MB」からは大きくかけ離れていて、ユーザの体験を損なうものになります。


長々と悩みポイントを書いてしまいましたが、Flutterはとても開発しやすいフレームワークです。今後の進化によって処理の重さやビルドサイズの問題も改善されると思いますので、引き続きより良いアプリ開発のために活用していきたいと思っています。
アプリ開発に興味のある方はぜひ使ってみてください。

(T)

moni-meter
　　脱・手書き！点検データをデジタル化して誤検針削減
　　ローコストで導入しやすい設備点検支援システム

moni-stock
　　一括スキャンで入出庫・棚卸作業にかかる時間を短縮
　　お客様も現場も笑顔にする在庫管理システム

monipet
　　動物病院の犬猫の見守りをサポート
　　病院を離れる夜間でも安心

株式会社ジェイエスピー
　　横浜に拠点を置くソフトウェア開発・システム開発・
　　製品開発(moniシリーズ)、それに農業も手がけるIT企業