Slide 1

Slide 1 text

Flutterでアプリ作った 作ってる話 Making My First Flutter App 2018 / 4/ 6 M3 TechTalk @suusan2go

Slide 2

Slide 2 text

自己紹介 ● Kenta Suzuki / @suusan2go ● M3,inc / Software Engineer ● 経験値で言うとこんな感じ ○ Ruby > JavaScript > Kotlin(ServerSide) > Golang ● どちらかと言えばサーバーサイドエンジニアです! ● 最近のお気に入り映画は「バーフバリ 王の凱旋」です

Slide 3

Slide 3 text

What is Flutter ? ● Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. ● Dartで動く

Slide 4

Slide 4 text

Whit is Dart ? ● Googleが開発しているWeb向けのプログラミング言語 ● もともとはJavaScriptの代替として開発されていたが、2015 年にはChromeへの組み込みを断念 ● 更に2017年にはGoogleの社内標準言語にTypeScriptが選 ばれてしまう

Slide 5

Slide 5 text

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 !

Slide 6

Slide 6 text

● すごく・・・Javaです・・・ ● 所感としては JavaScriptをJavaっぽくしてPythonを隠し味に加えたような感じ ● あまり目新しい概念はないので、 Javaやってた人なら凄くとっつきやすそう ● コードは以下のリンクから抜粋 ○ https://www.dartlang.org/samples/ Dart code

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Dart Cide ● Async / Await が使えるのは特徴かもしれない

Slide 10

Slide 10 text

Making My First Flutter App ● もともと鈴木家のための日記アプリみたいなのをReact Nativeで作ってた ● flutterが流行ってるし、簡単にそれっぽいUI が作れるらしいとのことで書 き換えてみた ● バックエンドはもともとGolangで自前で書いてたんだけどFirebaseにして みた ● なんでCross-Platformなもの使ってるかというと、自分がiPhoneで奥さん がAndroidつかってるから!!!!iPhone使ってくれ頼む!

Slide 11

Slide 11 text

How is Flutter? pros ● Material DesignなUIを作るのは簡単 ● 挙動がネイティブっぽい(※WEBエンジニアの感想です) ● Reloadが早い ● React Nativeに比べると開発時の挙動が安定している気がす る ● 必要なものは公式がライブラリを提供してくれている > Firebase とか

Slide 12

Slide 12 text

Material DesignなUIを作る ● 公式にWidgetsカタログがある。かなり豊富なのでそれだけで、一 般的なUIは作れてしまう。 ○ https://flutter.io/widgets/material/

Slide 13

Slide 13 text

Scaffold

Slide 14

Slide 14 text

Drawer

Slide 15

Slide 15 text

Bottom Navigation Bar

Slide 16

Slide 16 text

React Likeなステート管理 setStateで値を更新する とbuildが走る Widgetからはその値を参 照するだけで良い

Slide 17

Slide 17 text

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, ); }

Slide 18

Slide 18 text

How is Flutter? cons ● WebエンジニアとしてはReactNativeのほうが圧倒的にわかり やすい。JSXのマークアップみたいなもんだし。 ● ステート管理のベストプラクティスがよくわからん ● React NativeほどまだOSSのライブラリが少ない印象

Slide 19

Slide 19 text

React Nativeでのスタリング インラインのCSSのように 表現できる

Slide 20

Slide 20 text

Flutterでのスタイリング PaddingのWidgetで WrapしてPaddingを表現

Slide 21

Slide 21 text

ステート管理のベストプラクティス ● React Nativeだと redux /mobx みたいなものがWebと 同じように使えたけど、Flutterはその辺発展途上な感じ する ● GitHubに以下のようなIssueがオープン ○ Better state management solution

Slide 22

Slide 22 text

違うページのStateを更新したい ほげったー 2018/04/07 ♡ ほげったー 2018/04/07 ♡ ほげったー 2018/04/07 ♡ ・ ・ ・ ほげったー 2018/04/07 ♡ 今日はテックトーク でした。 とってもたのしかっ たです。 Flutterの話が一番 おもしろかったで す すずお これを押したときに元のページの♡を ♥にしたい 普通にやるとsetStateする関数をこのWidgetに渡すこと になる? ページが複雑になってきたときどうすればいいんだろうか Hogetter

Slide 23

Slide 23 text

最後にいま作りかけのやつデモ ● と思ったけどうまく動かなかったので、Flutterのデモ

Slide 24

Slide 24 text

まとめてないまとめ ● Flutterは結構よさそう ● でもWEBエンジニアがとっつきやすいのはreact Nativeだと思う ● FlutterもすごいけどFirebaseもすごい

Slide 25

Slide 25 text

以上です