はじめに

Flutterとは？

Flutter(フラッター)はGoogleが開発しているアプリケーション開発フレームワークです。所謂クロスプラットフォーム開発を念頭に設計されており、一つのコードベースでiOS/Android両方で利用できるアプリを開発することができます。

またGoogleは他のプラットフォームでも利用できるように開発を進めており、今後はウェブアプリ/デスクトップアプリの開発もサポートされます。ウェブアプリ開発については現在はテクニカルプレビュー、デスクトップアプリはそれよりももう少し前のテスト段階という感じですが、プロジェクトとして公開されています。これらが順調に成長して、Flutterだけでマルチプラットフォーム展開が可能になったら個人開発者としては非常に嬉しいところです。そんな訳で趣味でぼちぼちFlutterアプリを書いたりしています。

何がすごいの？

クロスプラットフォーム開発が楽

クロスプラットフォーム開発が楽です。クロスプラットフォーム開発できるといっても、OS特有の部分はそれぞれ実装する必要がありますが、よく使うものにはライブラリが用意されていたりするので便利です。例えばGPSへのアクセスとかもパッケージを使えば簡単に実装できます。パッケージがない場合は自分で実装しないといけませんが、それぞれのプラットフォーム標準の方法での実装(Java/KotlinやSwiftを使った実装)もサポートしているので、その部分だけ個別に実装すれば大丈夫です。

デバッグが楽

Flutterはホットリロードという仕組みを備えています。デバッグモードでアプリを実行中にコードを変更すると、即座にその変更が反映されます。ちょっとした変更のときに毎回再ビルドすると地味に作業時間を削られていきますが、Flutterでは再ビルドはそんなに必要ありません。FlutterはアプリのUIも全部コードで書いていくことになるのですが、トライアンドエラーを繰り返しながら見た目を整えていくことが多いのでホットリロードには大変お世話になります。

高速

FlutterはDart言語を使って開発していくのですが、Dartは実行時コンパイラ(Just In Time Compiler/JITコンパイラ)と、事前コンパイラ(Ahead Of Time Comliper/AOTコンパイラ)の両方をサポートしています。

デバッグ時には実行時コンパイラを利用することで前述のホットリロードを実現し、開発効率を高めています。一方開発用のリリースビルドを行う際には事前コンパイラを利用することで、ネイティブARMコードを直接生成します。これによってリリースビルドでは最適化されたパフォーマンスが期待できます。やっぱりGoogle的には60fpsでぬるぬる動くってのは大事なようで、Flutter関連の公演でも「60fps」って単語がちょくちょく出てくる気がします。

Flutterの教材について

Googleがかなり積極的に情報展開しているためか、Flutterに関する良質な情報や教材は多いのですが、数が多すぎてどこから取っ掛かればいいのかよく分からなかったので、個人的に良いなと思った教材なんかをオススメしていきます。

オススメ教材

公式

まずインストールは公式が一番しっかりしてると思います。Windows, macOS, Linuxそれぞれ分けて書いてありますし、ChromeOS向けのドキュメントすらあります。Flutterには"flutter doctor"という診断ツールがあり、それを叩くだけで環境設定の不備を指摘してくれますので非常にインストールはスムーズにいきます。

クロスプラットフォーム開発のお決まりのような感じですが、iOSアプリをビルドするにはXcodeのセットアップも必要になります。公式ページにはこの辺りも丁寧に説明がされています。

また既に他の開発を経験している人に向けた学習の手引きも用意されています。例えばAndroid開発者向けには「Intentと同等の仕組みはあるの？」「Shared Preferencesってどうやってアクセスするの？」といったような内容が含まれており、それぞれの経験者がイメージしやすい概念を軸にFlutterについて教えてもらえます。英語で新しい概念を理解していくのは結構大変ですが、既によく知っている事柄をベースに説明してもらえるとかなり楽です。脳みその疲れ具合が全然違います。この手引きは下記の通り5つ存在しています。Xamarinまでカバーしているという素晴らしいラインナップです。

• Android開発経験者向け
• iOS開発経験者向け
• React Native開発経験者向け
• Web開発経験者向け
• Xamarin.Forms開発経験者向け

Udacity : Build Native Mobile Apps with Flutter

こちらもGoogleが提供しているので公式教材ですね。Udacityのコースですが無料で利用できるのでよいと思います。序盤でFlutterの概要や、なぜDartを採用したのか等の説明があるので、ささっと概要を聞きたい人にもオススメです。

Google Code Lab (Write Your First Flutter App)

これまた公式ですが、ハローワールドに次に学ぶべき教材としてはCode Labが一番役に立ちました。Flutterで最初に引っかかる部分としてStateless Widgets(ステートレスウィジェット)/Statefull Widgets(ステートフルウィジェット)がありますが、正直公式の説明だけを読んでてもよく分からず、動くものを作りながら実際の動作を確認するのが一番早いです。Code labで作るサンプルアプリはStateless/Statefullに最初に触れるには良い教材です。

