コーディングとタスクの高速化でより効率的な開発を　Flutter開発で押さえておきたいポイントとTips

Flutter入門時に押さえておきたいポイント

神原健一氏（以下、神原）：続いて入門時に押さえたいポイントということで、Flutterアプリのファイル構成、画面の作り方、ビジネスロジックの効率的な実装を紹介していきます。Flutterアプリを作っていくときには、プロジェクトを作ったあとに生成されます。

特に重要なファイルが2つあります。1つがソースコードで、main.dartというファイル。そしてpubspec.yamlというライブラリ、もしくはいろいろなアプリの中で使う画像などを定義するファイルがあったりします。簡単に中身の紹介をします。

例えばモバイルアプリを作るとき、AndroidやiOSをネイティブで開発している方であれば、XMLをいじったり、iOSであればStoryBoardをいじって画面を作っていくイメージがあると思いますが、Flutterの場合であれば、Dartを使ってUIの部分も自分でガリガリ編集していくことになります。

（スライドの）右側にあるような「こんにちは、Flutter」という画面を作ろうと思ったら、左側のようなソースコードを書いていくことになります。

ちょっとわかりづらいので、色でそれぞれの対応関係を示しています。Flutterでアプリを作るときにはマテリアルデザインに沿って作っていくのがけっこう普通なので、material.dartというファイルをインポートしたり、いわゆるGUIコンポーネント的なものに相当するStatelessWidgetがソースコードにありますが、これを継承してアプリケーションを作っていく。

細かいことは割愛しますが、いくつかGUIのコンポーネントを配置して、それが左側のソースコードにマッチしている感じになります。ここでちょっとつかんでほしいポイントが、ツリーの構造になります。Flutterでアプリを作るときには先ほどのソースコードを書いていきますが、非常に大事なのがツリー構造で考えることです。

ソースコードを上から下に順番に書いていく。Scaffoldはアプリケーションテンプレート的なものですが、その下にアプリケーションのバーやボディを配置していきます。

少しこれはちょっと応用的な話になりますが、動的な画面更新をしたいときには、状態をもつWidgetとして、StatefulWidgetがあります。例えばモバイルアプリであればボタンを押すと、画面の内部が変化する。カウンターのアプリであれば、＋ボタンを押すとカウントアップしていく。そういったアプリを作る場合には、状態をもつStatefulWidgetを使いますが、そのときには（スライドの）左にあるソースコードを書いていくことになります。

ビジネスロジックの効率的な実装

続いて紹介するのは、ビジネスロジックの効率的な実装ということで、車輪の発明前にはパッケージ調査が非常に大事になってきます。パッケージというのは、いわゆるライブラリだと思ってください。Flutterの場合であれば、pub.devというサイトに飛ぶと、いろいろなライブラリを検索できます。

Androidのネイティブアプリを作っている方であれば、SharedPreferencesという、キーバリュー形式でデータを映像化するためのAPIがあり、それに相当するものがFlutterでも提供されています。その場合は、SharedPreferencesを検索すると、実際に使えます。

pub.devが非常に優れているのは、ライブラリの導入の仕方をけっこうわかりやすく書いてあるところです。先ほど紹介したpubspec.yamlというファイルで、定義の仕方や、あとは定義したあとにどうやるとそのライブラリが自分のプロジェクトに入っていくかもわかったり。

あとは「インポート文はこう書くんですよ」というのが書いてあるので、これはもう基本的にはコピペをしていくだけで、新たなライブラリを自分のプロジェクトに導入していくことが可能です。

ちなみにもしIDEとしてAndroid Studioを使っている方であれば、pubspec.yamlを開いて、先ほどのSharedPreferencesのライブラリ定義をして、あとは「Packages get」というボタンをポチッと押せば、ライブラリを新たにインポートします。これぐらいの操作で使えます。

SharedPreferencesでキーバリュー形式でデータを保存するよというときには、たかだかこれぐらいのコードです。インポート文を書いて、あとはちょっと下に関数が定義してありますが、バリューとして保存した値を与えれば、SharedPreferencesのAPIを使って、key1というキーに対して与えられてきたバリューを保存する。これでデータ永続化の処理は書けることになります。

Flutter入門時に押さえておきたい要素

