井上 研一 なんだかんだとスマホアプリを作ることがあるのですが、ずっと昔のJavaでAndroidアプリから始まって、Objective-CでiOSアプリ、さらにCordovaを使って作ったiPad向けのアプリはがっつりお仕事としてのものでしたし、最近はMonacaを使うことが多いかなという感じ。
最初はネイティブアプリで、徐々にWeb開発技術ベースのものに移ってきたわけですが、ここにきてFlutterが良いという話が気になっていました。FlutterはGoogle製でオープンソースのモバイルアプリケーションフレームワークで、1つのコードで複数のプラットフォーム向けのアプリケーションを同時に開発できます。ネイティブ並みのパフォーマンスという話です。AndroidとiOSだけでなく、WindowsやLinuxのデスクトップアプリ、HTMLとJavaScriptとして出力してWebアプリとして動作させることもできるというオールマイティなビルド機能も魅力的。
開発に用いるプログラミング言語がDartというGoogle独自のものであるというのが気になったのですが、実際に書いてみると、ほとんど違和感はありません。そこそこモダンなJavaScriptを書いた経験のある人なら、特に勉強することなく対応できるのではないかと思います。
1日でここまで作れた！
長らく弊社の焼くッチャ君のアプリをリファインしたいと思っていたので、昨日の朝から使用する技術の選定を始め、最初はXamarinでもやってみるかなぁと思っていたもののオワコン的な話もいくつか見かけて、ちょっと耳にしていたFlutterで行こうと決めたのが正午過ぎ。それから、Let’snote QVへの環境構築と、こちらのnoteにあった教材を活用させていただき、1時間半。
その後、晩御飯までの間に、ここまで。
表示しているデータは、AWS RDS上にあるデータを、IBM Cloud Functionsに置いてあるPHPで書いた関数を実行して引っ張ってきています。ちゃんと、取得するデータを選択したり、最新データを定期的に読み取って画面を更新する機能も作りました。
さらに、晩御飯の後にもう少しやって、昨日のうちにここまでできました。
このグラフは、Charts-FlutterというFlutterのライブラリを活用して表示しています。ライブラリへのデータの渡し方に少し苦戦しましたが、分かってしまえば結構簡単。こうしたライブラリがいろいろと揃っているようなので、その辺も面白そうです。
VS Codeの開発環境が素晴らしい！
上記のサイトにあるWindows用の環境構築方法では、Android Studioを使って開発作業を行うことになっていますが、私は普段から愛用しているVS Codeを使用することにしました。（その場合でもAndroid Studioのインストールは必要です。Androidシミュレータを使って動作確認を行いますので。）
VS Codeには、Flutter用のエクステンションが準備されています。これをインストールすると、かなり充実した開発環境が出来上がります。（初回使用時にDartのエクステンションもインストールされます。）
VS Codeのデバッグ実行でAndroidシミュレータが立ち上がってアプリが実行されますし（当たり前ですが…）、コードを書き換えて保存するとホットリロードも行われます。画面に関するコードを書き換えると、きちんとAndroidシミュレータ側に反映されるので、最初にその様子を見ると少し感動します。もちろん、かなり便利です。
また、Flutterでは必要なライブラリをpubspec.yamlというファイルに書くのですが、これもVS Code上で編集して保存すると、自動的にライブラリのインストールが行われます。これもとても便利。
ここまで充実した開発環境がすべて無料で作れるというのが、すごい時代だなぁと感じさせます。
モダンなコード
Cordovaでは基本的に画面はHTMLで、ロジックはJavaScriptでという切り分けがあって、双方を行ったり来たりしながら開発を進めていきます。それはそれで、コードが直感的に理解しやすかったりはするのですが、HTMLとJavaScriptの両方を書くのはちょっと冗長な感じがして、少し古臭い印象がありました。
Flutterは、画面もロジックもどちらもDart言語で同じファイルに書きます。それぞれの画面をクラスとして定義し、そのメソッドとして画面の組み立てを書いていきます。モダンなJavaScriptで使うVueやReactなどと同様にデータを書き換えると、自動的に画面も書き換わります。
データの変更をチェックして、画面の書き換え処理を書くというような手続き型のコードは不要で、データの内容に応じてどのような画面を表示するかという宣言型のコードを書いておけば、あとはデータが変われば自動的に画面表示も変わります。モダンですね。
画面表示用の部品はWidgetと呼ばれており、テキストやチャートの表示から、それぞれのWidgetの組み合わせといったものまで、すべてがWidgetであり、それをDart言語で書いていきます。HTMLとJavaScriptのような頭の切り替えが不要なのは、すごく楽です。
まとめ
Flutterには昨日入門したばかりなので、まだ見えてないことも多いと思うのですが、その初日にこれだけのものが作れたというのは、開発効率としては抜群に良いと言えるのではないかと思います。
お仕事としてCordovaで作ったアプリもいくつかありますので、今後はFlutterに移行していこうかと思っています。そう思わせるに充分なツールといえます。