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

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

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

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

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

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

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

Flutterͱ͸

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

Flutterͷ͘͠Έ

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

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

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

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

ϘλϯΛԡ͢ͱ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") }) } } }

ϘλϯΛԡ͢ͱ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++), ) ], ), ); } } ͪΐͬͱίʔυྔଟ͘ݟ͑·͕͢ɺ εχϖοτͰࣗಈੜ੒͞ΕΔͷͰهड़ྔ͸ಉ͘͡Β͍

ϘλϯΛԡ͢ͱ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++), ) ], ), ); } } ࣗಈੜ੒෦෼ΛΧοτͯ͠ຊ࣭ͷΈʹ͢Δͱ͜Μͳײ͡

ϘλϯΛԡ͢ͱ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") }) } } }

Flutterͷྑ͍ͱ͜Ζ (vs SwiftUI)

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

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

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

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

AndroidͰ΋ಈ͘ʂʂʂ

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

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

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

SwiftUIͷํ͕ྑ͍෦෼

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

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

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

·ͱΊ

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