この記事は bosyu Advent Calendar 2019 の9日目の記事として書かれています。
このエントリでは、bosyuではPdMの役割を演じている人が、bosyuとは全く関係のないFlutterを使ったアプリ開発のはじめの一歩についての知見を共有いたします。
誰に向けた記事？
- Flutterでアプリ開発してみたい人
- Flutterについてのなんとなくの理解を得たい人
- Flutterを学ぶにあたっての関連ドキュメントをざっくり知りたい人
Flutterの選択理由
個人開発者として10万DLほどされているiOSアプリを開発しているのですが、Android版が欲しいというユーザーさんからの声が日々強くなっていました。とはいえ、一人でiOSとAndroidの双方（および、APIサーバー等々）をメンテナンスしていくことは現実的ではなかったため、クロスプラットフォームに対応したフレームワークを利用することとしました。
React Nativeでも良かったのですが、最終的には下記の観点からFlutterを選択しました。
- Reactが特に得意なわけでもなかった
- 数年前と比べてFlutterコミュニティの熱量が高まっているのを肌で感じていた
- Flutterアプリを実戦投入している知人がいたので最悪なんとかなると思った
SwiftからFlutterへの登り方
下記の方針でFlutterの知識を深めつつ、SwiftからFlutterへと書き換えを進めていきました。
- チュートリアル等で最低限の知識を得る
- サンプルアプリをいくつか写経する中でウィジェットの使い方を覚える
- 二週間程度で実装可能な練習用アプリをリリースすることで、Flutterを使った場合のリリースまでの一連の流れを理解する
- SwiftからFlutterへの書き換えを行う
つまりは、最初からSwiftからFlutterへの書き換えを行うのではなく、少し回り道になるものの、Flutterを使った一連の開発を先に経験して全体感を得ることで、最終的な効率を上げるというアプローチを取りました。
今回のエントリでは、その時に練習用アプリとしてリリースした日記アプリを作る時に行なったこと、参考にしたものを中心にまとめていきます。
やったこと/参考にしたもの
ここからは、実際にやったことや参考にしたものを記載していきます。
環境構築
公式ドキュメントが充実しているため、基本的にはドキュメントに沿って構築するだけで終わります。複数のPCで環境構築を行いましたが、これといってハマる事もなく終わりました。
チュートリアルの実施
公式のチュートリアルが充実しているので、素直に公式のチュートリアルを写経するのが良さそうに思えています。
Write Your First Flutter App, part1
- Flutter公式のチュートリアル
- リストの表示などがざっくり学べる
Write Your First Flutter App, part2
- 上記のチュートリアルの第二弾
- ページの遷移方法などがざっくり学べる
Layouts in Flutter Tutorial
- Flutterはウィジェットを組み合わせてレイアウトを作っていく
- ざっくりのレイアウト方法などが学べる
https://flutter.dev/docs/development/ui/layout
https://flutter.dev/docs/development/ui/layout/tutorial
Flutter関連動画の視聴
概念的な部分についてはドキュメントだけだと分かり辛いこともあり、いくつかの動画をみた。
Flutter 今週のウィジェット
- Flutterのウィジェットを60秒動画で多数紹介している
- ウィジェットを事前に頭に入れておくことで、効率的にアプリの構築ができる
- 日本語字幕もあるので英語が苦手でもOK
よく閲覧したドキュメント
ウィジェットの一覧
- Flutterの基本となるウィジェットが全てまとまっている
- どのようなウィジェットがあるのかを事前に眺めておくだけでも開発効率が上がる
レイアウトのチートシート
- どのようなコードを書けばどのようなレイアウトになるかのチートシート
- コードだけでは直感的にイメージし辛いものも多く、かなり参考になる
Flutter関連のリンク集
- Flutterの人気のプラグインや参考となるリンクがまとまっている
- 何か困ったときはここをまず見ると良い
パッケージの検索
- Flutterのパッケージの検索（公式）
- 車輪の再発明を防ぎたいときはまずはここを探す
- レーティングはかなり参考になる
サンプルコードがたくさん載っている場所
- パターンごとんのサンプルコードが多数掲載されている
- 似たようなUIを作りたいときなどに参考にすると良い
ライブラリの実体験
- Flutterを実戦投入されている方の各種ライブラリのレビュー
- 私が実際に触ってみた感じともだいたいマッチしていた
その他参考にしたドキュメント
Flutterの画面遷移について
- 画面遷移は少し癖がある
- Flutterの画面遷移関連の日本語記事では一番わかりやすかった
テーマカラーの設定
- Flutterではテーマカラーをきちんと設定すれば、デザインの整ったアプリを作りやすい
- とはいえ、テーマ周りの設定項目がどこに反映されるか謎なため、参考にした
Sqliteの説明
- flutterではアプリ内データベースとしてSqliteが使われることが多い
- 個人的にはrealmが好きだが、公式には対応していない
- Sqlite関連の記事ではこちらが一番わかりやすかった
デプロイ周り
- デプロイ周りのドキュメントは公式が一番よかった
Flutterでアプリを開発してみた雑感
Flutterでアプリを開発するにあたって実際に行ったことや、参考にしてきたドキュメント等を紹介してきましたが、最後にFlutterでアプリを開発してみた雑感を記しておきます。
開発速度
個人的には、Swiftで書くよりもFlutterで書く方が同じ処理を早く書けるケースが多々ありました。とはいえ、Table周りの処理や、キーボード周りの処理等には、公式のウィジェットや各種ライブラリだけではまだまだ不足している部分も多く、本来書かなくても良いような処理を書く事も多々ありました。
とはいえ全体を通してみたときは、Swiftで書いた場合を10とすると、8くらいの時間で書けたように思えます。
また、あまり複雑な処理を行うアプリではない事もあり、iOSとAndroidではほぼ全て同じコードだけで対応できていました。一部、過去の端末からのデータ移行のような処理についてはiOS側だけに書きましたが、メインの処理についてはワンコードで対応できていました。この辺りを考えると、iOSとAndroidを二つ作るよりは圧倒的に早いペースで開発できたように思えています。（この辺りは個々人の習熟度の差や慣れ、好みなどもあるので参考程度ですが）
クオリティ
ネイティブアプリと比較して、遜色のない形で作れていたように思えます。画像読み込みが絡む部分などにおいては、ネイティブより動きが軽快なのではと思う部分（触ってみたところの感覚値）もありました。とはいえ、書き方に拙い部分があるとクラッシュしてしまったりする事も多く、癖が強いなあというのが印象値です。
また、iOSとAndroidでデザイン観点のお作法が異なるケースへの対応などをきちんと行った場合、なかなかに面倒であると感じています。この辺りをきちんと対応していかなければアプリのクオリティを上げることは難しいため、本気でクオリティの高いアプリを作りに行く場合は、やはりネイティブで書いていくしか無いと思っています。