こんにちは、株式会社Pentagonでアプリ開発をしている髙谷です。
もともとモバイルアプリ開発をやっていた私ですが、最近Pentagonにジョインして本格的にFlutterを触り始めました。
ということで、今回はモバイルアプリ開発経験者を前提としたFlutterの学習コストについてまとめてみます。
【こんな人に読んで欲しい】
・これからFlutterを学んでみたい方（特にモバイルアプリ開発経験者）
【この記事を読むメリット】
・Flutterを学習するにあたって必要な考え方や難しいポイントがわかる
【結論】
Flutterはモバイルアプリ開発経験者であれば、Widgetと状態管理のお作法をおさえることで、比較的スムーズに習熟できるのではと考えています。
Flutterを一言で
FlutterはPentagonでもメインの開発ツールとして使われていて、Android・iOSなどのアプリを開発するためのクロスプラットフォームです。
FlutterはGoogleによって提供されており、Dartという言語を使います。
過去5年間の世界のGoogle検索数でも主要なクロスプラットフォームであるReactNativeを抜いているのが現状です。
また、感覚としてもモバイルアプリ開発のクロスプラットフォームといえば、Flutterが1〜2個目に挙がるようになってきています。
2つの学習の壁
そんなFlutterですが、モバイルアプリ開発経験者が学習するにあたっての壁が2つあると感じました。
1つはUI開発に関してです。FlutterにはWidget（ウィジェット）と呼ばれるUI構築の仕組みがあるのですが、これがなかなかの曲者。
もう1つが状態管理です。Flutterは状態変化に応じてUIが再構築される仕組みを持っていますが、これを実装するための工夫が必要になります。
両方とも慣れてしまえばむしろ手放せなくなるような優れた仕組みなのですが、最初の壁になるように思いました。
Widgetの壁
FlutterではWidgetという独自のUIコンポーネントを用いてUIを構築していきます。
テキスト表示やボタンなどの基本的なWidgetの他にも、複数のWidgetの配置を管理するWidget（RenderObject）があったりしますね。
これらのWidgetを用いて、例えば以下のような宣言的なコーディングでUIを開発できます。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('DEMO'),
),
body: const Center(child: Text('Hello')),
);
}こちらはまだ簡単な例ですが、複雑なリストやグリッドの構造を作ったり、その各要素を可変にしたりするケースもあると思います。
すると、あっという間にコードはネストが深くなり、複雑さを増していきます。
こうしたUI構築のお作法はFlutterならではの部分ですし、壁の1つと言えるでしょう。
状態管理の壁
UI操作によるデータの変更を監視して通知するための仕組みとして、リアクティブプログラミングなどの仕組みは広く知られていますね。
それを実現するためのフレームワークも多くの言語で用意されていますが、Flutterでも同じようにあります。
StatefulWidgetと呼ばれるクラスがそれにあたるもので、状態管理のための標準クラスとして用意されています。
しかし、同じ画面の中で変更を管理したいデータが複数あったり、それを複数の画面で利用しようとすると、標準クラスの利用のみではコードが煩雑になるでしょう。
そこでProviderやRiverpodという状態管理のためのライブラリが活躍します。
細かな仕様や使い方は割愛しますが、これらのライブラリを使わずに標準クラスのみで状態を管理することは開発現場ではあまりないのではないかと思います。
一方で、その仕組みをきちんと理解しないと不具合が発生した際に処理が追えなくなるといった状況にもなりえます。
また、そもそも状態管理の手法としてこのようにさまざま存在しているという点でも、状態管理は1つの壁になるのではと思いました。
初めは標準クラスのStatefulWidgetを使った実装を学習し、徐々にライブラリを導入していく流れを体験してみるといいかもしれませんね。
すると、ライブラリのありがたみやその仕組みの理解につながることでしょう。
まとめ
いかがでしたでしょうか？
Flutterのデメリットばかりを挙げてしまっているように思いますが、言いたいことは、モバイルアプリ開発経験者であればFlutterの学習コストは決して高くないということです！
Widgetと状態管理、この2つの壁さえクリアしてしまえば、比較的スムーズに実務にも入れるのではないでしょうか。
ということで、ぜひFlutterにチャレンジしてみてください！
