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

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 ホットリロードによる ⾼速な開発サイクル
71. None