Flutterで生み出せ圧倒的成果💪 -高専カンファ in Tokyo 2018 LT発表文字起こし-

 2018年7月15日に「Flutterで生み出せ圧倒的成果💪 -クロスプラットフォーム開発の未来-」というタイトルでLT発表をしてきました。タイトルの通り、Flutterのよさを発表した訳ですが、5分という時間の都合上本来資料に載せるべき内容をいくつか削らざるをえなかったので、発表内容の文字起こしといくつかの補足をこの記事に残しておこうと思います。

発表資料

Flutterとは?

  • クロスプラットフォームに対応した、モバイルアプリ開発用のSDK
  • 開発: Google
  • 言語: Dart
  • リリース: 2015年α版公開 – 2018年2月β版公開 – 2018年6月「Preview Release 1」公開
  • Github Repository: flutter/flutter

 Dartを使い、1プロジェクトでAndroid/iOS両プラットフォームに対応したアプリ開発ができるSDKです。β版公開から急速に人気を集めており、Github Star数は2018年7月現在3万超、Google I/Oのセッション数も1年で3倍(2017で2セッション、2018で6セッション)に増加しており、正式リリースに向け着実に成長を続けています。

特長

 Googleの公式サイトには、「Build beautiful native apps in record time」(直訳: 記録的な速度で美麗なアプリを開発)とありますが、正に謳い文句通りの特長をFlutterはいくつも備えています。

 中でも特筆すべきモノに

  • 豊富なUIライブラリの公式提供
  • Hot Reloading機能
  • 環境構築が容易

の3点が挙げられます。順に解説していきます。

1. 豊富なUIライブラリの公式提供

 Flutterでは、ボタン・テキストボックス・リストビュー等のアプリのUI要素全てを「ウィジェット」という単位で扱います。以下がカウンタアプリのサンプルコードとアプリUIになります。

 UI要素とウィジェットの対応はそれぞれ

  • アプリの雛形: Scaffold
  • ツールバー: AppBar
  • テキストボックス: Text
  • 丸ボタン: FloatingActionButton

となっています。

 また、「アイコン」「余白」「縦に並べる」「センタリング」といった制約も同じくウィジェットとして扱います。サンプルコードには

  • センタリング: Center
  • 縦に並べる: Column
  • アイコン: Icon

というウィジェットが使われています。

 Flutterでは、このウィジェットの種類が非常に豊富です。特に、Material Design準拠のUI要素がほぼ全てカスタマイズ要らずで利用できることが大きな強みです。Material Designに沿ったアプリであれば爆速で、なおかつ1プロジェクトでiOSアプリまで作れてしまうため、市場調査のためのプロトタイプや小規模アプリの製作では絶大な成果を得られるでしょう。

 もちろんMaterial Designだけでなく、iOSスタイルのウィジェットもいくつか用意されています。利用できるウィジェットをいくつ知っているかがFlutterでの開発を進める上でキモになる部分なので、公式のWidget Catalogを必要な時に参照するといいと思います。

2. Hot Reloading機能

 Flutterは、「Hot Reloading」というコード上の変更をエミュレータ・実機に瞬時に反映させる機能を標準で利用することができます。

 上記のデモ動画では、「文字列の書き換え→保存」「テキストボックスの追加→保存」、併せて2回の変更を行っていますが、保存から数秒でエミュレータに変更が反映されていることが確認できます。デモ動画ではエミュレータですが、Android/iOSの実機でもしっかり使えることも確認済みです。Hot Reloadingを使えば、長年クライアントアプリ開発者を悩ませてきたビルド時間の虚無から解放されます。
 特にこの機能は、「文字を少し大きくしたい」「ボタンの色を変えたい」といった、ちょっとしたUIの変更時に効力を発揮します。アプリの見た目を実機で瞬時に確認しつつ作業を進められ、ストレスフリーな開発を実現できることは間違いないと思います。

3. 環境構築が容易

 新しいフレームワーク・SDKの導入時、多くの開発者がつまづく開発環境の構築作業も驚くほど簡単です。詳しくは公式サイトのドキュメントに譲りますが、Windows/MacOS/Linuxいずれの場合も

  • SDKをzipでダウンロード
  • 対話形式のコマンド「flutter doctor」で、必要なライブラリ・パッケージのインストール、設定コマンドの実行

