平凡なフロントエンドエンジニアの Flutter 入門

この記事は ZOZO Advent Calender 2021 の6日目の記事です。ちゃんと事前に記事を用意してなくてすみません！！

はじめに

こんにちは、たじまです。 今回は前から興味を持っていた Flutter に入門してみました。普段業務ではフロントエンドエンジニアをしていて、他の職種について触れる機会がなかったため「 Flutter 触れば iOS と Android エンジニアの気持ちがわかるようになるやろ！」とアドカレを機に体験してみました。（これは両アプリエンジニアに怒られそうですね。） 内容的に「これをやりました！楽しかったです！」で終わりそうなのでできるだけフロントエンジニア目線で感想を述べてみたいと思います。

f:id:tjmschk:20211206211622p:plain
初めての Flutter アプリ！

github.com

やったこと

Webと比べたときのアプリの大きなメリットというのはやはり、アプリ内要素指でタッチしったり指でスライドしたときのぬるっとしたものを掴んでいる UX(UI?) です。 そこで、あの体験を再現すべく Hello World から始めてみました。

勉強で参考にしたもの

zenn.dev

kazutxt さんのこちらの本が大変参考になりました！ 初級編しか読めていないですが大変詳しく段階的に書かれていてわかりやすかったです。

できたもの

carousel_slider といいうライブラリを使って作ってみました。 面倒臭い印象があるカルーセルを一瞬でつくれました。

youtu.be

感じたこと

Hello World しながら感じたことを時系列順に述べてみます。

開発環境まわり

  1. Xcode のインストールが無限すぎる。
  2. Android や iOS のエミュレータを立ち上げようとしたが、マシンスペックが足りずに Mac が落ちた。フロント開発だと Chrome と Node.js さえ起動できればいいので MacBookAir で耐えていたが限界。実機で試してみる。
  3. iOS にビルドする際に開発チームや iPhone 側で開発元を許可しないといけないということが新鮮。
  4. Android は大昔の Xperia 端末しか持ってないので断念。ただ web と ios は同じアプリが動いたので感動。

開発体験

  1. 軽く触っただけだが Container のような element が CSS のプロパティを型として持っているため、文字を打つと補完ができてわかりやすい。また <bold> や <h1> みたいな element としての意味とスタイルを持ってしまったりしているような古の tag がないため綺麗に設計できそう。
  2. 見た目の構造は DOM Tree を直接書いているような感じで分かりやすかった。class にはあまり馴染みがないが名前などが CSS のプロパティに似ているため直感的にわかる。
  3. Center で左右だけじゃなく上下の中央揃えになる感覚が新しい。
  4. google だから？ Material Design の色々がデフォで入っていて馴染みの感覚ができた。
  5. icon の自動生成だったり VSCode での開発から Android/iOS/Web 全てにビルドできるのが開発障壁が下がっている気がする。
  6. ビルドが重い。私の MBA は常に悲鳴を上げている。

終わりに

思ってたよりも Dart という言語が分かりやすくとっつきやすい言語でした。 カルーセルの実装で終わってしまいましたが本当は上からカードが降りてきて左右に分け捨てるような UX を作りたいのでもうすこし色々試してみようと思います。それが終わったら PWA でも作って比較したいです。

自分のマシンが常に火を吹きそうな状態なため、ディスプレイの数を減らし並行で動いているアプリも終了したため開発環境がつらかったです。常にいいマシンが欲しいですね。

ありがとうございました！