「FlutterFlowの魅力」Flutterの人気×ノーコードの良いとこ取り最強ツール

2023年9月15日 01:12

FlutterFlowは23年9月「FlutterFlow 4.0」を発表し、素晴らしい機能をいろいろ追加されました！これからどんどんFlutterFlowの人気が高まっていくのではないかと感じられる内容でした。
そんなFlutterFlowの魅力について、この記事では改めて初心者向けに改めて解説していきたいと思います。
※キーノートの内容ではないです。

FlutterFlow は2020年に元Googleのエンジニア2名によって提供開始されたノーコードプラットフォームです。「ソフトウェア開発を民主化する」をミッションに活動しています。

このミッション自体はBubbleも似たようなものを掲げていますが、僕は心底このコンセプトに傾倒しています。

FlutterFlow は、Flutter を使用したアプリを、より「速く」「簡単に」「視覚的に」開発することができ、近年モバイルアプリ開発だけでなく、効率的にマルチプラットフォームアプリを開発できる言語としてFlutter 人気が高まるにつれ、注目を浴びてきました。
堅牢なウィジェットライブラリ、事前に構築されたテンプレート群、ドラッグ & ドロップのビジュアルデザインツールを使用して、Flutterの良さをノーコードで最大限引き出して開発を進めることができます。
この記事では、FlutterFlow の魅力に関する正確な内容、機能、価格などをすべて余すところなく説明していきます。

FlutterFlow を使用すると、アプリ開発者はアプリの画面とロジック全体をコーディングすることなく、複数のプラットフォーム（スマホ、WEB、デスクトップアプリなど）向けの高品質な Flutter アプリとして開発することができるのは先に述べた通りですが、それだけでなくFlutterFlow で作成されたアプリは、iOS、AndroidのAppStoreにデプロイするところまで簡略化されていますし、英語のドキュメントは豊富にありますので、Flutter アプリの構築で生産性を最大化したいと考えているチームやプロの開発者にとってもFlutterFlowは検討すべき主要なオプションの 1 つになってきています。

Flutterとは

FlutterFlow を語る前にFlutter について語らなければその魅力を語り尽くすことはできないので、まずはFlutter の魅力について簡単に触れたいと思います。

Flutterとは、2017年にGoogleが発表したオープンソースのマルチプラットフォームの開発フレームワークです。
Flutterはマルチプラットフォームなので、Android / iOS / Web / Windows / macOS / Linuxの6つのアプリを全く同じソースコードで開発できます。

参考：Flutterとは

6つのアプリを全く同じソースコードで開発できる、このすごさわかりますか？革命です。
実際に2021年にはモバイルアプリ開発のためのマルチプラットフォーム開発フレームワークの世界シェア首位になったというレポートがあります。
参考：statista社の統計レポート「Cross-platform mobile frameworks used by software developers worldwide from 2019 to 2021」
今後もGoogleが強力に開発を進めているため、できることがどんどん増えていくものと期待してよいでしょう。

Flutter の掲げる主な目標と原則には次のようなものがあります。

高速な開発サイクル
表現力豊かで柔軟なデザイン
iOS および Android でのネイティブ同様のパフォーマンス
最新のリアクティブフレームワーク
UI を構築するための豊富なウィジェット
シームレスなマルチプラットフォーム開発体験

Flutter は、Alibaba、Google Ads、eBay、Square などのグローバル企業で開発に実際に使用されていますし、日本ではトヨタのHMIもFlutter で開発しているという事例もあります。確固たる需要がわかります。
参考：トヨタのFlutterエンジニア採用活動

Flutter の開発言語

※少しテクニカルな内容なのでここは読み飛ばして頂いても大丈夫です

Flutter はDart を使用して構築されます。 Dart は、Google によって開発された、C言語スタイルの構文を備えたオブジェクト指向のプログラミング言語です。

