はじめに

こちら、Qiita Flutter Advent Calendar 2021 カレンダー2 12/19の記事になります。

誰？

はじめまして、ぶるーと申します。
JavaでEC開発をずっとやってきたバックエンドメインのエンジニアです。
Nuxt.js + SpringBootというスタックなのでフロントもやります。

対象読者

Flutter気になるけど、どうしようかなあと迷っているJava使い
- 特にJavaScriptも触ることがあるWebアプリ開発者の方
Javaのドキュメントで宇宙ねこになったことがあるひと

FlutterとDartの関係

よく勘違いされやすいですが、Flutterはフレームワークであって言語ではありません。
JavaにおけるSpringBootのような立ち位置にあるのがFlutterになります。

言語	フレームワーク
Java	SpringBoot,Springなど
Dart	Flutter

Dartってどんな感じ？

では、Dartってどんな言語なのでしょうか。
Dart書いてみてその書き味を一言でいうと、「JavaScriptっぽくかけるJava」です。

ちょっと前に書いたTODOアプリの一部をサンプルとして載せてみます。

class TaskLogic {
  static Future<void> add(String taskName) async {
    final collection = FirebaseFirestore.instance.collection('tasks');
    await collection.add(<String, dynamic>{
      'taskName': taskName,
      'status': statusToString(Status.doing),
      'createdAt': Timestamp.now(),
    });
  }

  static Future<void> toggle(String docId) async {
    final taskRef = FirebaseFirestore.instance.collection('tasks').doc(docId);
    final DocumentSnapshot task = await taskRef.get();
    taskRef.update(
      <String, String>{
        'status': task['status'].toString() == statusToString(Status.doing)
            ? statusToString(Status.done)
            : statusToString(Status.doing)
      },
    );
  }

  static String statusToString(Status status) {
    switch (status) {
      case Status.doing:
        return 'DOING';
      case Status.done:
        return 'DONE';
    }
  }
}

どうでしょうか？
型やジェネリクス、classなど一瞬「Javaかな？」と思った方も多いのではないでしょうか。
でも、これJavaじゃなくてDartのコードなんです。
以下のaddに渡している引数の書き方はJavaScript味がありますね。

await collection.add(<String, dynamic>{
  'taskName': taskName,
  'status': statusToString(Status.doing),
  'createdAt': Timestamp.now(),
});

なので、普段の技術スタックとして、

Nuxt.js/Vue/Next.js/React/ + SpringBoot/Spring

のような構成でやっていると、実は大した学習コストかけずにDartに習熟することができます。
公式のチュートリアルをサクッとやれば、あとはほぼJavaを書くような感覚で書けます。（interfaceがないとか勝手が違う部分がありますが）

Flutterやってみて感じたこと

これで新しい言語を学ぶハードルはだいぶ下がったかと思います。

次はフレームワークであるFlutterです。
Flutterとはどんなものなのか？については他にたくさん記事があるので、ここでは説明は省きます。

その代わりに、今までSpringBoot(と会社の独自パッケージ)しか経験のなかった私がFlutterを学習してみて感じたことを書きます。

モバイルアプリという選択肢ができる

個人的にここは非常に大きいメリットでした。
もちろんWebでも最近はモバイル対応は当たり前ですが、やはりどうしてもWebよりネイティブなアプリのほうができることも多く、UXも良いことが多いです。
解決したい課題に対して最適な解決策を選ぶときに、モバイルアプリで作る、という選択肢を持てるのは大きなメリットだと感じました。

ドキュメントやサンプルが充実している

よくどの技術でも「公式ドキュメントを読め！」と言われます。
でも、Java界隈の公式ドキュメント（特にAPIリファレンス）を読んで「なるほど、こうやって使うのね」となった経験があまりありません。
※もちろん、私のJava力が低いせいもあります。

JavaやSpringBootで詰まったときは公式よりこちらを参考にすることが多かったり・・・
https://www.baeldung.com/

一方で、Flutterはこれでもか！というくらいドキュメントやサンプルが充実しています。
特にサンプルがブラウザ上で実行可能なエディタで提供されていて、実際にサンプルを動かしながら使い方を学べるので非常に助かります。

https://docs.flutter.dev/

公式のYouTubeチャンネルまであって、視覚的に理解しやすいよう工夫された「Flutter Widget of the week」のようなコンテンツも充実していていたれりつくせりとなっています。

YouTubeのvideoIDが不正ですhttps://www.youtube.com/flutterdev

UIの構築がめちゃくちゃ楽

Webアプリをやっていて、一番心が折れるのって実はCSSなのではないでしょうか・・・？

最近はVuetifyやChakra UIのようなUIライブラリや、Tailwind CSSのようなバックエンドエンジニアに優しいものも増えてきましたが、CSSをいじっても思ったような見た目にならず途方にくれたことは誰しもあるのではないでしょうか。

Flutterをやってみて、一番衝撃だったのはUIが構築が異次元レベルに楽ということでした。

Widgetをサクサクと組み合わせるだけで本当にそれっぽい画面が簡単につくれてしまいます。
私は恥ずかしながら、個人開発でUIをつくるところで心が折れることが多かったのですが、FlutterではUIで心折れるようなことにならず、むしろ楽しいとまで思えます。

フロントエンドの理解が深まる

これは想定外だったのですが、Flutterをやってみてフロントエンドの理解が進みました。

フロントエンドでいまや当たり前のように使われるVueやReactですが、いまいち「コンポーネント」や「宣言的UI」がピンと来ていませんでした。

Flutterではフロントエンドでいうところの「コンポーネント」が「Widget」にあたりますが、Widgetを組み合わせて画面をつくっていくのを繰り返すうちに、「コンポーネント」も要は同じように扱えばいいだけなんじゃないかと気づきました。

この気づき以降、フロントエンドのコードを追うのがかなり楽になりましたね。

同じように「宣言的UI」もFlutterで書くと自然とそうなるので、WebでDOMをごりごりいじるようなコードとの比較ができるようになり、結果だいぶ腹落ちしました。

最後に

JavaでWebアプリケーション開発してきたエンジニアって、実はFlutterと相性が良い
Javaもいいけど、年末年始はFlutterを書いてみよう！！

参考

Discussion