SwiftUIと比較してみた時のFlutter

 SwiftUIと比較してみた時のFlutter

0620564f0125b8b3b7f4fe40c10b8b4e?s=128

Tatsuya Tanaka

June 23, 2020
Tweet

Transcript

  1. SwiftUIͱൺֱͯ͠Έͨ࣌ͷFlutter ాதୡ໵ (@tattn) #wwdctokyo

  2. ాத ୡ໵ / ͨͳͨͭ (@tattn) • Yahoo!ΧʔφϏ ←Yahoo!৐׵Ҋ಺ • iOSΞϓϦΤϯδχΞ

    • ৽ٕज़ͷݕূ @tattn @tanakasan2525 @tattn Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
  3. όʔνϟϧLODGEͲ͏Ͱ͠ΐ͏͔ʁ https://note.com/lodge/n/nfa4a40c057b1 3DϞσϥʔͱUnity࢖͍͕͍Ε͹ҙ֎ͱ؆୯ʹ࡞Ε·͢ʂ

  4. SwiftUI࢖ͬͯΈ·͔ͨ͠ʁ YES NO (clusterͷΤϞʔγϣϯ Ͱ൓Ԡ͍ͩ͘͞)

  5. ࠓͷSwiftUI͸·ͩͭΒΈ͕ଟ͍ʂ

  6. ݸਓతʹSwiftUIͰ࡞͍ͬͯͨΞϓϦΛ FlutterʹҠߦͨ͠Γɺ ۀ຿Ͱ΋FlutterΛݕূͨ͠Γ͍ͯ͠·͢

  7. WWDC20௚લͱͷ͜ͱͰ Flutterͱൺֱͭͭ͠ SwiftUIͷਐԽʹظ଴͢ΔLTΛ͠·͢

  8. Flutterͱ͸

  9. Flutterͱ͸ • GoogleʹΑͬͯ։ൃ͞ΕͨΦʔϓϯιʔεϞόΠϧΞϓϦSDK • ΫϩεϓϥοτϑΥʔϜ (iOS, Android, Web, macOS) •

    DartͰهड़͢Δ • ίϯϙʔωϯτࢦ޲ɺϗοτϦϩʔυͳͲͷ ࠓͲ͖ͷઃܭ΍ػೳ
  10. Flutterͷ͘͠Έ

  11. Flutterͷ಺෦ https://flutter.dev/docs/resources/technical-overview ಠࣗͷϨϯμϦϯάΤϯδϯ(Skia) ͰUIViewʹඳը͠ɺUIΛදࣔ

  12. ΈΜͳେ޷͖View Hierarchy FlutterViewController಺ͷFlutterViewʹશͯඳը͞Ε͍ͯΔ (ScrollView͸ݟ͑ͳ͍ͱ͜Ζʹ഑ஔ) ͪͳΈʹ.xcworkspace΋࡞ΒΕΔͷͰ ωΠςΟϒͷσόοά͸XcodeͰͰ͖Δ

  13. ίʔυ࣮ߦͷ͘͠Έ ϦϦʔεϏϧυ Dartίʔυ ػցޠ ίϯύΠϧ σόοάϏϧυ ػցޠ+Dart ࣮ߦதʹඞཁͳ෦෼͚ͩίϯύΠϧ͞ΕΔ (JIT) →ϗοτϦϩʔυ͕ޮ͘

    ࣮ߦલʹશͯίϯύΠϧ͞ΕΔ(AOT) →ಈ࡞͕଎͍
  14. FlutterͰͷUIͷ࡞Γํ (ϘλϯΛԡͨ͠Β1૿͑ΔΞϓϦ)

  15. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (SwiftUI) struct ContentView: View { @State var count =

    0 var body: some View { VStack { Text("Count: \(count)") .font(.largeTitle) Spacer() .frame(height: 20) Button(action: { self.count += 1 }, label: { Text("Increment") }) } } }
  16. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter) class CounterApp extends StatefulWidget { @override _CounterAppState createState()

    => _CounterAppState(); } class _CounterAppState extends State<CounterApp> { int _count = 0; @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Text('Count: $_count', style: Theme.of(context).textTheme.headline5), SizedBox(height: 20), FlatButton( child: Text('Increment'), onPressed: () => setState(() => _count++), ) ], ), ); } } ͪΐͬͱίʔυྔଟ͘ݟ͑·͕͢ɺ εχϖοτͰࣗಈੜ੒͞ΕΔͷͰهड़ྔ͸ಉ͘͡Β͍
  17. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter) class _CounterAppState extends State<CounterApp> { int _count =

    0; @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Text('Count: $_count', style: Theme.of(context).textTheme.headline5), SizedBox(height: 20), FlatButton( child: Text('Increment'), onPressed: () => setState(() => _count++), ) ], ), ); } } ࣗಈੜ੒෦෼ΛΧοτͯ͠ຊ࣭ͷΈʹ͢Δͱ͜Μͳײ͡
  18. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter | SwiftUI) ࣅͨΑ͏ͳײ֮Ͱॻ͚·͢ class _CounterAppState extends State<CounterApp> {

    int _count = 0; @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Text('Count: $_count', ɹɹ style: Theme.of(context).textTheme.headline5), SizedBox(height: 20), FlatButton( child: Text('Increment'), onPressed: () => setState(() => _count++), ) ], ), ); } } struct ContentView: View { @State var count = 0 var body: some View { VStack { Text("Count: \(count)") .font(.largeTitle) Spacer() .frame(height: 20) Button(action: { self.count += 1 }, label: { Text("Increment") }) } } }
  19. Flutterͷྑ͍ͱ͜Ζ (vs SwiftUI)

  20. Hot Reload͕ "ͪΌΜͱ" ࢖͑Δ • ⌘+SΛԡ͢ͱอଘ͞ΕࣗಈͰView͕ߋ৽͞ΕΔ • γϛϡϨʔλͰ΋࣮ػͰ΋࢖͑Δ • ϓϩδΣΫτ͕େ͖ͯ͘΋൓ө·Ͱ1ඵ͘Β͍

    • Ϧϩʔυલͷঢ়ଶ͕࢒Δ
  21. Hot Reload͕ "ͪΌΜͱ" ࢖͑Δ • ⌘+SΛԡ͢ͱอଘ͞ΕࣗಈͰView͕ߋ৽͞ΕΔ • γϛϡϨʔλͰ΋࣮ػͰ΋࢖͑Δ • ϓϩδΣΫτ͕େ͖ͯ͘΋൓ө·Ͱ1ඵ͘Β͍

    • Ϧϩʔυલͷঢ়ଶ͕࢒Δ SwiftUIͷϓϨϏϡʔ͸ίϯϙʔωϯτ୯Ґ͕جຊͰ͕͢ɺ Flutter͸σόοάϏϧυதͷΞϓϦΛಈతʹॻ͖׵͑Δײ֮
  22. SwiftUIΑΓॊೈ • ϨΠΞ΢τͰ࣮ݱͰ͖ͳ͍έʔε͸΄΅ͳͦ͞͏ • ଍Γͳ͍ػೳΛิ͏খ͞ͳϥΠϒϥϦ͕ଟ͍ • ։ൃαΠΫϧ͕ૣ͘ɺ͙͢ʹ௚Δ

  23. SwiftUIΑΓॊೈ • ϨΠΞ΢τͰ࣮ݱͰ͖ͳ͍έʔε͸΄΅ͳͦ͞͏ • ଍Γͳ͍ػೳΛิ͏খ͞ͳϥΠϒϥϦ͕ଟ͍ • ։ൃαΠΫϧ͕ૣ͘ɺ͙͢ʹ௚Δ • FlutterͷϑϨʔϜϫʔΫଆ΋Dart෦෼͸ ΞϓϦͷσόοά࣌ʹϒϨʔΫϙΠϯτΛஔ͍ͯ

    σόοάͰ͖ΔʂͷͰमਖ਼ͷෑډ͕௿͍ (௚ͤΔਓ͕ଟ͍)
  24. AndroidͰ΋ಈ͘ʂʂʂ

  25. ωΠςΟϒͷػೳ͸Ͳ͏͢Δͷʁ

  26. ωΠςΟϒػೳͷݺͼग़͠ํ PlatformView PlatformChannel UIViewΛ࢖ͬͯiOSͷ࢓૊ΈͰUIΛಈ͔͠ɺ දࣔ݁ՌΛSkiaʹૹͬͯϨϯμϦϯά͢Δɻ →ωΠςΟϒͷViewΛFlutterͷWidget಺ʹ૊ΈࠐΊΔ ωΠςΟϒͰػೳΛ࣮૷͠ɺDart͔Βݺͼग़͢࢓૊Έɻ ૬ޓʹσʔλͷ΍ΓऔΓ͕Ͱ͖Δ (σʔλܕͷ੍ݶ͸͋Δ) ͲͪΒ΋Swift

    /Kotlin Ͱॻ͚Δʂ
  27. ωΠςΟϒΞϓϦʹFlutterΛຒΊࠐΉํ๏΋͋Δ Add to App ɾCocoaPodsͰFlutterΞϓϦΛऔΓࠐΉ ɾίϚϯυͰFrameworkԽͯ͠औΓࠐΉ ɾpodspecͰFrameworkԽΛCocoaPodsʹ·͔ͤͯऔΓࠐΉ IUUQTqVUUFSEFWEPDTEFWFMPQNFOUBEEUPBQQ ͳͲͷํ๏ͰطଘͷωΠςΟϒΞϓϦʹ FlutterΛ෦෼ಋೖ͢Δ͜ͱ΋Ͱ͖·͢ɻ

    (FlutterͷUI͸1ຕͷViewControllerͱͯ͠औΓѻ͑Δ)
  28. SwiftUIͷํ͕ྑ͍෦෼

  29. SwiftUIͷྑ͍ͱ͜Ζ ϝιουνΣʔϯ (modifier) ʹΑΔViewͷΧελϚΠζ͸ ೖΕࢠΛݮΒͤͯಡΈ΍͍͢ɻ (౰ͨΓલͰ͕͢)ωΠςΟϒͷػೳΛ͔ΜͨΜʹσόοάͰ͖Δɻ Swift͸ຊ౰ʹྑ͍ݴޠɻ Text("WWDC") .padding() .border(Color.red,

    width: 3) Container( decoration: BoxDecoration( border: Border.all(color: Colors.red, width: 3), ), padding: const EdgeInsets.all(8), child: Text("WWDC"), ) Container( decoration: BoxDecoration( border: Border.all(color: Colors.red, width: 3), ), child: Padding( padding: const EdgeInsets.all(8), child: Text("WWDC"), ), ), ωετΛݮΒͨ͢ΊʹpaddingΛ Ҿ਺ͰࢦఆͰ͖ΔWidget΋͋Δ
  30. ͜Ε͔Β࢝·ΔWWDCʹ ظ଴͢Δ͜ͱ

  31. Apple͞Μ͓ئ͍͠·͢ʂ ɾHot ReloadͷਐԽʹظ଴ʂ ɹɹɾσόοάϏϧυͰಈ͔ͯ͠ΔΞϓϦΛ ɹɹɹঢ়ଶΛ࢒ͭͭ͠ॻ͖׵͍͑ͨ ɾViewͷΧελϚΠζੑΛߴͯ͘͠΄͍͠ʂ ɹɹɾཪʹ͍ΔUIKit΍AppKitͷViewʹ৮ΕΔ࢓૊ΈͰ΋ྑ͍Ͱ͢ ɾWebͰಈ͘Α͏ʹͯ͠΄͍͠ʂ(ຊ౰͸Androidαϙʔτͯ͠΄͍͚͠Ͳ᩵୔͸ݴ͍·ͤΜ) ɹɹɾHTML /

    CSS / JSΛexport͢Δػೳཉ͍͠ IUUQTqVUUFSEFWEPDTEFWFMPQNFOUUPPMTEFWUPPMTJOTQFDUPS
  32. ·ͱΊ

  33. ·ͱΊ • Flutter͸͔ͳΓΑ͘Ͱ͖͍ͯͯɺ࣮༻తɻ • ݱঢ়Ͱ͸SwiftUI/UIKitΑΓ΋"ѹ౗త"ʹ շదʹॻ͚Δɻ • Ͱ΋Swiftࣗମ΍SwiftUIͷઃܭ͸ັྗతʂ • ͜Ε͔Β࢝·ΔWWDCͰͷSwiftUIͷਐԽʹظ଴