🚀

Flutter 3.0のリリース解説！

2022/05/14に公開

Flutter

Dart

Google

tech

はじめまして、ますみです！
株式会社Galirage（ガリレージ）という「生成AIに特化して、システム開発・アドバイザリー支援・研修支援をしているIT企業」で、代表をしております^^
ついに、FLutter3.0がリリースされました🎉

https://www.youtube.com/watch?v=w_ezWG1yKQQ
みなさんは、今回のリリースをどのように感じましたか？

著者としては、歴史に残るリリースだと感じました。なぜなら、Flutterが本当の意味でのマルチプラットフォームを達成したからです。
著者の主観ですが、React NativeやIonicやCordovaなどの他のマルチプラットフォームはいずれもネイティブ機能を組み込む時にエラーが出やすかったり、痒いところに手が届かなかったりすることがあります。Flutterはこのような困りごとは圧倒的に少ない印象がありました。そのため、今回のリリースによってFlutterのマルチプラットフォームが完全なものになったことは非常にインパクトが大きいと感じました。
そこで、この記事では、今回のリリース機能を紹介します！

 【Build & Deploy】まずもっとも注目すべリリースとして、マルチプラットフォームへ完全対応したことがあります。今回のリリースにより、以下のプラットフォームへのビルドとデプロイが可能になりました。
iOS
Android
Web
Windows
macOS
Linux
Embedded

 1. macOS appsのstable化ついに、Intelチップだけでなく、Apple Silicon（ARM64）チップのデスクトップアプリケーションへのビルドも正式対応となりました。
また、システムメニューバーにおけるカスケーディングメニューも対応しました。実装したい場合は、PlatformMenuBarWidgetから設定できます。

 2. Linux appsのstable化Linux appsのビルドとデプロイにも正式対応しました。
意外とLinuxアプリも需要がありそうですね。エンジニア界隈におけるLinuxユーザーは一定存在するため、エンジニア的にはありがたいですね。

 3. Foldable phoneへの対応折りたたみ式のモバイルへの対応がされるようになりました。
どうやら、この機能は、Microsoftが先導してくれたようで、オープンソースコミュニティにおいて、企業間で連携してくれると開発者としては非常にありがたいですね。
ちなみに、Surface Duoのサンプルが公開されており、興味のある方はこちらのサイトもご覧ください。

https://docs.microsoft.com/en-us/dual-screen/flutter/samples
!
 TIPS: AdaptiveとResponsiveの違いマルチプラットフォームのアプリを作る上では、アダプティブかつレスポンシブにすることが重要です。では、それぞれどういう意味なのでしょうか？
Adaptive / アダプティブとは？

異なるデバイス種類（モバイル、デスクトップ）に応じて、マウスやキーボード入力などの機能が最適化されること。
Responsive / レスポンシブとは？

対応した画面サイズにチューニングされたレイアウト（見た目）になること。
https://docs.flutter.dev/development/ui/layout/adaptive-responsive

 【Web appsのパフォーマンス】ウェブアプリの対応は、Flutter 2.5のタイミングでベータ版から正式版になり、安定化しました（参考）。一方で、パフォーマンスに関しては、まだまだ改善の要望が多かったため、今回のアップデートは非常にありがたいアップデートです。

 4. ウェブ画像表示の高速化ウェブアプリケーションにおける画像デコーディングが高速化しました。
これは、ブラウザにおけるImageDecoder APIを自動的に検出して利用することによって実現されています。このAPIは、一般的なChromiumベースのブラウザ（Chrome, Edge, Operaなど）では搭載されており、メインのスレッドとは別のスレッドで非同期的に処理をすることにより、約2倍高速化されます。
この恩恵は、ウェブ画像のスクロール時の動きの滑らかさから実感できると思います。

 5. ウェブアプリのライフサイクルの改善ライフサイクルが刷新されました。
この恩恵として、Lighthouseによるパフォーマンス分析を以下のシナリオでもできるようになりました。
スプラッシュ画面
読み込み中の画面
インタラクティブなアプリが開始される前のプレーンな画面

 【Dart記法】Flutterはほぼ全てのコードがDartで書かれているため、Dartの記法が書きやすくなることは非常にありがたいですね。今回のリリースで、Dartは2.17になりました。

 6. enhanced_enumumerationsまずenumが進化しました。
