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

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

ノーコード、ローコードというキーワードで、FlutterFlowというプロダクトを最近触っています。

https://flutterflow.io/

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

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

FlutterFlowのメリット

Flutterを使って開発ができる

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

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

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

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

簡単にUIが構築できる

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

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

Flutterだけを使ってプログラミングをする場合は、当たり前ですがコーディングが必要となり、またFlutterはコードのネスト（一般的にネストが深くなると可読性が落ち、開発スピードが下がります）が深くなりがちで、コードが見づらくなることが多いです。

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

またあらかじめ用意されたプロパティがあるので、Flutterを使うと何ができるのかといった理解が進みます。

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

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

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

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

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

2023/10/23追記：

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

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

FlutterFlowのデメリット

デバッグがしづらい

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

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

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

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

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

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

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

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

またFlutterFlowで修正してテストモードで反映させる時も１０秒ぐらいは待つことが多いです。

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

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

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

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

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

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

2023/10/23追記：

現在はリロードされることがなくなりました。

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

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

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

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

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

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

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

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

他にもコード補完や文法チェックが遅かったりするので、あまり当てにしない方が良いでしょう。

カスタムコードでさせる処理はシンプルにして、引数と帰り値だけ指定し、あとはローカルで直接実装した方が楽です。

若干重さを感じる

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

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

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

最後に

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

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

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

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