美しいUI、高い開発効率、Dart言語…　クロスプラットフォームFlutter

自己紹介とセッションのアジェンダ

神原健一氏（以下、神原）：それでは本日「Flutterアプリ開発スタートアップ with Tips」ということで発表します。

最初に自己紹介をします。私は神原と言います。ふだんはNTTテクノクロスという会社で、エバンジェリストとして活動しています。モバイルアプリ開発が昔からけっこう好きで、Androidもバージョン1.0が出る前から触っています。仕事だけでなくプライベートでもアプリを作ったり、あとは本を書いたりなども実施しています。

本日の講演資料については、Twitterアカウント（@korodroid）で公開するので、フォローしてもらえると幸いです。

これは完全に余談ですが、例えばリアルタイムの翻訳電話のアプリやToDo管理のアプリなど、自分でFlutterを使って作って、マーケットで公開もしています。

それでは本日のアジェンダです。まず、Flutterとはどういったものかという概要を伝えて、その次にFlutterの始め方、実際にアプリを作るときにはどう始めたらいいのかを紹介します。そしてFlutterアプリの開発Tipsということで、より効率的な開発を進めていくためにどうするべきかを紹介していきます。

Flutterの概要

ではFlutterの概要です。Flutterについては聞いたことがある方も多くいるかと思いますが、ちょっと改めて簡単に紹介します。共通のソースコードで、iOS/Androidなどに向けたアプリを開発できるSDK（Software Development Kit）、いわゆるクロスプラットフォームの開発ツールと呼ばれています。

実はモバイルだけじゃなくて、デスクトップやWeb向けなどにもアプリケーションをエクスポートできるプロジェクトも今進行しています。それぞれα版やβ版のステータスではありますが、今後はモバイルだけでなく、Flutterの世界がいろいろなところに広がっていきそう、といったところが僕自身も非常に興味を持って取り組んでいます。

Flutterの3つの特徴

Flutterの特徴をいくつか紹介していきます。非常に多くの特徴がありますが、今回はその中でも代表的なものを3つ、順番に紹介していきます。

1つ目が、美しいUI、高い実行性能です。Flutterは、iOS/Android向けの自前のUIを持っています。自前のUIというのはどういうことかというと、iOSやAndroidが持っている、GUIコンポーネントのいわゆるラッパーではなくて、オリジナルのUIをFlutterの中で持っています。

そのため、描画も非常に高速ですし、使っていてもっさりすることなく、ユーザーがさくさくアプリを使っていけるところが、大きな特徴かなと思います。flutter.devというサイトで、実際に会社のアプリでFlutterが使われている例も紹介されています。

続いて伝えたいのは、高い開発効率です。こちらは実際にFlutterのアプリのソースコードをいじっては、エミュレータでその内容が反映されているシーンです。ソースコードを編集しては、けっこうリアルタイムにエミュレータにその内容が反映されていくところ見られると思います。

従来のネイティブモバイルアプリだと、アプリのソースコードを編集してはエミュレータに転送して動作確認するライフサイクルが、どうしても長めになりがちでした。しかし、そういったところがFlutterだとホットリロードの機能が備わっていて、サクサクと動作確認できるところが、僕自身も開発をしていて、良いなと思っているポイントになります。

続いて、言語のDartを紹介します。こちらは「こんにちは、Flutter」と出ている画面を、Flutterのソースコードで書くとどうなるのかを出しています。こちらはDartという言語で書いています。

JavaやJavaScript、Kotlinなど、プログラミングの経験を持っている方であれば、なんとなく「この画面を作るにはこんなコードを書くんだ」というのが雰囲気で読んでもらえるんじゃないかなと思います。あとで紹介しますが、Flutterでアプリを作るときには、UIを作っていくところもDartで書いていくのがけっこう特徴だったりします。詳細は後ほど紹介します。こんな感じで、Flutterには3つの大きな特徴があります。

Flutterでアプリを作るなら具体的にどうする？

ではFlutterを使ってアプリを作っていこうと思ったら、具体的にどうしたらいいかを紹介します。まず開発環境の話をしたいと思います。大きく分けるとIDE（Integrated Drive Electronics）、統合開発環境を使う方法と、使わない方法があります。使う場合だと、もしかしたらふだん使われているかもしれないAndroid StudioやVisual Studio Code、IntelliJ IDEAなどの開発環境を使っていくことになります。

それぞれ特徴はありますが、Flutterを始めたいとき、もし使い慣れたものがこの中にあれば、まずそれからスタートするのがいいかと思います。ただIDEを使わない方法もいくつかあり、あとで紹介するFlutter Studio、あとはDartPadというツールを使うことで、Flutterアプリ開発がどういうものか、直感的につかむことも可能になっています。

これは実は実践的なものではありませんが、まずはFlutterがどんなものかの感覚をつかむには非常におすすめの方法です。あとは自分の好きなテキストエディタを使って、コマンドラインベースでビルドしていく。そういった開発スタイルを取ることも可能になります。

IDEを使わない開発と、使う開発

それでは、もう少し具体的なところを紹介します。まずIDEを使わない場合はどんな感じでやるかを紹介します。今回はFlutter Studio。

（動画開始）

これ実はWebブラウザで部品が動いているんですが、ブラウザを開くと、ドラッグ＆ドロップでモバイルの画面を作っていけます。

例えば、アイコンやテキストコンポーネントをポチポチ配置していきます。今回はアイコン2つと、テキストフィールドを配置しました。すべてブラウザの中で動いていますが、テキストの名前を編集をしていくと、もうなんとなく画面が作っていける。

アイコンも一覧の中からポチッと変更して、色も変えると、なんとなく画面っぽくなってきました。今回のモバイル画面に関しては、例えばProfileにします。すごいところが、作った画面のソースコードがブラウザの中で吐き出されます。このソースコードは、インポートして開発環境に持っていくことも、実はできるようになっています。Flutter Studioは実は非公式のツールではありますが、このように、けっこうよくできています。

（動画終わり）

（動画開始）

「これで画面を作ったあとはどうするんだっけ」というところで次に紹介したいのが、DartPadです。このDartPadも、サイトに飛ぶと、ブラウザの中でDartのソースコードを書いて実行して、その結果もブラウザの中で確認できる、非常に便利なツールになっています。

先ほど作ったソースコードを貼り付けてRUNを押すと、右側にモバイルの画面が出てきて、動作確認までできてしまう。簡単なFlutterのアプリなどであれば、動作確認して動かしていくこともできるようになっています。

（動画終わり）

IDEを利用する方法はいろいろありますが、公式サイトやさまざまなエンジニアの方が、いろいろなところで情報発信をしているので、今回はがっつり省略したいと思います。

（次回につづく）