の2項目をこなすだけで終了です。flutter doctorを実行し、表示された指示通りにインストールor設定コマンドを走らせるだけですぐに使えるようになります。

 また、IDE/エディタのサポートとしてIntelliJ IDE・Android Studioの他、VSCodeが公式でサポートされていることも特長の1つです。Flutterのために専用のIDEをセットアップする必要が少なく、使い慣れた環境で開発をはじめやすいと言えます。

Ex. その他欲しいモノ

 Flutterでは、DartのOSSライブラリを利用できるため、アプリ開発に必要な最低限のことはほぼ対応できます。

 更に、FlutterはAndroid/iOSの標準APIを呼び出せるため、それぞれのプラットフォームに依存した処理(バッテリー残量値の取得等)も実行することができます(参考URL: flutter.io/platform-channels)。

他のクロスプラットフォーム対応フレームワークとの比較

 有名どころだと、Xamarin.FormsとReactNativeが競合と言えます。それぞれ長所・短所を挙げ、比較します。

Xamarin.Forms

※Xamarin.Android/Xamarin.iOSは、UI部分の記述が共通化できないため、比較対象から外します。

開発元: Xamarin(Microsoft子会社)
使用言語: C#

メリット

  • Windowsのデスクトップアプリを製作できる

デメリット

  • Visual Studioの導入が必須(VSCodeでもOKだったら誰かマサカリ投げて)
  • 日本語情報が少ない

 僕自身、XamarinでAndroidのアプリを試しに製作したことがありますが、「C#に慣れている」「Windowsアプリの製作経験がある」といったバックボーンがない場合、無理してまで使うメリットを殆ど感じませんでした。中でも個人的に1番ネックだったのは、IDEと使用言語がどちらも初めて触るモノだったことです。IDE・言語の同時にキャッチアップは、想像以上に体力と時間を使います。
 あと完全に私怨ですが、MSのドキュメントめっちゃ読みづらいので嫌いです(´・ω・`)

ReactNative

開発元: Facebook
使用言語: JavaScript

メリット

  • 使い慣れたエディタ+コマンドラインで開発できる
  • OSSライブラリの資産が豊富

デメリット

  • UIコンポーネントを自分で探す必要がある

 最大のデメリットが、UIコンポーネントのOSSライブラリへの依存度が大きいことです。そのため、使いやすいライブラリを自分で探し、もし探し当てたライブラリの開発が終了してしまったら別のライブラリへ移行、または自作するといった事象が発生しやすいと言えます。
 Webフロントエンドの世界で、日頃からJSでコードを書いている開発者がアプリを作りたい時には大いに選択肢に入ると思います。ですが、基本的なUIコンポーネントくらいは公式サポートが欲しい気持ちが強いです。

実際作ったモノ

 実際にFlutterを使い、「アイマスの公式Twitterアカウントをタイトル毎に眺めるアプリ」を製作しました。

Github Repository: https://github.com/subroh0508/imas_twitter_client

動作デモ

所感

 Dartの知識ゼロからはじめて、製作期間は2日でした。Mapの扱いとTwitterクライアントのライブラリで少しハマりましたが、1アプリ作ってしまえばDartそのものは何となく書けるようになると思います。慣れない言語とフレームワークに詰まって溜まったストレスは、AndroidとiOSで同時に動く成果物を見れば一瞬で吹き飛びます。普段の2倍の成果を上げたことが目に見えるので、お世辞抜きで最初の達成感は大きかったです。

 UIの初期化・更新はそれぞれinitState/setStateという関数が用意されており、この2つの関数が使えればとりあえず動くモノは作れます。更にここからより複雑なアプリを作るためには、標準で使えるウィジェットをたくさん知ることがやはり1番の近道かなと感じました。あと、Viewとロジックが密結合になりがちなので、ロジック部分を別クラスに分けるよう意識する、余裕があればMVVMやFlux等のアーキテクチャを導入すると大規模なアプリに成長しても安心かなと思いました。

感想

 iOSのシェアが高い日本でAndroidエンジニアしている身としては、かなりインパクトの大きな技術だと感じています。豊富なウィジェットとHot Reloadが使えるおかげで、アプリ開発の敷居がまた1つ下がったなと思えるくらいなので、ぜひ多くの人に体験してもらいたいと思います。

参考リンク

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です