$30 off During Our Annual Pro Sale. View Details »

SwiftUIと比較してみた時のFlutter

 SwiftUIと比較してみた時のFlutter

Tatsuya Tanaka

June 23, 2020
Tweet

More Decks by Tatsuya Tanaka

Other Decks in Programming

Transcript

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

    View Slide

  2. ాத ୡ໵ / ͨͳͨͭ (@tattn)
    • Yahoo!ΧʔφϏ
    ←Yahoo!৐׵Ҋ಺
    • iOSΞϓϦΤϯδχΞ
    • ৽ٕज़ͷݕূ
    @tattn
    @tanakasan2525
    @tattn
    Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

    View Slide

  3. όʔνϟϧLODGEͲ͏Ͱ͠ΐ͏͔ʁ
    https://note.com/lodge/n/nfa4a40c057b1
    3DϞσϥʔͱUnity࢖͍͕͍Ε͹ҙ֎ͱ؆୯ʹ࡞Ε·͢ʂ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. Flutterͱ͸

    View Slide

  9. Flutterͱ͸
    • GoogleʹΑͬͯ։ൃ͞ΕͨΦʔϓϯιʔεϞόΠϧΞϓϦSDK
    • ΫϩεϓϥοτϑΥʔϜ (iOS, Android, Web, macOS)
    • DartͰهड़͢Δ
    • ίϯϙʔωϯτࢦ޲ɺϗοτϦϩʔυͳͲͷ
    ࠓͲ͖ͷઃܭ΍ػೳ

    View Slide

  10. Flutterͷ͘͠Έ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. FlutterͰͷUIͷ࡞Γํ
    (ϘλϯΛԡͨ͠Β1૿͑ΔΞϓϦ)

    View Slide

  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")
    })
    }
    }
    }

    View Slide

  16. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter)
    class CounterApp extends StatefulWidget {
    @override
    _CounterAppState createState() => _CounterAppState();
    }
    class _CounterAppState extends State {
    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++),
    )
    ],
    ),
    );
    }
    }
    ͪΐͬͱίʔυྔଟ͘ݟ͑·͕͢ɺ
    εχϖοτͰࣗಈੜ੒͞ΕΔͷͰهड़ྔ͸ಉ͘͡Β͍

    View Slide

  17. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter)
    class _CounterAppState extends State {
    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++),
    )
    ],
    ),
    );
    }
    }
    ࣗಈੜ੒෦෼ΛΧοτͯ͠ຊ࣭ͷΈʹ͢Δͱ͜Μͳײ͡

    View Slide

  18. ϘλϯΛԡ͢ͱ1૿͑Δը໘ (Flutter | SwiftUI)
    ࣅͨΑ͏ͳײ֮Ͱॻ͚·͢
    class _CounterAppState extends State {
    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")
    })
    }
    }
    }

    View Slide

  19. Flutterͷྑ͍ͱ͜Ζ
    (vs SwiftUI)

    View Slide

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

    View Slide

  21. Hot Reload͕ "ͪΌΜͱ" ࢖͑Δ
    • ⌘+SΛԡ͢ͱอଘ͞ΕࣗಈͰView͕ߋ৽͞ΕΔ
    • γϛϡϨʔλͰ΋࣮ػͰ΋࢖͑Δ
    • ϓϩδΣΫτ͕େ͖ͯ͘΋൓ө·Ͱ1ඵ͘Β͍
    • Ϧϩʔυલͷঢ়ଶ͕࢒Δ
    SwiftUIͷϓϨϏϡʔ͸ίϯϙʔωϯτ୯Ґ͕جຊͰ͕͢ɺ
    Flutter͸σόοάϏϧυதͷΞϓϦΛಈతʹॻ͖׵͑Δײ֮

    View Slide

  22. SwiftUIΑΓॊೈ
    • ϨΠΞ΢τͰ࣮ݱͰ͖ͳ͍έʔε͸΄΅ͳͦ͞͏
    • ଍Γͳ͍ػೳΛิ͏খ͞ͳϥΠϒϥϦ͕ଟ͍
    • ։ൃαΠΫϧ͕ૣ͘ɺ͙͢ʹ௚Δ

    View Slide

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

    View Slide

  24. AndroidͰ΋ಈ͘ʂʂʂ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. SwiftUIͷํ͕ྑ͍෦෼

    View Slide

  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΋͋Δ

    View Slide

  30. ͜Ε͔Β࢝·ΔWWDCʹ
    ظ଴͢Δ͜ͱ

    View Slide

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

    View Slide

  32. ·ͱΊ

    View Slide

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

    View Slide