FlutterFlowのメリットとデメリットについて。ノーコードツールとして使えるか

ファンブリューの金井です。

弊社はシステム開発を請け負う会社ですが、お客様の提案の手段の１つとして、ノーコード・ローコードというキーワードで、さまざまなツールを触っています。

その中でもかなり柔軟性が高いなと感じている、FlutterFlowというプロダクトをご紹介します。

https://flutterflow.io/

FlutterFlowとは、その名にもある通り、スマホアプリの開発に使われるFlutterが技術のもとになっており、ウェブ画面上でスマホアプリの開発ができてしまうというツールです。

2024年4月追記：

ローカルでデバッグができるようになりました。またWindowsにも対応したようです。

今回はそんなFlutterFlowを触ってみて良かった点・悪かった点を書いてみたいと思います。

FlutterFlowのメリット

Flutterを使って開発ができる

私はこれが最大のメリットではないかと思っているのですが、FlutterFlowはFlutterで開発されているので、ソースコードをダウンロードをすれば、普通にFlutterプロジェクトとして開発できることです。

私の場合、ローコードであってもオープンソースであることや、簡単に他のシステムと連携できることなどを常に意識して選んでいます。

というのも、あるツールを使い始めるとやめられない、いわゆるベンダーロックインという状態はできるだけ避けたく、こういった余地が生まれる技術は、お客様の利益を最終的に阻害する可能性があると思っています。

FlutterFlowを使えばFlutterのコードを再利用できるので、ノーコードとしての恩恵を受けながらも、開発ができる拡張性、もしFlutterFlowをやめた場合でも開発を続けることができます。

簡単にUIが構築できる

FlutterFlowを使うと簡単にシステムのUIを構築できてしまいます。

ノーコードツールなので、ドラッグ&ドロップで好きなUIパーツを選んで画面を構成していきます。

ドラッグ&ドロップができるということは、開発しながらプレビューもできているということなので、何度もビルドしなくても開発を進めることができます。

まFlutterFlow側であらかじめ用意されたUIパーツがあるため、いくつか部品を組み合わせるだけでも、開発速度が上がるでしょう。

（ただし、FlutterFlowの理解のために、最初は一から作るのが個人的におすすめです。）

コーディングをしないからこその良さもある

Flutterだけを使ってシステムを構築すると、当然ですがコーディングが必要になります。

私の経験則にはなりますが、Flutterはコードのネストが深くなりがちで、コードが見づらくなることが多いです。

（一般的にネストが深くなると可読性が落ち、開発スピードが下がります）

FlutterFlowを使うとコーディング作業がなくなるため、インデントが深すぎてわかりづらい、といった悩みから解放されます。

またFlutterFlowはGUIで開発できることから、FlutterFlowの開発画面やドキュメントを見ることで、Flutterを使うことで、Flutterでどういった機能が実現できるのかといった理解が進みやすくなります。

FlutterFlowは連携が強く、特にFirebaseがおすすめ

アプリを作るときはFlutterのような根本の技術が必要になりますが、それに加えて、データベースであったり、APIであったり、よくある機能でいうと購入・課金の仕組みなども用意しなければなりません。

FlutterはGoogleが開発しているというのもあり、同じGoogleのプロダクトであるFirebaseとの連携がスムーズに行えます。

他にも決済システムにStripeが使えたりするので、本来では組み込みが必要なところも、ノーコードとして簡単に連携ができます。

私が試したときはSupabaseというバックエンドサービスを利用しましたが、FlutterFlowを存分に利用したいのであれば、Firebaseをお勧めします。

2023/10/23追記：

firebaseは便利ですが、Supabaseと比べて便利かというとそうでもないというの私の意見です。

ただし、firebaseの方が情報が多く、FlutterFlowも第一級でサポートをしている感じがあるので、理由がなければSupabaseを選ぶ必要もありません。

プロダクトが成長し続けている

FlutterFlowの更新頻度は高く、「これが欲しかった」という機能が追加されることもよくあります。

今後もノーコードの活用が増えていくことを考えると、FlutterFlowの成長性を考慮して、今から使い始めるというの良い選択ではないかと思います。

https://community.flutterflow.io/c/whats-new-in-flutterflow

FlutterFlowのデメリット

デバッグがしづらい

FlutterFlowはノーコードであるため、画面上の操作で不都合があればバグアイコンにカウントが表示されます。

それを見ながら対象箇所を修正していくのですが、初学者には少しわかりづらいところがあります。

例えば、参照しているデータ構造が変わって、あるUIパーツのデータに不整合が出ているとしています。

バグアイコンを押すと、対象のUIまでナビゲートをしてくれるのですが、どこの箇所かまでは教えてくれません。

画面上で赤くなっている項目が目印なので探せば見つかるのですが、ソースコードのように「ここでエラーになっています、ソースコードの何行目です」と該当箇所を明確になるわけではありません。

テストモードのビルドが遅い

これはどちらかというとFlutterの問題だとは思いますが、FlutterFlowではテストモードで実行することで、構築しているアプリの動作確認ができます。

実行するとブラウザの別タブで起動するのですが、用意されるまでに体感値で２分以上は待たされます。

FlutterFlowは有料プランにすると、テストモードが30分使えるようになりますが、開いた時には残り27分とかになっていたリします。

ちなみにテストモードは有効時間が切れると、立ち上げ直すとことで時間がリセットされます。

またFlutterFlow側で修正した内容をテストモードに反映させる時も１０秒ぐらいは待ってからリロードしないとうまく反映されません。

ある程度仕方がないとはいえ、全体的に開発体験が良いサービスなので、テストに時間がかかるところは残念です。

テストモードでデベロッパーツールを出すとリロードされる