Dart はそもそも、モバイル／デスクトップ／Web プラットフォームにわたるフロントエンドの開発用に設計されました。Flutter は、そのDartの思想を体現するフレームワークとして、高速で、異なるOS間でも展開できるものになっています。
少しテクニカルな話をすると、Dart コードはネイティブ ARM および x86 コードにコンパイルできるため、プラットフォーム固有の SDK を使用せずに Flutter アプリがネイティブに近いパフォーマンスを達成できるようになっています。
また、Dart は、just-in-time コンパイラ、ガベージコレクション、大規模な標準ライブラリ、型推論をサポートするなど、Java、JavaScript、C#、C++ などの言語の開発経験を持つ多くの開発者にとって馴染みのあるものになっています。

FlutterFlowとは

FlutterFlowの概要

FlutterFlow は、Flutter アプリ開発のためのノーコード（時々ローコード）プラットフォームです。

FlutterFlow が提供する主な機能とツールには次のようなものがあります。

ドラッグ&ドロップで UI をデザインするためのビジュアルエディタ
100 以上のカスタマイズ可能なウィジェットとテンプレート
データベース、認証、ストレージなどのBaaSであるFirebase/Supabaseとの統合
BloC パターンサポートの状態管理
AppStore とWeb への公開プロセスの統合
リアルタイムデータベースの活用
画像ホスティングとCMS のためのメディアライブラリ
カスタムテーマとデザインツール
チーム開発のためのバージョン管理機能

以上のような機能があるために、FlutterFlow はFlutterを活用したいが、面倒なコーディングはしたくないエンジニア、エンジニアではない起業家、中小企業にとって有効な選択肢となっています。

FlutterFlow はどんなシーンで利用されているか

FlutterFlow は、次のような幅広いユースケースに使用できます。

iOS / Android 用のeコマース、SNS、オンデマンドサービスなどの本番利用モバイルアプリ
マーケティング用ランディングページや通常のWebサイト
アプリのアイデアとデザインのプロトタイプ作りでアイディア検証
MVP開発により、すべての機能実装前にコンセプトや機能の検証
複数人（チーム）でのモバイルアプリ開発
Flutter開発者になるための学習目的
マルチプラットフォーム開発
既存モバイルアプリの機能追加（FlutterFlow キットを使用して、Flutter UI を既存のネイティブ Android / iOS アプリに埋め込みすることができる）

FlutterFlow によれば、 FlutterFlowを使うとFlutter を使用したモバイルアプリ開発を10倍速くかつノーコードで実現することができると言われており、色々なアプリを開発する目的で使われています。

FlutterFlow でどんなアプリを作れるのか

ここではバックエンドとしてFirebaseを活用した場合にノーコードでどこまでできるのか、という観点でFlutterFlowでどんな作れるのか見ていきます。
※23年9月時点であり、かつカスタムコードを書けば制約はほぼないです

iOS / Android / Web で動作するマルチプラットフォームアプリ
フルカスタムのeコマースアプリ（ショッピングカート、支払い、リストなど考えうるeコマース機能）
画像共有、メッセージング、Push通知、タイムライン、ユーザー管理などの機能を備えたSNSアプリ
配車予約、食品配達、修理予約などのオンデマンドサービスを提供するアプリ（位置検出してマップ連携なども可能）
金融、ヘルスケア、不動産、メディアなどの業種に合わせた業務用アプリ
カジュアルゲームなどのエンタメアプリ
ストリーミングアプリ
カレンダー、電卓、リマインダー、プランナー、エディターなどの生産性向上のためのアプリ　など

逆に、FlutterFlow の制約としては、3D グラフィックス、機械学習、拡張現実（VR）などを含む複雑なアプリ、または最先端のネイティブデバイスの機能を活用するアプリなどは作るのが難しい場合があります。
ただし、そのような特殊な事例を除けばほとんどの一般的なモバイルアプリではFlutterFlow で作り切ることに全く問題ないと言えます。

FlutterFlow の主な機能

ここではFlutterFlowの特徴的な機能をいくつか紹介していきます。