パート1とパート2に別れていて、この2つのパートを通してスタートアップの名前をランダムに生成してリスト表示するアプリを作ります。パート1では無限スクロールできるリスト表示をするところまで、パート2では生成したお気に入り機能を実装するところまでを実装できます。それぞれ完全な形でのサンプルコードが模範解答として提供されている(パート1/パート2)ので、何か分からないことがあってもこれを参照できます。

Google Code Lab (Building a Cupertino app with Flutter)

こちらはFlutterを使ってiOS標準っぽい外観のアプリを作成する場合のコードラボです。Flutterは2種類のスタイルのウィジェットを提供しており、Android標準っぽいデザインのMaterial widgets(マテリアルウィジェット)とiOS標準っぽいデザインのCupertino widgets(クパチーノウィジェット)がそれぞれ存在します。

ちなみにこの「Cupertino(クパチーノ)」というのはシリコンバレーにある地名から来ています。クパチーノはAppleの本社があることで有名なので、直接Appleの名前を出さずにiOS向けのデザインであるという共通認識を持たせるのに使われています。Googleってこういうの上手いですよね。

ちなみに教材の中でちょっと引っかかったのは序盤にあるこの文章。

You can technically run a Cupertino app on either Android or iOS, but (due to licensing issues) Cupertino won't have the correct fonts on Android. For this reason, use an iOS-specific device when writing a Cupertino app.

【意訳】技術的にはクパチーノアプリはAndroidでもiOSでも動作します。しかし（ライセンスの問題により）クパチーノアプリはAndroid上では適切なフォントを搭載できません。この理由により、クパチーノアプリはiOS搭載デバイスで利用してください。

https://codelabs.developers.google.com/codelabs/flutter-cupertino/#0

Flutter Widgets of the Week

Flutterの基礎を覚えた後、次に苦戦するのがウィジェットだと思います。Flutterは最初から利用できる便利なウィジェットを沢山用意していますが、種類が多くて最初はどれを使ったらよいか良く分かりませんでした。

Flutter Widgets of the WeekはGoogle公式のYouTube動画シリーズで、Flutterが最初から提供している便利なウィジェットを、1分〜1分30秒程度で一つずつ紹介してくれます。アニメーションを沢山使って直感的に分かりやすいように工夫してくれるのと、短い動画なのにサンプルコードまで紹介してくれたりするので、英語が苦手でも見る価値があると思います。2019年10月現在時点で54本もありますが、一本一本が短いので一気見が可能です。これを一気に見て、自分が作りたいUIに必要そうなウィジェットをメモすることで、アプリを作るイメージが固まってきました。最初はメモを取らずに見ていましたが、さすが多すぎて「あれ？あのウィジェット何だっけ？？」と思い出せなくなるケースが何回かあってメモを取ることにしました。若い人ならメモなしでもいけるかも知れません。

Flutter Awesome

公式ウィジェットだけでアプリを作っていくのは趣味グラマーとしては大変なので、便利なパッケージは積極的に利用したいところです。Flutter AwesomeではFlutterのパッケージやプロジェクトが沢山紹介されており、便利なパッケージ探しを行うのに重宝しました。他のプラットフォームでもAwesome-iosとかAwesome-vueとかがありますよね。そんな感じです。ただしFlutter AwesomeはスクリーンショットやアニメGIFなどが掲載できるので、直感的に理解しやすい形でパッケージが紹介されています。Awesome-vueとかだと基本的には文字ベースの簡単な紹介なので、一個一個リンクを踏んで行かないと自分が欲しいものかどうか分からないのですが、Awesome Flutterは欲しいものを探しやすいです。

pub.dev

pub.devはDartのパッケージの閲覧ができるサイトで、node.jsでいうnpmjs.comみたいなものです。ここでよかったのはトップページに「Top Dart packages」という人気ランキング？みたいなものがあって、それを眺めるだけでもFlutter開発者が良く使っているであろうパッケージが分かったことです。「あー、http通信ってこれ使っておけばいいのね」みたいなのがぼんやりと把握できました。

Pragmatic State Management in Flutter (Google I/O'19)

Flutterで難しい問題として状態管理があると思います。例えばスライダーUIと円グラフを連動させたい場合、それぞれが持っている値を共有してあげないといけません。このYouTube動画では、データをどのようにハンドリングするべきなのか、ライブコーディングしながら、その実践的な方法について紹介されています。

Flutterの状態管理には様々なアプローチがあり、アプリの複雑度によってベストなアプローチは違ってきます。

Dart入門 - Dartの要点をつかむためのクイックツアー

あんまり言語をきっちり勉強してから動く方ではないので、Dartに関してはCode labのサンプルを見たりしながら覚えていきました。Kindle Unlimitedで利用できたので、こちらの書籍は参考にしたりしました。

• Dart入門 - Dartの要点をつかむためのクイックツアー

おわりに

この記事ではFlutter開発を行う上で参考になった教材や情報源について紹介しました。FlutterはGoogleが公式にかなり多くの教材を提供している関係で、良質の教材が揃っていると思います。今後Flutterがウェブ、デスクトップにも進出してくれば活躍の機会も増えますので、今のうちに勉強しておき流行りに乗り遅れないようにしたいですね。