Flutter Meetup Tokyo#11に参加してきました

Flutterとは

• AndroidとiOSのアプリケーションが単一のソースコードから開発できるクロスプラットフォームの開発技術
• DartというGoogleによって開発されたプログラミング言語によって書かれている
• 現在急成長中の技術で、日本でもユーザーが250%増加している
• AlibabaやGoogleでも採用されている
• 5KB以内でアプリを作るコンテストとかやってる https://flutter.dev/create

Flutterの特徴

• Beautiful

  • デフォルトで用意されているウィジェット（コンポーネント）のUIがマテリアルデザインに基づいて設計されており、意識しなくても簡単に綺麗なUIが作成できる

• Fast

  • コンパイル言語
  • ホットリロードで開発効率が上がる（ビルドが速い）
• Productive

• Open

  • 無料

Flutterの目的

いろんな画面で美しいUXを開発するためのベストなフレームワークにしたい

• Flutter for Web

  • まだ安定版は出ていない
• Flutter for Mobile

• Flutter for Desktop

  • もともとプロジェクトとして存在するが、現在Flutterエンジンに書き換えて、メインのFlutterリポジトリに統合する予定。

• Flutter for Embedded Devices

  • Google Home Hubなどのスマートディスプレイや、Googleアシスタントなどの一部のアプリでFlutterが使われている
  • 将来的にはシステムUIを操作するためにFlutterを使うようにしていくらしい

その他

• エディタはVSCodeかAndroidStudioで開発するのが一般的らしい（IntelliJもあり）
• DartはJavaとJavaScriptを混同させたような雰囲気
• 他のネイティブアプリの開発技術と比べてアプリをストアに出すことに有利、不利とかはないらしい

• 基本的なネイティブの機能を実現するようなプラグインは大体あり、OS間の差異をできるだけ吸収するようには作られているが、どうしても実現できないネイティブの機能やOS間の差異が出ることはあるらしい

  • その場合は結局kotlinやswiftを使う必要があるため、ネイティブ機能を豊富に使いたいようなアプリの開発では向いていないらしい（kotlinやswiftと連携するようなプラグインはあるらしい）

ReactNativeとの比較

• ReactNativeの方が初回リロードは時間がかかるが、気にするほどの差はないらしい
• Flutterではデフォルトで用意されているウィジェット（コンポーネント）がUIがマテリアルデザインに基づいたもののため、意識せずとも簡単に綺麗なUIを実現することができるが、ReactNativeはデフォルトで用意されているコンポーネントはなく自分で作るかサードパーティのライブラリを利用するしかないため、UIの面ではFlutterの方が優れているらしい
• FlutterはDartというプログラミング言語の習得が必須である一方で、ReactNativeはReactの知識があれば簡単に開発ができるので、React経験者はReactNativeを使用した方が学習コストが少なくて済む

• Flutterは公式のドキュメントが充実しているが、全て英語で導入事例も少ない

  • ReactNativeも日本語ドキュメントが充実している訳ではないらしい

その他学んだこと

• Flutterではテキストの音声読み上げができる

• スクリーンショットも取れる

  • ストアに載せる画像を取得するのに重宝するらしい
  • テストにも利用できる

• Webviewという技術を使えばネイティブアプリでWebブラウザと同じHTMLを表示することができる

  • メリットとして、ネイティブアプリ用のプログラムを新規で書く必要がない
  • デメリットは、ネイティブらしいスムーズな動きができないので、ユーザー体験がネイティブに比べて劣る
  • FlutterでWebviewを使用するとテキスト入力の際にキーボードが出現しないバグがあるらしい

• PWA対応したWebのソースコードをネイティブ用に変換するツールがあるらしい

  登壇者スライド

• Flutter製アプリでのアクセシビリティ（音声読み上げ編） https://speakerdeck.com/nanonano/screen-reading-in-flutter-app
• Flutterでの自動スクリーンショット取得 https://speakerdeck.com/matsue/getting-screenshots-automatically-in-flutter
• Release Flutter App Video On Demand https://speakerdeck.com/yumatan/release-flutter-app-video-on-dem

所感

• Flutterはネイティブだけに止まらず、Webやデスクトップなど広い範囲で共通して使える技術のため、習得して損はない技術だと感じた

• SSでネイティブアプリの開発を検討した際に、ネイティブ特有の機能を使うことはあまりなさそうなのでFlutterで開発することに検討の余地はあると感じた

  • ただし、Webviewの使用を考えた場合、Flutterにはバグがあるらしいので、別のネイティブ技術を検討したほうが良さそう
  • Java、JavaScriptの開発経験者も多いので、Dartに対する抵抗感はそれほどないかもしれない
  • チュートリアルを触った感じでは、Dart言語そのものは分かりやすいが、ネイティブ特有のコーディングに慣れるのに時間がかかりそう（HTML、CSSではないため）
• Webviewを使えば工数も最小限でストアにアプリが出せそうなので、ストアに出すことが最優先なのであれば試してみる価値はあるかもしれない