Flutterについて

1. Flutterとは？

特徴

Googleの提供しているフレームワークで、1つのソースコードでクロスプラットフォームを実現できる。言語はDartというJavaScriptに似た言語（クラスの書き方とかはJavaっぽい）。
従来であればiOSはSwift、AndroidはKotlin/Java、WebはJSでそれぞれ書き分ける必要があったが、DartはiOS/Android/Webで動作する形式に変換できる^[1]
FlutterはこのDartの仕組みを活かして、iOS/Android/Web上でDartで書いた処理を動かしている。

モバイル開発においてiOSとAndroidの両方で動かせるフレームワークとしてReact Nativeとよく比較されるが、React Nativeでは各プラットフォームごとにネイティブのUIコンポーネントを呼び出してレンダリングを行う。その呼び出し時にJSとネイティブのコード間で通信を行うため、パフォーマンスが低下する^[2]
それに対しFlutterは独自のコンポーネントを豊富に持っていて、自身の持つレンダリングエンジンでGPUを用いてレンダリングするのでネイティブに劣らないパフォーマンスを出せる^[3]。
また、FlutterはEverything is Widgetというスローガンを掲げている。これは、UIを構築する全ての要素を、Widgetと呼ばれる部品で構築することを意味しており、実際にFlutterの部品は全てWidgetクラスのサブクラスとして定義されている。

歴史

元々JSを撲滅する気運の高まりを受け、GoogleがJSの上位互換となる言語として2011年にDartを開発した^[4]。既存のJSを置き換えられるように設計されているので当然JSが有している機能はDartにも備わっている（Promiseに相当するFuture、イベントリスナーとか）。ところがGoogleは2017年にGoogleの標準言語としてTypeScriptを採択すると宣言し、Dartは一旦そこで消えかけた^[5]。

しかしDartはJSを置き換えることを目指していただけあってモバイル上でも動作に優れ（スマホのブラウザ上でも動かせる必要があるため）、Googleが何かに使えないかと模索した結果（？）独自のレンダリングエンジンが開発されたことで返り咲いた。この独自のレンダリングエンジンを使っているのがFlutter。

2. 使ってみて感じたFlutterの長所・短所

長所

• DartはJSと書き心地が似ているので、JSに馴染みがあれば学習コストは低い
• null safetyのサポート^[6]
• SizedBoxやSpacerといった、レイアウト用のウィジェットがある
• デフォルトのスタイルがMaterial Designに準拠しているのでスタイリングが楽。
• ホットリロード/リスタートによって実装の変更をすぐに確認できる
• Flutter公式のYoutubeが分かりやすく、内容も充実している

短所

• 各ウィジェットごとのクセを理解しないと、レイアウトを組む際に予想外の振る舞いをする
• デフォルトのスタイルをカスタマイズするとなると面倒
• ウィジェットをネストするのでコードが複雑化しやすい^[7]
• まだ発展途上の技術のため、Reactなどに比べると参考にできるドキュメントが少ない

3. 参考にしているサイトなど

• Flutter公式サイト
  Flutter - Build apps for any screen
• monoさんのTwitter/Medium
  mono (Masayuki Ono)
• RemiさんのTwitter
  Remi Rousselet

4. 最近の動向

• トヨタでも車載ツールに導入されているそう
  Flutter Showcase | Toyota
• GoogleのFlutter開発チームが採用を中断
  https://twitter.com/_mono/status/1610892470925287425?s=20&t=6IgF3JJ1OX-koQpRrZ19_Q

5.おわりに

リッチなUIを低コストで作成できるので、プロトタイプの作成にも有用だと思っています。Flutterのエンジニアはまだ希少らしいので今勉強しておくと良いかもしれません！

6.参考文献

https://zenn.dev/fastriver/books/caff13da8b852c/viewer/8393eb
https://reactnative.dev/docs/new-architecture-intro
https://gist.github.com/paulmillr/1208618
https://www.codementor.io/blog/worst-languages-to-learn-3phycr98zk
https://www.youtube.com/watch?v=iYhOU9AuaFs
https://medium.com/flutter-jp/faq-f885a6494a8

脚注

1. ゆーてWebのFlutterはまだあんま良くないらしい。実行速度が遅いとか、まともなHTMLを作らないのでSEOに弱いとか。

2. ただReact Nativeのアーキテクチャが見直されていて、パフォーマンスが改善されるかも？公式を見る限りまだ実験的な段階みたいだが。

3. これが最大の特徴。Android/iOSの部品両方あるが、いずれも純正コンポーネントを用いてるわけではなく、Flutter製のそれっぽい部品

4. 当時はDartではなくDashと呼ばれていたらしい

5. 2018年には学ぶ価値のない言語ランキングを総なめ！

6. TSに慣れている人ならもはや常識かもしれないが、Javaだとこの機能がないのでヌルポ落ちするのはあるある
   

7. これはFlutterに限らずHTMLなどでも同様なのでFlutter特有とは言いづらいかも。ただ幅や背景色などのプロパティをすべてのウィジェットが持っているわけではなく。それらを使うためにSizedBoxやContainerでラップするので比較的ネストが増えやすい気はする。