新しくfields, methods, getters, operatorsを追加できるようになったり、interfacesの実装やmixinsの適応もできたりするようになりました。

これにより、enumをclassのように扱えるようになりました。

 7. named_args_anywhereキーワード引数を好きな場所に挿入できるようになりました。
これまでは、キーワード引数は末尾に入れる必要がありましたが、この制約が緩くなりました。長い関数などを位置引数で渡す必要があるときなどにキーワード引数を上に持って来れるという点で非常に便利ですね。
void printMean(double a, double b, {double c=0}){
    print((a+b+c)/3);
}

void main(){
  // これまで：キーワード引数は、位置引数の後じゃないとエラー。
  printMean(1, 3, c: 5); // => 3

// これから：キーワード引数をどこにでも書けるようになった。
  printMean(1, c: 5, 3); // => 3
}
!
 位置引数とキーワード引数とは？位置引数とは？

渡す引数を位置（何番目の引数か）によって判別する引数。

英語では、positional parametersと言います。
void printMean(double a, double b){
    print((a+b)/2);
}

void main(){
  printMean(1, 3); // => 2
}
キーワード引数とは？

渡す引数にキーワード（変数名）をつけて、明示的に判別する引数。

英語では、一般的にkeyword parametersと言いますが、dartではnamed parametersと言ったりします。
void printMean({double a=0, double b=0){
    print((a+b)/2);
}

void main(){
  printMean(a:1, b:3); // => 2
}
ちなみに、上記の例は、デフォルト値がついているため、正確にはオプショナルキーワード引数（optional named parameters）と言います。

 8. super_constructorsこれまでは、全ての引数を親Widgetなどに引き継ぐ必要ががありました（manual forwarding）が、これからはsuper parametersを渡せるようになりました。
この公式アップデートは、コード量をものすごく減らすことができ、非常に大きなインパクトをもたらすと考えられます。

 【Firebase】FirebaseはGoogleが運用しているmBaaS（mobile Backend as a Service）になります。FlutterとFirebaseの連携は非常にスムーズで、Flutterエンジニアは、Firebaseを用いることが多いです。
この連携がさらに強化されたことで、他フレームワークからのFlutterへ乗り換えるニューカマーの開発コストはさらに削減されたことでしょう。Googleが技術基盤をたくさん抱えている事による、シナジー効果は計り知れません。

 9. Firebase連携これまでは、FirebaseにFlutterが合わせるというスタンスでしたが、今回のリリースにより、FirebaseもFlutterに寄り添いました。
具体的には、Firebase側からFlutter用のProjectを作成できるようになりました。

そして、Flutterアイコンをクリックすると、Flutterプロジェクトの場合の設定方法が提示されます。


 10. FirebaseCrashlyticsFirebaseには、Crashlyticsというサービスがあり、クラッシュの検知や管理をしてくれるため、非常に便利です。今回のアップデートで、Crashlyticsでより細かいログが取れるようになったようです。

https://pub.dev/packages/firebase_crashlytics

 11. FlutterFire UIこちらも以前からあるパッケージなのですが、今回のリリースに伴って、更なるアップデートをした模様です。このパッケージには、FlutterとFirebaseを連携する際の認証画面などのフロントエンドのUIテンプレートが用意されています。

https://pub.dev/packages/flutterfire_ui

 【その他の機能改善】
 12. DevToolsの改善開発中に用いるDevToolsの改善がされました。
具体的には、Enhance TracingとNetwork Tabの機能強化がされました。Enhance Tracingはパフォーマンスに関連するDevTools機能であり、Flutterの開発チームがパフォーマンス改善を重視している姿勢が非常に見て取れます。

 13. Material Design 3Flutter 3.0において、Material Design 3（M3）のテーマに対応しました。
Material Designとは、Googleが提唱 / 開発しているデザインシステムです。Material Youという、ユーザーの壁紙の色に合わせてカラーテーマが変わる個別最適化デザイン（Dynamic Color）は一時期話題になりましたが、M3はMaterial Youを包括しています。
https://m3.material.io/
Material themeを実装したい場合、以下のサイトが非常に参考になります。

https://material-foundation.github.io/material-theme-builder/#/custom

https://codelabs.developers.google.com/codelabs/flutter-boring-to-beautiful#0

 14. Casual Game ToolkitFlutterによるゲーム開発ツールキットがリリースされました。

UnityやUnreal Engineほどの機能性はないにしろ、2Dゲームであればこのツールキットで一通り実装できるようになりました。

https://medium.com/flutter/announcing-the-flutter-casual-games-toolkit-c22e401d8fee

 15. Linterの改善最後に、公式Linterの改善がされました。
具体的には、Flutter3.0がLinterのv2に自動的に対応するようになりました。

https://pub.dev/packages/flutter_lints/versions/2.0.0

 Upgradeの仕方
 Flutterのバージョンをアップデートしたい場合以下のコマンドを実行することでFlutter3にできます。
flutter upgrade

 既存のプロジェクトをアップグレードしたい場合既存のプロジェクトにFlutter3を導入しようとするときは、必ずバックアップを取ることを推奨します。今回のアップグレードは、Flutter2との互換性が非常に高いのですが、プロジェクトによっては、デバッグが必要な場合もあります。具体的に、どの機能が非対応になったかは下記のサイトをご覧ください。
https://docs.flutter.dev/release/breaking-changes
プロジェクト内をクリーンにしたい場合は、上記のflutter upgradeに加えて、プロジェクト直下で以下のコマンドを実行します。
flutter doctor
flutter clean
flutter pub get
ちなみに、ダウングレードしたい時は、下記のコマンドでダウングレードできます。
flutter downgrade

 一言メッセージ私は、Googleが本気でソフトウェア開発のデファクトスタンダードを作りに行こうとしている熱量を感じました🔥
しかし、まだまだ改善点は多いと感じており、著者が見据えるこれからの展望（期待）をまとめました。
サーバーサイド言語としてのDart言語の改善
データアナリティクス/機械学習におけるライブラリの充実化
さらなるパフォーマンスの改善

 最後に最後まで読んでくださり、ありがとうございました！

この記事を通して、少しでもあなたの学びに役立てば幸いです！
!【📩 仕事の相談はこちら 📩】

お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

https://forms.gle/G5g1SJ7BBZw7oXYA7
もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。
info*galirage.com（*を@に変えてご送付ください）

 おまけ①：RaggleRAGの精度改善に挑戦しませんか？
Raggleにて、「法務RAGシステムの性能改善ハッカソン」を開催中です！（10月20日に募集締切）
Raggleは、RAGの性能改善技術を競い合い、AIエンジニアのスキルアップを支援するプラットフォームです🥇
優勝者（GOLD🥇）の賞金は、なんと30万円！！！
SILVERは10万円、BRONZEでも5万円の賞金を用意しています！
また、参加賞として、大会終了後に「RAG精度改善ハンドブック」を贈呈予定なため、初学者の方もぜひ挑戦してみてください 🔰
みなさん、奮ってご参加ください🔥
※ 生成AIエンジニアの権利を守るため、投稿されたソースコードの著作権は、投稿者に帰属する規約としているため、その点もご安心ください◎
▼ エントリーはこちら ▼

https://bit.ly/raggle_zenn

 おまけ②：書籍出版のお知らせついに『AIとコミュニケーションする技術（インプレス出版）』という書籍の事前予約が始まりました🎉
これからの未来において「変わらない知識」を見極めて、生成AIの業界において、読まれ続ける「バイブル」となる本をまとめ上げました。
かなり自信のある一冊なため、もしもよろしければ、ご一読いただけますと幸いです^^
▼ Amazonの事前予約はこちらから ▼

https://amzn.to/3ME8mLF

 おまけ③：生成AIアカデミーより専門的な「生成AIエンジニア人材」を目指しませんか？
そんな方々に向けて、「生成AIアカデミー（旧：生成AIエンジニア塾）」というプログラムを始めました🎉
最終的なゴールとして、『エンタープライズ向けの生成AIシステムを構築するためのスキルを習得し、大手案件で活躍できる人材』を目標とします。
また、一人一人にしっかりと向き合って、メンタリングをできるようにするため、現在メンバーの人数制限をしております。本気度やスキルレベルの高い人から、順番にご案内しております。
▼ 登録はこちらから ▼

https://bit.ly/generative_ai_engineer_school_by_zenn

 おまけ④：AI Newsletter for Biz最新のAIニュースの情報を収集しませんか？
AI Newsltter for Bizは、ビジネスパーソン向けに「AIニュース」を定期配信する完全無料のニュースレターです📩
一人でも多くの方にとって、「AI人材としてのスキルアップ」につながれば幸いです^^
また、現在、登録者限定で「明日から使える 無料AIサービス3選」のPDFを配布中です 🎁

※ ご登録完了のメールに、PDFリンクを添付いたします。
▼ 登録はこちらから ▼

https://bit.ly/ai_newsletter_for_biz_zenn

 おまけ⑤：生成AIの仕事をしたい仲間を募集中 🤝弊社Galirageでは常に、40-50件ほどの生成AI案件が走っております。
そして、ほとんどが「生成AIの案件（RAGシステム開発 / 精度改善の研究開発など）」の仕事になります！
かなり人手が不足しており、以下のポジションの仲間を募集しています💪
RAGエンジニア（RAG / LangChain / Python）
バックエンドエンジニア（Python / FastAPI）
フロントエンジニア（Next.js / TypeScript）
Azureエンジニア（AOAI / AI Search）
UI/UXデザイナー
生成AIリサーチャー（研究開発 / 論文執筆）
生成AIコンサルタント
PM / PMO
ご興味がある方は、下記のフォームよりお気軽にご連絡ください！
https://forms.gle/XMd19irZU4Fi7VAQ9
採用基準は下記の通りです。

平日の日中に動ける方だと嬉しいですが、週8時間くらいの副業でもOKです！
開始時期は、直近だと嬉しいですが、遠い未来でもOKです！まずはカジュアルに話しましょう😊
年齢は不問です！現状は、平均年齢は30歳前後の会社です！
「スキルセット」よりも「カルチャーマッチ・仕事への姿勢・ものづくりへのワクワク」を重視します。
10月には新しく10名採用しました。
その内、エンジニア経験が3年未満の方は、4名いました。
スキルについては、ジョインした後に、必要に応じて、キャッチアップする時間を作ります。
弊社は、正社員7名、業務委託80名の組織で構成されており、業務委託の仲間に支えられているため、正社員と業務委託の間にあまり差をつけていません。
契約形態に関わらず、一緒に働く仲間として受け入れたその日から、大切な仲間です！
新卒や転職の正社員採用もしていますが、業務委託での仕事を通して、お互いにWin-Winだと判断できた方のみを採用しています。
私自身、フリーランスを5年間やっていたため、個人事業主と正社員のメリデメは両方の立場から理解しています。

人手不足ではあるものの、採用基準をかなり厳しくしています。目の前の売上よりも、カルチャーのマッチする人だけを入れることにこだわっています。
ちなみに、弊社のリーダーを紹介したプロフィールページはこちらです！
Galirageに、本当に素敵な方が多いことは、保証します！



 参考文献https://medium.com/flutter/whats-new-in-flutter-3-8c74a5bc32d0
https://www.youtube.com/watch?v=w_ezWG1yKQQ
https://www.youtube.com/watch?v=3HREQwLmy88
https://www.youtube.com/watch?v=8Q1UgiwaaI8
https://www.youtube.com/watch?v=kCnYRhkfWHY
https://www.youtube.com/watch?v=cIFLFpKTy7c
https://www.youtube.com/watch?v=aIqy-Ulu4Gw
https://www.youtube.com/watch?v=kCnYRhkfWHY

【Build & Deploy】

1. macOS appsのstable化

2. Linux appsのstable化

3. Foldable phoneへの対応

【Web appsのパフォーマンス】

4. ウェブ画像表示の高速化

5. ウェブアプリのライフサイクルの改善

【Dart記法】

6. enhanced_enumumerations

7. named_args_anywhere

8. super_constructors

【Firebase】

9. Firebase連携

10. FirebaseCrashlytics

11. FlutterFire UI

【その他の機能改善】

12. DevToolsの改善

13. Material Design 3

14. Casual Game Toolkit

15. Linterの改善

Upgradeの仕方

Flutterのバージョンをアップデートしたい場合

既存のプロジェクトをアップグレードしたい場合

一言メッセージ

最後に

おまけ①：Raggle

おまけ②：書籍出版のお知らせ

おまけ③：生成AIアカデミー

おまけ④：AI Newsletter for Biz

おまけ⑤：生成AIの仕事をしたい仲間を募集中 🤝

参考文献

Discussion