アプリ開発の新たな選択肢が登場！Google社製Flutterのご紹介

2019年6月25日（火）開催のアシアル技術セミナーでの発表資料

Transcript

1. アプリ開発の新たな選択肢が登場！ Google社製Flutterのご紹介 HIROAKI TSUTSUMI 堤 啓彰 <tsutsumi@asial.co.jp> アシアル株式会社
2. 堤 啓彰 Tsutsumi Hiroaki エンジニア（主にフロントエンド） 業務で使ったことのある⾔語：JavaScript PHP C# 多少は書ける⾔語：Java Swift ここ１年ほどは、Cordovaでのアプリ開発 ※ Flutterを業務で使った経験はなし
3. Flutterとは Cordova/Flutterの⽐較 Dartとは Flutterの基礎 まとめ TODAY’s AGENDA
4. Flutterとは Cordova/Flutterの⽐較 Dartとは Flutterの基礎 まとめ TODAY’s AGENDA
5. Flutterとは Google製の、Android/iOS向けのモバイルアプリを 開発できるクロスプラットフォーム開発ツール 2018年12⽉4⽇、バージョン1.0が正式リリース - 現時点での最新版はバージョン1.5.4 Githubでのスター数は67,000超え
6. Flutterとは ＞ Githubスター数の推移 2018年2⽉27⽇、β版公開
7. Flutterとは ＞ モバイルアプリだけではないFlutter Flutter for web Flutterのコードからブラウザで実⾏可能な Webアプリケーションを⽣成する技術 - 現在テクニカルプレビュー
8. Flutterとは ＞ モバイルアプリだけではないFlutter Desktop Embedding for Flutter Flutterのコードからデスクトップアプリケーション （Windows/MacOS/Linux）を⽣成する技術 - 現在開発中
9. Flutterとは ＞ モバイルアプリだけではないFlutter Flutterを習得すれば、Android/iOSに加えて、 Web/デスクトップアプリケーションも 作れるように
10. Flutterとは Cordova/Flutterの⽐較 Dartとは Flutterの基礎 まとめ TODAY’s AGENDA
11. Cordova/Flutterの⽐較 Cordova Flutter 開発⾔語 HTML/CSS/JavaScript Dart レンダリング WebView ネイティブ ホットリロード 不可 可
12. Cordova/Flutterの⽐較 ＞ レンダリング：Cordova OS（Android/iOS） WebView UI UIはWebViewにより レンダリング ネイティブアプリよりも、 低パフォーマンス
13. Cordova/Flutterの⽐較 ＞ レンダリング：Flutter OS（Android/iOS） UI UIはネイティブで レンダリング ネイティブアプリと 遜⾊ないパフォーマンス
14. Cordova/Flutterの⽐較 ＞ ホットリロード ホットリロード ソースコードの変更を、 アプリを再ビルドせず、状態を維持したまま反映 - 修正が（基本的に）1秒未満で反映 - フルリロードしても10秒程度 Cordovaでは現状できない（ブラウザでは可能）
15. Cordova/Flutterの⽐較 ＞ ホットリロード Demo
16. Cordova/Flutterの⽐較 Flutterを使えば、ハイパフォーマンスな アプリを、ホットリロードを⽤いて ⾼速に開発可能
17. Flutterとは Cordova/Flutterの⽐較 Dartとは Flutterの基礎 まとめ TODAY’s AGENDA
18. Dartとは ＞ Dartの歴史 Googleによりリリース - JavaScriptを代替することが⽬的 - ブラウザへのDartVMの搭載が⽬標 2011
19. Dartとは ＞ Dartの歴史 Googleによりリリース - JavaScriptを代替することが⽬的 - ブラウザへのDartVMの搭載が⽬標 ブラウザへのDartVMの搭載を断念 2011 2015
20. Dartとは ＞ Dartの歴史 Googleによりリリース - JavaScriptを代替することが⽬的 - ブラウザへのDartVMの搭載が⽬標 ブラウザへのDartVMの搭載を断念 Googleのフロントエンド開発の標準⾔語としてTypeScriptが採⽤ 2011 2015 2017
21. Dartとは ＞ Dartの歴史 Googleによりリリース - JavaScriptを代替することが⽬的 - ブラウザへのDartVMの搭載が⽬標 2011 2015 ブラウザへのDartVMの搭載を断念 2017 Googleのフロントエンド開発の標準⾔語としてTypeScriptが採⽤ 現在 Flutterの普及とともに、再び注⽬を集める
22. Dartとは ＞ Dartの特徴 Dartの特徴 • オブジェクト指向 • 静的型付け
23. Dartとは ＞ サンプルコード class Person { String _firstName; String _lastName; Person(this._firstName, this._lastName); String getFullName() { return '$_lastName $_firstName'; } } void main() { Person person = Person('Hiroaki', 'Tsutsumi'); print(person.getFullName()); }
24. Dartとは ＞ Dartを使ってみた所感 所感 • くせがなく、書きやすい • オブジェクト指向を理解していれば、習得は⽤意 • Javaによく似ており、Javaを触ったことがあれば すぐ馴染める
25. Dartとは ＞ カスケード記法 カスケード記法 • 同⼀オブジェクトに対する操作を、 戻り値がなくても連続して記述できる記法 • 「..」（ドット２つ）で操作を連結して記述
26. Dartとは ＞ カスケード記法 var button = querySelector('#confirm'); button.text = 'Confirm'; button.classes.add('important'); button.onClick.listen((e) => window.alert('Confirmed!')); カスケード記法なし
27. Dartとは ＞ カスケード記法 var button = querySelector('#confirm'); button.text = 'Confirm'; button.classes.add('important'); button.onClick.listen((e) => window.alert('Confirmed!')); カスケード記法なし querySelector('#confirm') ..text = 'Confirm' ..classes.add('important') ..onClick.listen((e) => window.alert('Confirmed!')); カスケード記法あり
28. Dartとは ＞ なぜDartが採⽤されたのか Dartはコンパイル⽅式として、JIT（Just In Time）と AOT（Ahead Of Time）の両⽅をサポート - JIT：コンパイル速・パフォーマンス低 - AOT：コンパイル遅・パフォーマンス⾼
29. Dartとは ＞ なぜDartが採⽤されたのか Dartはコンパイル⽅式として、JIT（Just In Time）と AOT（Ahead Of Time）の両⽅をサポート - JIT：コンパイル速・パフォーマンス低 - AOT：コンパイル遅・パフォーマンス⾼ 開発時はJITによる開発サイクルの⾼速化 プロダクションではAOTによるパフォーマンス向上 その他にもいくつかの理由があり、詳細は https://flutter.dev/docs/resources/faq#why-did-flutter-choose-to-use-dart （英語）を参照
30. Flutterとは Cordova/Flutterの⽐較 Dartとは Flutterの基礎 まとめ TODAY’s AGENDA
31. Flutterの基礎 すべてがWidget
32. Flutterの基礎 ＞ すべてがWidget FlutterアプリのUIは、Widgetの組み合わせ Widgetの中に⼊れ⼦でWidgetを追加して、 Widget Treeを構成していくことでUIを構築
33. Flutterの基礎 ＞ すべてがWidget @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('TODOリ スト')), body: Column( children: <Widget>[...], ), ); }
34. Flutterの基礎 ＞ すべてがWidget @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('TODOリ スト')), body: Column( children: <Widget>[...], ), ); }
35. @override Widget build(BuildContext context) { return Scaffold( ..., body: Column( children: <Widget>[ Row( children: <Widget>[...], ), Expanded( child: ListView.builder(...), ), ], ), ); } Flutterの基礎 ＞ すべてがWidget
36. @override Widget build(BuildContext context) { ..., body: Column( children: <Widget>[ Row( children: <Widget>[ Flexible( child: TextField(...), ), Padding(padding: EdgeInsets.only(right: 10.0)), RaisedButton(...), ], ), ..., Flutterの基礎 ＞ すべてがWidget
37. Flutterの基礎 ＞ 豊富なWidget Flutterは標準で⼤量のWidgetを提供 https://flutter.dev/docs/development/ui/widgets
38. Flutterの基礎 ＞ 豊富なWidget：マテリアルデザイン https://flutter.dev/docs/development/ui/widgets/material
39. Flutterの基礎 ＞ 豊富なWidget：Cupertino https://flutter.dev/docs/development/ui/widgets/cupertino
40. Flutterの基礎 ＞ 豊富なWidget どのようなWidgetがあり、 そのWidgetで何ができるのかを 把握することが重要
41. Flutterの基礎 StatelessとStateful
42. Flutterの基礎 ＞ StatelessとStateful Statelessは状態を持たないWidget Statefulは状態を持つWidget 外部との通信やユーザの操作により 状態が変化しないWidgetはStatelessに 状態が変化するWidgetはStatefulに
43. Flutterの基礎 ＞ Statelessの例 各タスクはStateless • 渡された⽂字列を表⽰しているだけ • ユーザの操作により、 保持している情報は変化しないため
44. Flutterの基礎 ＞ StatelessWidget class TodoListItem extends StatelessWidget { final int _index; final String _todo; final Function _removeTodo; TodoListItem(this._index, this._todo, this._removeTodo); @override Widget build(BuildContext context) { return Card( child: ListTile( title: Text(_todo), trailing: IconButton( icon: Icon(Icons.remove_circle, color: Colors.red), onPressed: () => _removeTodo(_index), ), ..., }
45. Flutterの基礎 ＞ StatelessWidget class TodoListItem extends StatelessWidget { final int _index; final String _todo; final Function _removeTodo; TodoListItem(this._index, this._todo, this._removeTodo); @override Widget build(BuildContext context) { return Card( child: ListTile( title: Text(_todo), trailing: IconButton( icon: Icon(Icons.remove_circle, color: Colors.red), onPressed: () => _removeTodo(_index), ), ..., } StatelessWidgetを継承
46. Flutterの基礎 ＞ StatelessWidget class TodoListItem extends StatelessWidget { final int _index; final String _todo; final Function _removeTodo; TodoListItem(this._index, this._todo, this._removeTodo); @override Widget build(BuildContext context) { return Card( child: ListTile( title: Text(_todo), trailing: IconButton( icon: Icon(Icons.remove_circle, color: Colors.red), onPressed: () => _removeTodo(_index), ), ..., } buildメソッドをoverride
47. Flutterの基礎 ＞ 状態変化の例
48. Flutterの基礎 ＞ 状態変化の例
49. Flutterの基礎 ＞ StatefulWidget final _todos = <String>[]; ... @override Widget build(BuildContext context) { return Scaffold( ..., RaisedButton( ..., onPressed: () => setState(() => _todos.add(_todo)), ), ], ), ... child: ListView.builder( itemCount: _todos.length, itemBuilder: (BuildContext context, int index) => TodoListItem(index, _todos[index], _removeTodo), ), ...
50. Flutterの基礎 ＞ StatefulWidget final _todos = <String>[]; ... @override Widget build(BuildContext context) { return Scaffold( ..., RaisedButton( ..., onPressed: () => setState(() => _todos.add(_todo)), ), ], ), ... child: ListView.builder( itemCount: _todos.length, itemBuilder: (BuildContext context, int index) => TodoListItem(index, _todos[index], _removeTodo), ), ... State（状態）を定義
51. Flutterの基礎 ＞ StatefulWidget final _todos = <String>[]; ... @override Widget build(BuildContext context) { return Scaffold( ..., RaisedButton( ..., onPressed: () => setState(() => _todos.add(_todo)), ), ], ), ... child: ListView.builder( itemCount: _todos.length, itemBuilder: (BuildContext context, int index) => TodoListItem(index, _todos[index], _removeTodo), ), ... Stateを更新（タスクを追加）
52. Flutterの基礎 ＞ StatefulWidget final _todos = <String>[]; ... @override Widget build(BuildContext context) { return Scaffold( ..., RaisedButton( ..., onPressed: () => setState(() => _todos.add(_todo)), ), ], ), ... child: ListView.builder( itemCount: _todos.length, itemBuilder: (BuildContext context, int index) => TodoListItem(index, _todos[index], _removeTodo), ), ... Stateの更新を検知し、buildが呼ばれる
53. Flutterの基礎 ＞ StatefulWidget final _todos = <String>[]; ... @override Widget build(BuildContext context) { return Scaffold( ..., RaisedButton( ..., onPressed: () => setState(() => _todos.add(_todo)), ), ], ), ... child: ListView.builder( itemCount: _todos.length, itemBuilder: (BuildContext context, int index) => TodoListItem(index, _todos[index], _removeTodo), ), ... State（タスク⼀覧）が変化しているため、 ListViewが更新される
54. Flutterの基礎 Flutterでのアニメーション
55. Flutterの基礎 ＞ Flutterでのアニメーション Flutterでは、アニメーションもWidget アニメーションに関しても、豊富なWidgetを提供 もちろん、⾃作も可能
56. Flutterの基礎 ＞ アニメーション例：Opacity
57. Flutterの基礎 ＞ アニメーション例：Opacity bool _visible = true; @override Widget build(BuildContext context) { ... body: Center( child: AnimatedOpacity( opacity: _visible ? 1.0 : 0.0, duration: Duration(seconds: 1), child: Container(width: 200.0, height: 200.0, color: Colors.blue), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.flip), onPressed: () => setState(() => _visible = !_visible), ),
58. Flutterの基礎 ＞ アニメーション例：Opacity bool _visible = true; @override Widget build(BuildContext context) { ... body: Center( child: AnimatedOpacity( opacity: _visible ? 1.0 : 0.0, duration: Duration(seconds: 1), child: Container(width: 200.0, height: 200.0, color: Colors.blue), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.flip), onPressed: () => setState(() => _visible = !_visible), ),
59. Flutterの基礎 ＞ アニメーション例：Opacity bool _visible = true; @override Widget build(BuildContext context) { ... body: Center( child: AnimatedOpacity( opacity: _visible ? 1.0 : 0.0, duration: Duration(seconds: 1), child: Container(width: 200.0, height: 200.0, color: Colors.blue), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.flip), onPressed: () => setState(() => _visible = !_visible), ), Stateを定義
60. Flutterの基礎 ＞ アニメーション例：Opacity bool _visible = true; @override Widget build(BuildContext context) { ... body: Center( child: AnimatedOpacity( opacity: _visible ? 1.0 : 0.0, duration: Duration(seconds: 1), child: Container(width: 200.0, height: 200.0, color: Colors.blue), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.flip), onPressed: () => setState(() => _visible = !_visible), ), Stateを更新
61. Flutterの基礎 ＞ アニメーション例：Opacity bool _visible = true; @override Widget build(BuildContext context) { ... body: Center( child: AnimatedOpacity( opacity: _visible ? 1.0 : 0.0, duration: Duration(seconds: 1), child: Container(width: 200.0, height: 200.0, color: Colors.blue), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.flip), onPressed: () => setState(() => _visible = !_visible), ), Stateの変更を検知し、buildが呼ばれる
62. Flutterの基礎 ＞ アニメーション例：Opacity bool _visible = true; @override Widget build(BuildContext context) { ... body: Center( child: AnimatedOpacity( opacity: _visible ? 1.0 : 0.0, duration: Duration(seconds: 1), child: Container(width: 200.0, height: 200.0, color: Colors.blue), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.flip), onPressed: () => setState(() => _visible = !_visible), ), Opacityの変更に応じて、 アニメーション
63. Flutterの基礎 ＞ アニメーション例：Container
64. Flutterの基礎 ＞ アニメーション例：Container double _width = 100; double _height = 100; Color _color = Colors.blue; @override Widget build(BuildContext context) { ... child: AnimatedContainer( width: _width, height: _height, decoration: BoxDecoration(color: _color), duration: Duration(seconds: 1), curve: Curves.easeInOut, ), ... onPressed: () { setState(() { final random = Random(); _width = random.nextInt(300).toDouble(); _height = random.nextInt(300).toDouble(); _color = Color.fromRGBO(random.nextInt(256), random.nextInt(256), random.nextInt(256), 1); });
65. Flutterの基礎 ＞ アニメーション例：Container double _width = 100; double _height = 100; Color _color = Colors.blue; @override Widget build(BuildContext context) { ... child: AnimatedContainer( width: _width, height: _height, decoration: BoxDecoration(color: _color), duration: Duration(seconds: 1), curve: Curves.easeInOut, ), ... onPressed: () { setState(() { final random = Random(); _width = random.nextInt(300).toDouble(); _height = random.nextInt(300).toDouble(); _color = Color.fromRGBO(random.nextInt(256), random.nextInt(256), random.nextInt(256), 1); }); Stateを定義
66. Flutterの基礎 ＞ アニメーション例：Container double _width = 100; double _height = 100; Color _color = Colors.blue; @override Widget build(BuildContext context) { ... child: AnimatedContainer( width: _width, height: _height, decoration: BoxDecoration(color: _color), duration: Duration(seconds: 1), curve: Curves.easeInOut, ), ... onPressed: () { setState(() { final random = Random(); _width = random.nextInt(300).toDouble(); _height = random.nextInt(300).toDouble(); _color = Color.fromRGBO(random.nextInt(256), random.nextInt(256), random.nextInt(256), 1); }); Stateを更新
67. Flutterの基礎 ＞ アニメーション例：Container double _width = 100; double _height = 100; Color _color = Colors.blue; @override Widget build(BuildContext context) { ... child: AnimatedContainer( width: _width, height: _height, decoration: BoxDecoration(color: _color), duration: Duration(seconds: 1), curve: Curves.easeInOut, ), ... onPressed: () { setState(() { final random = Random(); _width = random.nextInt(300).toDouble(); _height = random.nextInt(300).toDouble(); _color = Color.fromRGBO(random.nextInt(256), random.nextInt(256), random.nextInt(256), 1); }); Stateの変更を検知し、buildが呼ばれる
68. Flutterの基礎 ＞ アニメーション例：Container double _width = 100; double _height = 100; Color _color = Colors.blue; @override Widget build(BuildContext context) { ... child: AnimatedContainer( width: _width, height: _height, decoration: BoxDecoration(color: _color), duration: Duration(seconds: 1), curve: Curves.easeInOut, ), ... onPressed: () { setState(() { final random = Random(); _width = random.nextInt(300).toDouble(); _height = random.nextInt(300).toDouble(); _color = Color.fromRGBO(random.nextInt(256), random.nextInt(256), random.nextInt(256), 1); }); 各Stateの変更に応じて、 アニメーション
69. Flutterとは Cordova/Flutterの⽐較 Dartとは Flutterの基礎 まとめ TODAY’s AGENDA
70. まとめ メリット・デメリット l 学習コストは低くはない l Dart⾃体は馴染みやすい l Widgetを使いこなすのが⼤変 l ⽇本語の情報はまだ少ない l ネイティブアプリに近い パフォーマンス l ホットリロードによる ⾼速な開発サイクル