Flutter触ってみました

私は就職してからiOSとAndroidの両方のアプリ開発を経験していて、 正直最近はそんなに触っていないものの、色々な開発経験はしたつもりです。

Flutterは出始めた当初から気になっていて、特に1つのアプリを2プラットフォームで作ることの大変さを実感している身としては、クロスプラットフォームでかつ(多分)ネイティブに近い感じのモバイルアプリを作れるというのは惹かれます。

ただ業務で触る機会はなかったので、プライベートで試してみようと思い、去年の10月あたりから少しずつ触ってみました。

自分が知りたい基礎は一通り知ることができたと思ったのでそこで一旦切り上げ、時間のある時に感想などをまとめようと思ったのですが…時間空きすぎて忘れました!

とにかく覚えている範囲でメモレベルの感想を残そうかと思います。

開発環境について

馴染みのAndroid Studioを使ってました。 VSCodeも使えるそうですが、エミュレータ周りのセットアップとかが面倒な印象だったので今回はAndroid Studioにしました。

ネイティブと同じ感じでビルドしてエミュレータ上で動かせるということで、そこには(慣れた光景なので)特に感動はなかったですが、ChromeとかWebアプリとしてビルドできるのはとても便利でした。

自分の環境だとホットリロードが微妙な挙動をしていて一旦止めて再ビルドしなければいけないことが多かったですが、それを差し引いてもエミュレータオンリーより効率的に開発できるんじゃないかなと思います。

でも、エミュレータでもホットリロード活用すれば同じぐらい効率的なのかなぁ…過去の経験から全然信用していないんですよね。エミュレータの起動も基本コールドブートにしてます。

UI実装について

ちょっと最初は概念を理解するのに苦労しましたが、理解してからはそこそこ気に入りました。

意図した作りなのかは分からないですが、複雑なUIを作るとなるとなんでもネストがとても深くなり、 それを解決するためにウィジェット分割をさせる強制力が強いように感じました。 これについてはUIそのものの話からはずれてしまうので、後で触れます。

UIの作りやすさそのものはちょっとまだ不慣れですね。 実現したい見た目を色々仕様を調べながら四苦八苦していて、サクサクっと作れる段階にはなっていないです。

でも、個人的にはそういうのに慣れるにはチュートリアルレベルのシンプルなUIばかり作ってても仕方がなく、もっと複雑なUIを実装しないといけないかなと思います。

そうなると具体的に作りたいアプリとかのプランがないといけないですね…。

ウィジェット分割について

Angularとかだと最初にコンポーネント設計をさぼってしまうとブクブク太ってしまって、 メンテナンス性に影響が出ることが多く、しかもそこから分割すると最初から分割するより手間になります。

Flutterの場合、ウィジェット設計をサボろうにもネストが深くなっていくにつれて「これ読みづらくなってきたからさっさと分けた方がいいな」と早い段階で思うことが多く、 可読性のためにコードを整理しようと心がけているとポンポン分割されていく印象でした。

Angular、というかHTML+CSS+JS(TS)の組み合わせだと、コンポーネントを分割しなくてもコードを綺麗にして可読性を挙げることができてしまうがゆえに太ってしまいますが、Flutterの場合とにかく読みやすくするにはウィジェットを分けるしかない!という感じです。これが最初に書いた「ウィジェット分割をさせる強制力が強い」という意味ですね。

まぁ、業務かつチームでバリバリ作っているのと、プライベートで一人で細々と作っているという環境の違いも大きいかもしれないです。なのであまり鵜呑みにしないほうがいいと思います。

単体テスト

「そのフレームワークの基本を習得できたかの基準は、そのフレームワークで実装したもののテストを書けることである」と私は思っているので、自動テストに早めに触れることは大事です。

お試しなので大したパターンは書いてないですけど。

FlutterというかDartの単体テストの話ですが、標準のテストフレームワークだけでgroup+testの構成を活用してBDDっぽくテスト書けるのは大変すばらしいです。

正直全部の言語こうなってほしいです。テストのメソッド名とか考えたくない、自然言語で仕様を書きたいです!

Flutter固有の部分としては、UIの指定の方法にちょっと癖を感じましたが、全体的にはモダンなフレームワークらしくスマートにテストを書ける印象です。単純なパターンしか書いてないからかもしれないですが、Androidのネイティブだともっと色々苦労してました。

なのでAndroidアプリとかの開発経験があればそういった苦労から感じる理想に近い感じで、すぐ馴染めると思います。

でも、findsOneWidgetをやたら使うことになるとかは本当に自分の書き方合っているのかなぁ?と思います。もっと勉強が必要かもしれないです。

インテグレーションテスト

実行環境とかの差異を除けば単体(というかウィジェット)テストと書き方が同じでちょっと拍子抜けでした。でもこれのくだりで勉強にもう飽きてきたので、早めに終われて助かったかもしれないです。(?)

もちろん、単体からE2Eレベルまで同じような書き方で実装できるというわけで、学習コストの面ではいいのではないでしょうか。

最後に

忘れたと言いながら書き始めると色々思い出してきました。

今回触れたのは基本的なUI実装、ウィジェット分割、ボタンクリック、テキスト表示、画面遷移、単体テスト、インテグレーションテストあたりで、本当に基礎レベルです。

個人開発やる気ある人とか会社の研修でやるとかだと一週間未満で終わるんじゃないかという内容ですが、でもプライベートでこういう勉強ができたというだけでもよかったです。

今後触ってみたいのはモック化、APIリクエスト、非同期処理とかですね。 あとFirebaseとかと組み合わせてみたいですが、それはどっちかというとFirebaseの学習がメインになりそうです。

というわけで次はFirebaseやってみたいです! 時間あるのかな!?