Flutter入門時に押さえたい要素をいくつか紹介したいと思います。Flutterでコードを書くには、Dartをガリガリ書いていくことになりますが、ソースの"_"は、Javaの世界でprivateに相当するものだったり。あとは".."とか"..."など、いくつかDartに関するちょっと独特なものがありますが、公式サイトにこのあたりも例を交えて紹介されているので、よければ参照してください。

モバイルのアプリを作るときには、例えばいろいろな通信処理や重たいデータベースに関する処理など、いちいちユーザーを待たせるとストレスの多いアプリになってしまうので、非同期処理を駆使していくことは非常に大事になります。そのときには、FutureやStreamなど、非同期処理を簡単に実現するための機構もあるので、こちらも別途参照ください。

Flutterアプリの開発Tips：コーディングの高速化

それではFlutterアプリの開発Tipsということで、もう少し実践的なところを紹介していきたいと思います。アプリの開発を高速するためには、いくつかの観点があります。コーディングを速くする方法、あとはその他のタスクを効率化していくアプローチがあります。それではまず、コーディングの高速化の話をしていきます。

従来のアプリケーションを作っていくときには、例えばStatelessWidgetでGUIコンポーネントに相当するものを、基本的には手書きで構造として書いていくことになります。これはたかだか5行ぐらいのコードですが、これをいちいち手書きで書くのはけっこう大変です。アニメーションに関しても、けっこう長めのソースコードを書く必要があったりします。

そこでおすすめなのが、ライブテンプレートを活用ことです。これはAndroid Studioの場合ですが、Android Studioにはライブテンプレートという機能が提供されていて、先ほどのようなStatelessWidget、アニメーションを書くための処理が、予めテンプレートとして提供されています。こういったものを使うことで、非常に効率的に処理を書いていくことが可能になります。

（動画開始）

ここでちょっと紹介したいのが、ライブテンプレート。具体的にどんなものなのかというと、例えばStatelessWidgetを作りたいときにはstlessと押して、あとはTabキーを押すと、そのテンプレートが吐き出されます。例えばStatefulWidgetであればstfulと打って、Tabキーを押せば、ソースコードが10秒ぐらいでジェネレートされる。こんな感じで、非常に効率よく開発を進めていくことができます。

（動画終わり）

「でも、これだけしかテンプレートがないんだっけ？」　というところがあります。そこでおすすめしたいのが、Flutter Snippetsです。こちらを導入すると、画面に表示しきれない100以上のテンプレートを使えるようになります。

自分がよく使うソースコードを何文字か入れて、Tabキーを押せば、簡単にソースコードを補完していけます。

Flutterアプリの開発Tips：開発タスクの高速化

続いて紹介したいのが開発タスクの高速化ということで、コーディングをしていく以外にもいろいろなやりたいことがあるので、その内容を紹介します。1つ目に紹介したいのが、Flutter Enhancement Suiteです。

（動画開始）

これがどんなものかというと、Flutterでアプリを作るときにパッケージを自分のプロジェクトに入れていきます。そのときにpub.devというサイトに飛んで、ライブラリの名前を検索して、どういう定義の仕方かを調べて、その内容をコピー＆ペーストで持っていく流れを踏みますが、けっこう慣れてくると、ライブラリの名前は自分で覚えちゃったりします。

そのときには、覚えているこのライブラリの名前を数文字入れて、ポチッとボタンを押せば、検索候補として出てきます。そうすると、pub.devをいちいち覗きに行かなくても、自分のライブラリを新たに導入していくことが可能となります。

（動画終わり）

あと紹介したいのが、このFlutter Pub Version Checkerです。こういったツールを使うと、さらにライブラリの導入が簡単になります。あとはflutter-img-syncというものがあって。

（動画開始）

これはどんなものかというと、例えば、自分のFlutterのアプリの中で画像を使いたいケースのとき、を自分のプロジェクトのpubspec.yamlの中に手書きで画像の定義などをいちいち書いていく必要があります。

最終的にその使いたいソースコードを、Dartのソースコードのファイルの中に書いていく。“Image”が画像を表示するコンポーネントですが、その中に画像のファイルパスを書くことをやっていきます。そのときに、画像のファイルパスをスペルミスをして書き間違えたとしても、特に警告がぜんぜん出なくて、実行したときに初めて画像のファイルパスを書き間違えたことに気づくことになります。

（動画終わり）

