Flutterでアプリ作ってる話

社内のテックトークで話しました

スライド内のリンク
Sample Code | Dart
https://www.dartlang.org/samples/
Fluttter Material Components Widgets
https://flutter.io/widgets/material/
React Native Version
https://github.com/suusan2go/familog-api-deprecated
Golang API
https://github.com/suusan2go/familog-app-deprecated

Transcript

1. Flutterでアプリ作った 作ってる話 Making My First Flutter App 2018 / 4/ 6 M3 TechTalk @suusan2go
2. 自己紹介 • Kenta Suzuki / @suusan2go • M3,inc / Software Engineer • 経験値で言うとこんな感じ ◦ Ruby > JavaScript > Kotlin(ServerSide) > Golang • どちらかと言えばサーバーサイドエンジニアです！ • 最近のお気に入り映画は「バーフバリ 王の凱旋」です
3. What is Flutter ? • Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. • Dartで動く
4. Whit is Dart ? • Googleが開発しているWeb向けのプログラミング言語 • もともとはJavaScriptの代替として開発されていたが、2015 年にはChromeへの組み込みを断念 • 更に2017年にはGoogleの社内標準言語にTypeScriptが選 ばれてしまう
5. Is Dart Dead ? • 実はAdwards / Adsenceのバックエンド / フロントエンドはDartで書 かれているらしい(バックエンドは何かで聞いただけなのでガセか も) ◦ The new AdWords UI uses Dart — we asked why • 「Announcing Dart 2: Optimized for Client-Side Development」 で、Dartをクライアントサイドのプログラミング言語として再起動し てくぜ！とDartのプロダクトマネージャーが宣言 • Dart is not dead !
6. • すごく・・・Javaです・・・ • 所感としては JavaScriptをJavaっぽくしてPythonを隠し味に加えたような感じ • あまり目新しい概念はないので、 Javaやってた人なら凄くとっつきやすそう • コードは以下のリンクから抜粋 ◦ https://www.dartlang.org/samples/ Dart code
9. Dart Cide • Async / Await が使えるのは特徴かもしれない
10. Making My First Flutter App • もともと鈴木家のための日記アプリみたいなのをReact Nativeで作ってた • flutterが流行ってるし、簡単にそれっぽいUI が作れるらしいとのことで書 き換えてみた • バックエンドはもともとGolangで自前で書いてたんだけどFirebaseにして みた • なんでCross-Platformなもの使ってるかというと、自分がiPhoneで奥さん がAndroidつかってるから！！！！iPhone使ってくれ頼む！
11. How is Flutter? pros • Material DesignなUIを作るのは簡単 • 挙動がネイティブっぽい(※WEBエンジニアの感想です) • Reloadが早い • React Nativeに比べると開発時の挙動が安定している気がす る • 必要なものは公式がライブラリを提供してくれている > Firebase とか
12. Material DesignなUIを作る • 公式にWidgetsカタログがある。かなり豊富なのでそれだけで、一 般的なUIは作れてしまう。 ◦ https://flutter.io/widgets/material/
13. Scaffold
14. Drawer
15. Bottom Navigation Bar
16. React Likeなステート管理 setStateで値を更新する とbuildが走る Widgetからはその値を参 照するだけで良い
17. Firebaseとの連携 例 google認証 final googleSignIn = new GoogleSignIn() final auth = FirebaseAuth.instance GoogleSignInAccount user = google SignIn.currentUser if(user == null) { await googleSignIn.signIn() // Googleアカウントでログイン } if(auth.currentUser() == null) { GoogleSignInAuthentication credentials = await googleSignIn.currentUser.authentication; await auth.signInWithGoogle( // Firebaseに取得したクレデンシャルでログイン idToken: credentials.idToken, accessToken: credentials.accessToken, ); }
18. How is Flutter? cons • WebエンジニアとしてはReactNativeのほうが圧倒的にわかり やすい。JSXのマークアップみたいなもんだし。 • ステート管理のベストプラクティスがよくわからん • React NativeほどまだOSSのライブラリが少ない印象
19. React Nativeでのスタリング インラインのCSSのように 表現できる
20. Flutterでのスタイリング PaddingのWidgetで WrapしてPaddingを表現
21. ステート管理のベストプラクティス • React Nativeだと redux /mobx みたいなものがWebと 同じように使えたけど、Flutterはその辺発展途上な感じ する • GitHubに以下のようなIssueがオープン ◦ Better state management solution
22. 違うページのStateを更新したい ほげったー 2018/04/07 ♡ ほげったー 2018/04/07 ♡ ほげったー 2018/04/07 ♡ ・ ・ ・ ほげったー 2018/04/07 ♡ 今日はテックトーク でした。 とってもたのしかっ たです。 Flutterの話が一番 おもしろかったで す すずお これを押したときに元のページの♡を ♥にしたい 普通にやるとsetStateする関数をこのWidgetに渡すこと になる？ ページが複雑になってきたときどうすればいいんだろうか Hogetter
23. 最後にいま作りかけのやつデモ • と思ったけどうまく動かなかったので、Flutterのデモ
24. まとめてないまとめ • Flutterは結構よさそう • でもWEBエンジニアがとっつきやすいのはreact Nativeだと思う • FlutterもすごいけどFirebaseもすごい
25. 以上です