これも先のテストモードの話と繋がるのですが、FlutterFlowではFirebaseなどのサービスと接続してシステムを構築していきます。

画面を表示した時にFirebaseからデータを取ってくる処理であったり、逆に登録する処理であったり、その際に設定ミスなどでエラーが発生することがあります。

そのデバッグには主にデベロッパーツールで確認してエラー内容を把握するのですが、FlutterFlowのテストモードは初めからデベロッパーツールは出ておらず、確認しようと思うとブラウザのリロードが必須です。

そこでまた待たされることになります。

2024年4月追記：

デベロッパーツールを開くとリロードされる問題は私の環境で再現されなくなりました。

Nullとの戦い

そして、FlutterFlowのテストモードでデベロッパーツールを出すのは良いのですが、デバッグに有益な情報が得られないことがほとんどです。

大体がNullによる参照エラーなのですが、どの変数がエラーになっているのかわからないのが辛いところです。

ビルドに時間がかかるので、トライアンドエラーが非常にしづらいところがあり、Nullを無くすにはFlutterFlow上でどのような画面設計にするかが非常に大事になってきます。

コンポーネントの表示・非表示によってデバッグをしていくことになりますが、非表示にした瞬間、表示ロジックが消えてしまうので、やりづらさを感じることでしょう。

テストモードで変更内容が反映されてないことがある

FlutterFlowのGUIで何かしらの変更を加えて、テストモードでリロードすると、たまに更新内容が反映されていないことがあり、特に不具合を修正しているときはハマる可能性があります。

修正してすぐには反映されないので、２回リロードする頃にようやく反映されます。

カスタムコードは強力だが使いづらい

FlutterFlowはノーコードで十分色々とできるツールのですが、FlutterFlow内でカスタムコードという機能があり、VSCodeベースのエディタを使って、直接コードを書くこともできます。

最初はこれを見た時は感動しましたが、触れば触るほど罠があり、現状ではあまりお勧めできません。

というのも、FlutterFlow側で自動生成したコードがあり、その部分を誤って削除すると保存ができないのですが、その理由が分かりづらく、結構な時間を費やしました。

またエディタの補完機能を使うと、ライブラリのインポートを一から記載しなくて良いので楽なのですが、インポートするライブラリは別で登録しておく必要があるのと、コードの自動挿入先は変更してはいけない箇所に勝手に入るので、このルールを知らないとエラーでハマることになります。

他にもコード補完や文法チェックが遅かったりするので、結局はローカルのVSCodeなどで簡易的な文法チェックを行なって、FutterFlowに貼り付けるということをやったりしています。

ですので、カスタムコードで実行する処理はできるだけシンプルにしたほうが良いのですが、そうなるとAPIサーバーを用意したりと、ノーコードのとしての手軽さが失われてしまいます。

若干重さを感じる

FlutterFlowは画面上でUIを構築していきますが、ワンテンポ反応が遅れるようなレスポンスを感じます。

これはFlutterFlow自身が重いのか、それとも海外のサービスだから物理的に日本よりも遠いから遅いのか分かりませんが、軽快なレスポンスを求める人には少し使いづらいかもしれません。

それでも私はコーディングするよりもずっと開発速度が上がるメリットがある感じています。

2024年4月追記：

FlutterFlowのアプリをPCにインストールすることで、この挙動の重さを感じることがなくなりました。

ただ、ウェブ版よりもVSCodeのコードが見づらかったり、Githubにプッシュするときのコメント入力がうまくできなかったりする問題があります。（これはMacだけかもしれません）

ウェブビルドに難あり

FlutterFlowの機能のホスティング機能を利用して公開すると、そんままではとんでもなく遅いサイトになってしまいます。

Flutterをウェブビルドするとdart.jsというファイルが生成されますが、これのサイズが大きいのです。

具体的には小さなプロジェクトでも5MBぐらいあり、SPAなので初回表示で必ずダウンロードがされます。

さらにFlutterFlowはサーバー海外にあるのと、さらにスペックが低いのか、初回表示で10秒以上かかることもあります。

このままではユーザーがサービスを利用する前に離脱してしまいます。

FlutterFlowでのウェブビルドは、ソースコードからビルドして自前でホスティングすることが前提になるでしょう。

コードを書いた方が早い

ノーコードツールである限り、どうやっても想定されていない使われ方を実装しなければならないタイミングがあります。

例えば、FlutterFlowのfirebaseのログインの処理は、ある程度処理が決められているため、標準のFlutterFlowの機能ではエラー時の処理を書くことができません。

やるとすればカスタム認証を使うのですが、それではせっかくのノーコードで簡単に作れるメリットを失うことになります。

それでも実装できない可能性がある

上記と被る内容ですが、どうしても画面上で実装できない機能があり、頭を悩ますことがあります。

これは相当FlutterFlowに習熟する必要があり、色々とFlutterFlowの機能を理解した上でハック的な手法で解決するか、諦めるかの２択になります。

「ここでコードが書ければ…」と思ってしまうことがあるのですが、バリバリのエンジニアでなくても使えるのが１つの売りではありますので、開発チームの能力平準化という意味では十分とも言えるかもしれません。

若干高い

FlutterFlowのコンセプトは大好きで実際のプロジェクトでも採用していますが、一人当たり月70ドルの利用料は高いと見るか安いと見るか、意見が分かれるところでしょう。

円安の現在では、日本ユーザーには少々高く感じるかもしれません。

最後に

思ったよりもデメリットが多くなってしまいましたが、FlutterFlowは非常に良いプロダクトだと思います。

特にデザイナーのようなコードを書かない人であれば、簡単に動くプロトタイプが作れるかと思います。

メリットは他にもあると思うのですが、「とりあえずは紹介を」と勢いで書いてますので、また追記していきます。

ここまでお読みいただきまして、ありがとうございました。