それを、例えばflutter-img-syncを導入しておけば、あたかも自分のクラスの中にあるフィールドを参照するかのごとく、画像を参照できて、コーディングのミスを大幅に減らせるところがけっこう大きいと思います。今回はflutter-img-syncを紹介しましたが、他にも同様のライブラリが提供されています。

例えば、わさびーふさんが公開しているFlutterGen。最近僕はFlutterGenを使うことが多いんですが、それを使うと、同様に置いた画像をいわゆるクラス参照するようなかたちで使うことが可能になります。これでけっこう効率的に開発ができると思います。

あと最後にちょっと見てほしいと思うのが、FlutterJsonBeanFactoryというものです。Flutterのアプリも、スタンドアロンで動かすものはけっこうレアだと思います。

どちらかというとサーバーと何らかの通信をして、サーバーから取ってきたJSONファイルを基に、画面の中にリスト形式で表示したり、そんな感じでモバイルアプリを作っていくと思います。そのときにけっこう厄介なのが、取ってきたJSONを自分でパースして、それを画面に表示して、地味な処理をけっこうガリガリ書く必要があることです。

そこで見せたいのが、このFlutterJsonBeanFactoryです。

（動画開始）

これが使用例になります。ウィザードをちょっと1回開いて、クラス名を入力して、今回作りたいJSONをペコッと貼り付けます。あとは「Make」ボタンをポチッと押すと、このJSONに合致したDart用のデータクラスが、自動で生成されるようになっています。

（動画終わり）

この自動で生成されたDartクラスにアクセスするためのヘルパークラスも一緒に生成されるので、そのヘルパークラス系で、Dartの中をパースして表示したりも簡単に可能になります。従来面倒くさかった処理を代替してくれるので、効率的に開発を進められると思います。

Flutterアプリの開発Tips：メンテナンスしやすいUIの作り方

こういったところを押さえてもらってFlutterのキャッチアップができたら、見てほしいのが、やはり非常に大事だと思っている、メンテナンスしやすいUIの作り方です。Flutterでアプリを作っていると、冒頭で紹介したとおり、UIのツリー構造がけっこう深くなっていったりします。

そうするとソースコードもどんどん長くなって、非常に見づらくなる。メンテナンスがしづらくなってきてしまうので、必要に応じてリファクタリングをしながらロジックを分割して、見通しのいいソースコードを書いていくところがポイントかなと思います。

あとは大事になってくるのは、アプリの状態管理です。Flutterでアプリを作っていくと、何か処理をしたらそれが画面に反映されて、また次の画面にデータを持っていってと、どうしても状態管理が大変です。そのときに、もう自前で何か処理をするのではなく、基本的にはこのProviderやRiverpod、BLoCなど、非常に便利な状態管理のライブラリ群があるので、こういったものを駆使して開発することが、複雑なアプリでも作っていくときにはポイントかなと思います。

Flutterアプリの開発まとめ

ということで、最後にまとめます。Flutterは、1ソースでAndroidやiOSだけでなく、＋αでデスクトップアプリやWebなどの世界のアプリを作れます。もう実際に商用アプリも作られているし、マーケットにも公開されています。プロダクション適用もできる状態になっています。

最後に紹介したようなTipsがいくつかあるので、そういったものを活用することで、効率的な開発を進められるのではないかと思います。

それでは駆け足になりましたが、これで発表を終わりとします。ご清聴ありがとうございました。

司会者：神原さんありがとうございました。1点だけ質問が来ているので回答できるようであればお願いします。「Visual Studio CodeにFlutterの環境構築するのと比べて、Flutter Studioを使うメリットってどんな点がありますか？」という質問が来ています。

神原：質問ありがとうございます。そうですね、Visual Studio Codeを使うケースであれば、基本的にそちらを使って開発をキャッチアップするのが個人的にはおすすめです。

Flutter Studioは冒頭で紹介したとおり、基本的にこういういろいろなIDEとかに慣れていない場合にGUIを使って、Flutterの画面の作り方をどうしたらいいんだろうとか、最終的にFlutter Studioを使うとドラッグ＆ドロップで配置した画面がDartのソースコードとして出力されますので、その出力された結果を見ながら学んでいくには非常に便利です。

しかし、あくまでも練習用途になるので、Visual Studio Codeを使うのであれば、それを使って開発を進めるのがいいかなと思います。

司会者：回答ありがとうございました。それでは神原さん、発表ありがとうございました。

神原：ありがとうございました。