【アプリ開発日記37週目】FlutterFlowでノーコードアプリ制作
ログインできた、非同期処理できた、フォームできた、通知できた、これで最低限のアプリは作れる…！
と思っていた矢先。なんとFlutterにもノーコードツールが存在しました。
その名も「FlutterFlow」。リリースされて一年ほどで日本語版の参考サイトもまだ限られていますが、海外の動画などは分かりやすいものも多くあります。
初めて知ったし今更だけど気になる…！ということで作ってきました！
完成版
FlutterFlowの画面
（翻訳）これまでにない速さでアプリケーションを構築
美しい UI を作成し、クリーンなコードを生成して、ワンクリックでアプリ ストアや Web にデプロイします。カスタムコードで完全に拡張可能。
できること
使いながら一番気になってたところ、「Flutterのコーディング技術は必要なの？」は、私個人の感想では「見た目はノーコードで行けるしかなりの時間短縮になる、バックエンド部分（処理や変数の扱い）はだいたいコーディング必須」という印象です。ストアへの公開など作成以外の手間はかかりますが、作成自体はグッと楽になります。
非常に強力だと感じたのは、やはりデザインの手軽さと基本的な処理作成の手間が省けるところではないでしょうか。
テンプレートはもちろん、真っ白なページでも直感的にウィジェットを配置できるので、トライアンドエラーの効率もケタ違いといっても過言ではないです。もともとウィジェットを前提としたFlutterとノーコードの相性は抜群に感じました。
また、もともとFirebaseで面倒な手間を省けていた認証機能もさらに楽になります。少し見づらいかもしれませんが、例えば下のようにボタンを選択して「create account」をセットすれば、それだけで認証機能ができてしまうのです。
データベース作成時点で、サインアップ時にFirestoreにユーザー情報のデータベースも作りますか？と聞かれるので、はいと答えれば、それさえも自動で行ってくれます。
他にも電話番号にSMSを送ってくれたり、パスワードを忘れたときにメールを送信したり、モーダルを表示したりと、一から実装すると大変そうな処理をワンクリックで実装できてしまう。頭の中で「Wow!」の連続でした。
できないこと
一方、他のノーコードと同様、どうしてもできることに限りがあります。
例えば、関数（処理）の作成にはコーディング知識が求められます。文字を入力するだけでAIが自動生成してくれる、という機能もありますが、これだけだとさすがに限界あるな…と感じます。
また、本来Flutterで「Pub get」を使い追加してきたプラグインは、当然ですがFlutterFlowでは使えません。しかし設定で追加することはでき、Flutterのコード知識は必要ですが、FlutterFlowでも同様に使えるようになります。
つまり、コーディング知識があればFlutterFlowでも便利なウィジェットや複雑な機能を実装できるのです。
ちなみに、今まで投稿などのデータはクエリ速度から「Users」コレクション内の「Posts」サブコレクションに作成してきましたが、FlutterFlowではサブコレクションに対応していません（2022年9月時点）。代わりにreference型（外部キー）を使えるため（FlutterFlow公式もこれを推奨しています）、最初は少し慣れる必要がありそうです。
今回作成した簡単なアプリでも「時間に応じた表示ボタンの切り替え」「レベルの設定」などはコーディング知識が必須でした。Flutterをイチから学ぶ必要はないかもしれませんが、プログラミング自体初めての方は公式サイトのチュートリアルなどを一度写経してみることをおすすめします。
おわりに
今回はノーコードツール、FlutterFlowでアプリを作成しました。最初こそ操作に慣れませんが、UIが非常にわかりやすいためアプリを１つ作る頃にはほとんど手を止めずに構築できるようになります。Flutterで苦労していたデータの取得をマウスだけで設定できることが特に嬉しいです。
全体のコードも見れるものの一部FlutterFlow専用の変数などが混ざっており、実用化に課金はほぼ必須、しかもその値段が30ドル～とお高いのが難点ですが、もういくつか作ってみたら一度試してみようかとも考えています。
Flutterもややマンネリ化してきてしまっているので、もう少し新分野を混ぜたりアプリ使う頻度増やしてみるか……？
ではでは！
参考
FlutterFlow
公式ドキュメント
認証チュートリアル
プラグイン追加チュートリアル