Web開発者のためのFlutter入門

はじめに

こんにちは。UP Parters Group IT事業部開発チームの松下です。

開発チームでは定期的に勉強会を行なっております。弊チームの勉強会では記事を紹介したり、参加した社外の勉強会の内容を共有したりすることで、知識を共有しています。

先日の勉強会ではFlutterの概要を紹介する発表を行ないました。近年クロスプラットフォーム開発フレームワークとして注目を集めているFlutterですが、弊チームでは主にWeb開発が中心のためアプリ開発の経験はありません。しかし、今後受託案件などでアプリ開発の知識が必要になる可能性を視野に入れ、予備知識としてFlutterの概要を共有することにしました。

本記事では、弊チームでよく採用しているReactとの違いをまじえながら、勉強会で話した内容をまとめて共有しようと思います。

特徴

Flutterは、Googleが開発したオープンソースのUIフレームワークです。一つのコードベースからiOS、Android、Web、デスクトップアプリケーションを開発できる点が最大の特徴です。 Dartという言語でアプリケーションを構築します。

また、Reactと同様に、コードの変更をすぐに確認できるホットリロード機能が搭載されています。 UIの微調整やバグ修正がリアルタイムで反映されるため、開発サイクルが大幅に短縮されます。

ReactではUIのパーツのことを「コンポーネント」と呼びますが、Flutterでは「ウィジェット」と呼びます。ひとつのウィジェットはクラスとして定義され、利用側ではそれをコンストラクタで呼び出し、ネストさせてツリー状に組み立てることでUIを実装します。例えばカウンターウィジェットは以下のように書くことができます。

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  var count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Count: $count'),
        FilledButton(
          onPressed: () => setState(() => count++),
          child: const Text('+1'),
        ),
      ],
    );
  }
}

このカウンターウィジェットは別の「Column」「Text」「FilledButton」ウィジェットを組み合わせて実装されているのがわかるかと思います。 Webで実行してみると、こんな感じで動きます。

状態管理

フロントエンドにおいて、状態管理はアプリケーションの規模や複雑さが増すにつれて非常に重要になるトピックです。 Flutterにおける状態管理では、様々な方法が用意されています。標準的な状態管理であるsetStateや、React学習者のためにuseStateやuseEffectと似た書き方ができるflutter_hooksというパッケージも公式で用意されています。上で紹介したコードでは、setStateを使ってcount変数を更新しています。

以下はuseStateとuseEffectを使った例ですが、他にもたくさんのフックが存在します。

const age = useState(25);

useEffect(() {
  print("再描画時に呼び出される");
  return () => print("dispose時に呼び出される");
}, [deps]);

Flutter Web

Flutterで実装したUIは、Webページとしてビルドすることもできます。単一のコードベースからWebアプリも開発できるのは大きな利点です。

ただし、初回読み込みが遅いなど、完全にWebをFlutter Webで置き換えてよいという段階には至っていません。 Web FAQでは「現時点では、Flutterはテキストリッチなフローベースのコンテンツを含む静的ウェブサイトには適していない」とあります。インタラクティブな体験が必要な場合にはFlutter Webが良い選択肢になります。

まとめ

Flutterは多くの可能性を秘めたフレームワークであり、特にクロスプラットフォーム開発において強力なツールです。 Web開発者にとっては、モバイルアプリ開発への入口としても、あるいはFlutter Webを通じて新しいアプローチでのWeb開発の選択肢としても興味深いものです。

今後の技術動向を見据え、知識の幅を広げる意味でも、Flutterの基本的な知識を持っておくことは有益であると考えます。

UP.tech.blog

UP Parters GroupのSOT consulting IT事業部のTechブログです

Web開発者のためのFlutter入門

はじめに

特徴

状態管理

Flutter Web

まとめ