ビジュアルアプリビルダー
FlutterFlow のビジュアルデザイナーを使用すると、ウィジェット（部品のようなもの）をドラッグ & ドロップするだけでアプリのレイアウトを視覚的に開発することができます。

ウィジェットライブラリ
ボタン、フォーム、タイムライン、タブなど、100 を超えるカスタマイズ可能な UI ウィジェットがFlutterFlow を通じて利用可能です。

テンプレートからの取り込み
新しいアプリのページは、テンプレートの読み込みから始めると圧倒的に開発スピードが速くなります。また自分の作成したページから簡単にテンプレートを作成し後に再利用することもできます。

Firebase / Supabaseの統合
FlutterFlow はフロントエンドに特化したツールのため、バックエンド（データベース、ユーザー認証、ファイルストレージ、分析、クラッシュレポートなど）は別途用意する必要がありますが、Firebase とSupabase は簡単にFlutterFlow側から統合することが可能です。

デザインツール
FlutterFlowアプリの設定で全体のテーマ、スタイル、色、テキストなどのスタイルを簡単に設定し、アプリ全体のスタイルを中央管理することができます。

テストと公開
FlutterFlow を通じて、アプリを iOS、Android、Web に直接デプロイできます。また、α版 / β版の配布やリリースの管理も可能です。

リアルタイムデータベース
アプリはFireabase / Supabaseのクラウドとデバイスとの間でデータをリアルタイムで同期することができます。

クラウドファンクション（NEW!）
FlutterFlow 側からコントロールできるFirebaseのバックエンドロジックでは欲しい機能が作れない場合に、クラウドファンクションを作成してバックエンドロジックを追加し、メール送信、支払い処理、Webhook の処理などの拡張機能を作ることができます。

カスタムファンクション/アクション/ウィジェット
FlutterFlow の提供するノーコード機能で欲しい機能が作れない場合、FlutterFlow 内で直接 Dart コードを記述して機能追加ができます。

FlutterFlow のデメリット

長所はここまでに様々解説してきた通りですが、もちろんデメリットもありますので、いくつか代表的なものを記載しておきます。
シンプルに自由度と難易度は比例すると理解するのが早いです。

すべての機能をマスターするにはかなりの学習が必要
より精緻な動作を求めるためにはノーコードでは実現できない領域がどうしても残る
日本語のドキュメントがなく、サポートも限定的
3D ゲームなどの複雑なアプリは作れない
ビジュアルのワークフローはプロのエンジニアにとっては逆に使いづらい
FlutterFlow が提供するものを超えてウィジェット/ロジックをカスタマイズするのは難しい
完全なネイティブアプリと比較してアプリのパフォーマンスが遅れる場合がある（Flutterのデメリットと同義）

FlutterFlowの料金

FlutterFlow は、GitHub 経由で無料のオープンソースバージョンを提供しています。ただし、ほとんどのFlutterFlowユーザーはブラウザからホスティングされたFlutterFlowを使うと思います。
その場合には複数の有料プランから選択することになります。

Standard：月額 30ドルで、Webアプリの公開までが可能
Pro：月額 70ドルで、AppleとGoogleのスマホアプリの公開が可能
Teams：月額 70 ドル・1ユーザーでチームでのバージョン管理等も可能
Enterprise：相談

基本的にはProプランがよいと考えられます。この金額が高いか安いかは、エンジニアを雇うことと比べたら安いかどうかは判断が簡単になると思います。

まとめ

FlutterFlowはプログラミング初学者にとって学習難易度はそこそこ高いが
一方で、Flutterベースのアプリを作れるかなり自由度の高いノーコードとして大注目
FlutterFlowを覚えることで、非エンジニアがアプリ開発者になれる！

当社ではFlutterFlowに関する複数の事業を展開しています。

FlutterFlowを自社人材に覚えてもらい、新規事業開発を進めたい法人の方

FlutterFlow アプリの開発依頼はこちらから