Web フロントエンドエンジニア(React) がモバイルアプリ開発(Flutter)し始めて思ったこと

seya

自分は2017年から React と共にキャリアを歩んできたので長らく "フロントエンドエンジニア" としてのアイデンティティを持ちながら仕事をしていたのですが、去年末辺りから仕事で Flutter を使って開発をするようになりました。

始めてビックリ、React とかなり書き味は似ているし、培った経験が活きることが多かったです。
また、詳しくは後述しますが、モバイル開発にも参加できるようになるとキャリアの選択肢も増えるので、今フロントエンドをやっている方が一つの選択肢とし考えられるように「ここは同じだから Web フロントの知見が活かせる、ここは違ってモバイル固有の知識の0からのスタート、モバイルできるようになるとこういうところが嬉しそう」という点を書いていこうかなと思います。

同じところ

宣言的 UI な書き方

まず React も Flutter も宣言的 UI で作られているというか、Flutter は React インスパイアで作られたという噂もあるため書き味はかなり似ています。
また、他のモバイルの開発の手段(SwiftUI と Jetpack Compose など)も宣言的 UI で作られることが多くなっているようです。
SwiftUI と Jetpack Compose は自分は書いたことがないので太鼓判は押せないですが、少なくとも Flutter に関してはほぼ違和感なく入っていけるのではと思っています。

設計の考え方

先述した通り宣言的 UI で作られるようになっており、これは Web フロントエンドと同じパラダイムなので「設計の考え方」は丸々そのまま活かすことができます。

「設計の考え方」とは具体的に何かと言いますと、細かいものも含めると色々あるのですが大きくは「状態管理」と「コンポーネント設計」があるかなと思っています。
例えば React の Recoil と Flutter の Riverpod は似ているため、Recoil でのベストプラクティスを調べて、それを Riverpod に転用するなどもできました。

コンポーネント設計に関しても粒度やインターフェイスの切り方、状態の持たせ方に関しても全く同じ考え方が適用できるなと思っています。

なので、シンプルにアプリケーションを書く、UI を作るというところに関しては最初から高い品質で戦力になれるんじゃないかと思っています。

違うところ

ビルド周りや CI/CD

個人的には未経験者に対してはここが1番の鬼門となるのではないかなと感じています。というか私も仕事では他の人にやってもらっているので何も分かっていません。

Android や iOS のアプリをビルドして配布するところは Web より幾分複雑な気がしており、私も Xcode を雰囲気で操作するところから抜け出せておりません。
この点に関しては経験者が一緒にいるとかなり心強いところだと思います。

モバイルの UI のお作法

UI で気をつけるところも多少変わってくるなと思います。例えばブラウザでは必要のなかったセーフエリアの考慮だったり、これはデザインレベルの話ではありますがアプリではブラウザの戻るのようなものがないので、それがなくても機能するようにナビゲーションを設計する必要があります。

また、それ以外にも OS 毎のお作法、iOS らしさや Android らしさを踏襲しないと違和感のある体験を与えてしまうこともあります。

こういった新しい文化圏での UI のお作法は学んでいく必要があるなと感じています。

開発言語

当たり前といえば当たり前ですが、現状 TS でモバイル開発できる主流な技術は ReactNative ぐらいな気がするので、それ以外の場合は新しい言語を学ぶ必要があります。
こなれたコードを書けるようになるまではちょっとオーバヘッドがあるかなという感じです。ただ個人的には Dart も Swift も Kotlin も静的型付けな言語なので、その点を考えるとそこまで辛みもなさそうです(Swift と Kotlin 触ったことないから知らんけど)。

標準 Widget(コンポーネント) が豊富

React では Chakra UI や MUI などの UI ライブラリでカバーするようなものが Flutter では標準の Widget が豊富なので、それを組み合わせるだけでほとんどの UI がサクサク作れるな〜というのは明確な違いとして感じました。
この辺りはブラウザ標準に縛られていないものの強みなのかなと思います。

これに関しては明確にモバイルの方が進んでいるのではと感じるので、モバイルを学ぶことによって Web フロントに知見を輸入するなんてメリットもあると思います。React Native for Web のようなライブラリは正にそれを意識したものでしょう。

その他: キャリアとかについて

モバイルもできるようになると何が嬉しそうか

これについては「キャリアの選択肢が広がる」というのがめちゃくちゃデカいなと考えています。
例えば私も以前転職活動した時に「良さそうだな〜でもフロントエンドエンジニア募集しとらんしな〜」と諦めていた会社があったのですが、そこでは Flutter エンジニアなら募集している、というケースをいくつか見かけました。

Web のプロダクトを持たずアプリのみ、という会社は思いの外たくさんあります。自分がめちゃくちゃ事業に興味がある会社でもスキルのミスマッチで諦めざるを得なかったところにも挑戦できるというのはかなり大きいなと思います。
もし今自分がフロントエンドしか経験がない & 興味ある会社がモバイルのみ受け入れているという状況でも、先ほど申し上げた通りアプリケーションレイヤーだけであればそこまでキャッチアップコスト高くないはずなので、簡単に諦めなくてもいいのかなと思いました。いい時代ですね、宣言的 UI ありがとう。

モバイルも Web フロントも両方できることでシナジーはあるか

今のところは「特にない」と感じています。
先ほどもチラッと書きましたが、どっちかで流行っているライブラリや設計思想を片方に輸入できるみたいなところはあるかもしれないですがそれくらいですかね。

あと思ったのは両立というか両方でスペシャリストになるのはまあまあ時間的に無理かなと思います。私自身最近 Flutter のことしか勉強しておらず、Web フロントの動きは全く追えておりません。

両方やることでシナジーは薄そう & 両方でスペシャリストになるのは時間的に中々難しいとなると以下のどっちかになるかなーと思います。

  • どちらもできることが価値を出せる組織で両方やる

  • 片方にベットしてスペシャリストになる

例えば私は「比較的小さい規模のチームで働くのが好き」-> 「小さいチームでは一点特化のスペシャリストよりは比較的守備範囲が広いことが求められることが多い」-> 「どちらも中くらいやれるような存在になろう」という風に考えています。
これは人によって仕事に求めるものだったり、シンプルに Web とネイティブかどっちが好きかのような価値観によると思うので、そこを見つめて決めるといいと思います。

まとめ

宣言的 UI がモバイルでも実装されるようになったため、単純にアプリケーションのコードを書くという部分に関してはフロントで培った知見がモバイル開発でも活きるようになりました。
ただ、ネイティブ固有のところは多々(主にビルド・配布周り)あるので、そこは経験者がいた方が心強いなという感じです。

上述したように「事業とかに興味あるけど Web フロントの募集がない!」という場合にジョブチェンジを考えるのは非現実的な選択肢ではないのかなと思っています。
(ただ正直これは Web フロントから実際にモバイル書き始めて数ヶ月の人間のポジショントーク感はあるので、実際にそういう人を受け入れたことのあるモバイル開発者の方がいらっしゃればコメントいただきたいところです。)

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!