時代とともに進化するアプリケーションを開発し続ける姿勢と恩恵

2023.07.14に開催された 第4回 FlutterGakkai にて登壇
https://fluttergakkai.connpass.com/event/284732/

アーカイブ配信:
https://www.youtube.com/live/MmAgYFZinso?feature=share&t=5832

Transcript

1. #Flu
   tt
   erGakkai
   ࣌୅ͱͱ΋ʹਐԽ͢ΔΞϓϦέʔγϣϯΛ
   
   
   ։ൃ͠ଓ͚Δ࢟੎ͱԸܙ
   πϧΦΧ - Hideki Tsuruoka
   UpdatedAt 2023.07.14
   @ୈ4ճ FlutterGakkai
   

   View Slide

2. 2
   πϧΦΧ
   • גࣜձࣾNTTυίϞͷ৽نࣄۀ෦໳ʹॴଐ
   
   
   • Flutter / Dart / Firebaseத৺ͷιϑτ΢ΣΞΤϯδχΞ
   
   
   • σβΠϯ×ΤϯδχΞϦϯάΛத৺ʹ಺੡։ൃ
   
   
   • Perfume͕޷͖
   @h_tsuruo
   

   View Slide

3. 3
   ZennͰͷٕज़هࣄͷൃ৴
   pub.devύοέʔδͷެ։
   Speaker Deck
   OSS Contribute
   Personal Activities
   

   View Slide

4. 4
   ݸਓ౤ࢿՈ޲͚ͷFinTechαʔϏε
   ূ݊ձࣾαΠτ͔ΒσʔλΛεΫϨΠϐϯάɺ
   
   
   ࣗಈͰूܭ͠ՄࢹԽ͠·͢ɻ
   
   
   Ոܭ฽ΞϓϦͷূ݊ޱ࠲ʹಛԽͨ͠Α͏ͳαʔϏεͰ͢ɻ
   Our Product
   

   View Slide

5. Today’s Talk
   5
   ࢲͨͪ͸໿3೥ؒʹΘͨΓFlutterΛ׆༻͠ɺػೳ։ൃͱฒߦͯ͠
   ਺ʑͷΞοϓσʔτʹ௥ै͖ͯ͠·ͨ͠ɻ
   
   
   લ൒Ͱ͸ɺ௥ैͷඞཁੑ΍۩ମతͳ޻෉ʹ͍ͭͯ͝঺հ͠·͢ɻ
   ޙ൒Ͱ͸ɺ͜ΕΒͷऔΓ૊Έ͔ΒಘΒΕͨԸܙͱͯ͠ɺٕज़ऀͱ
   ͯ͠࠷৽Λ௥͏ҙٛ΍Ըܙʹ͍͓ͭͯ࿩͠·͢ɻ
   

   View Slide

6. 6
   Target Audience
   • ໨ͷલͷػೳ։ൃʹ௥ΘΕͯख͕ճΒͣɺΞοϓσʔτ
   ࡞ۀΛૄ͔ʹ͕ͪ͠ͳํ
   • Flutter/DartͷਐԽ͕ૣ͘ɺମܥతͳΩϟονΞοϓ͕
   ԯ߷ͱײ͍ͯ͡Δํ
   • தʙେن໛ϓϩδΣΫτͷίʔυΛ࠷৽ʹอ͍͕ͪͨɺ
   ࡞ۀͷϞνϕʔγϣϯ্͕͕Βͣ์ஔ͍ͯ͠Δํ
   

   View Slide

7. 7
   01 Flu
   tt
   er/Da
   r
   ΛऔΓר͘Ξοϓσʔτ
   ࠷৽൛ΛόϥϯεΑ͘औΓೖΕΔ޻෉
   ٕज़ਐԽͱ޲͖߹͍ଓ͚ΔԸܙ
   Agenda
   02
   03
   ·ͱΊ
   04
   

   View Slide

8. 8
   Flutter/DartΛऔΓר͘Ξοϓσʔτ
   Chapter.01
   

   View Slide

9. 9
   $
   fl
   u
   tt
   er pub upgrade
   $
   fl
   u
   tt
   er upgrade
   

   View Slide

10. 10
    Flutter/Dartͷٕज़ਐԽ͸ஶ͘͠ɺΞοϓσʔτස౓΋ଟ͍
    Flutter/DartͷਐԽ
    • ຖ݄betaνϟϯωϧ͕ߋ৽͞Εɺ֓Ͷ࢛൒ظʹ1ճstableͷେ͖ͳϦϦʔε͕͋Δ
    
    
    • Flutter 3.0ൃද࣌ͷ಺༰Ͱ͸ɺ5248ͷϓϧϦΫΤετ͕Ϛʔδ͞Εͨ
    [Introducing Flutter 3. The culmination of our journey to… | by Tim Sneath | Flutter | Medium](https://medium.com/flutter/introducing-flutter-3-5eb69151622f)
    

    View Slide

11. 11
    ਐԽͷεϐʔυ͕ૣ͍ͷ͸خ͍͕͠ɺ௥ैίετ͸গͳ͔Βͣൃੜ͢Δ
    Flutter/DartͷਐԽ
    • ։ൃऀͷΈͳ͞Μ͕ɺ೔ʑ৽͍͠৘ใΛΠϯϓοτͯ͠ൃ৴͍ͯ͠Δ·͞ʹͦͷϓϩηε
    
    
    • ࡉ͔͍มߋ఺Λ௥͍͚ͭͮΔͷ͸ਖ਼௚େมͰ͸͋Δ
    ※࠷ۙͷ౤ߘ͔ΒϥϯμϜͰҾ༻͓ͯ͠Γ࡞ҝతͰ͸ͳ͍Ͱ͢
    

    View Slide

12. 12
    FlutterΞϓϦͷΞοϓσʔτͬͯͳʹ͕͋Δʁ
    

    View Slide

13. 13
    Your Flu
    tt
    er App
    Pla
    tf
    rom OS
    SDK
    Package
    
    
    dependencies
    Framework / Engine
    iOS / Android etc…
    riverpod, dio, firebase_auth etc…
    

    View Slide

14. 14
    Your Flu
    tt
    er App
    Pla
    tf
    rom OS
    SDK
    Package
    
    
    dependencies
    Framework / Engine
    iOS / Android etc…
    riverpod, dio, firebase_auth etc…
    

    View Slide

15. 15
    ໿࢛൒ظ͝ͱͷϝδϟʔΞοϓσʔτ΍Dartݴޠ࢓༷ͷվఆ
    SDK΍ύοέʔδ
    • ओʹύϑΥʔϚϯεվળ΍ศརػೳ͕ೖͬͯ͘Δ
    
    
    • ΞοϓσʔτͰແ৚݅ʹԸܙΛڗडͰ͖Δύλʔϯͱɺ৽ػೳΛੵۃ׆༻͢Δύλʔϯͷ෼ྨ
    
    
    • ྫʣImpellerͷiOSඪ४ԽɺCanvasKitͷ଎౓վળɺMediaQueryͷϦϏϧυର৅վળɺDart 3ͷRecords/Patterns
    https://docs.google.com/presentation/d/1az1lb-p-aI6abv6w-jgMXKCKbl6qwfEwwR98mbJavbE/
    mobilepresent?pli=1&slide=id.g42789f296bb367e1_360
    

    View Slide

16. 16
    ࡉ͔͍࢖͍উख޲্ͳͲ͕ଟ͍͕ɺكʹഁյతͳมߋ΋
    SDK΍ύοέʔδ
    • ґଘύοέʔδʹؔͯ͠͸ྔʹΑͬͯଟগखؒ͸มΘΔ͕ɺඞͣ͠΋ൺྫ͢ΔΘ͚Ͱ͸ͳ͍
    
    
    • ഁյతͳมߋ΋ܰඍͳରԠͰࡁΉ͜ͱ͕ଟ͍͕ɺੑ࣭ʹΑͬͯख͕͔͔ؒΔ͜ͱ΋ʢྫ: Riverpod v1→v2ʣ
    
    
    • `dart fix --apply`Ͱద༻Ͱ͖ͨΓɺϚΠάϨʔγϣϯπʔϧΛ༻ҙͯ͘͠ΕΔͱָͰ͖Δ
    

    View Slide

17. 17
    εΫϦϓτΛ׆༻ͯ͠ɺมߋࠩ෼Λ໢ཏతʹ೺Ѳ͢Δͷ΋͓͢͢Ί
    ݸਓతʹѪ༻͍ͯ͠Δmono͞ΜͷGrinderεΫϦϓτ
    • pubspec.lockͷࠩ෼͔ΒCHANGELOGʹϦϯΫͯ͠ϒϥ΢βλϒΛ্ཱͪ͛ͯ͘ΕΔmono͞ΜεΫϦϓτ
    
    
    • ฐνʔϜͰ͸௚઀ґଘͷύοέʔδ͕100ఔ౓͋ΓɺCHANGELOGΛ௥͏ͷ͕େมͳͷͰॿ͔͍ͬͯΔ
    https://twitter.com/_mono/status/1447464160921489412 ࣗಈͰϒϥ΢βλϒ͕։͖CHANGELOG͕දࣔ͞ΕΔ
    

    View Slide

18. 18
    Your Flu
    tt
    er App
    Pla
    tf
    rom OS
    SDK
    Package
    
    
    dependencies
    Framework / Engine
    iOS / Android etc…
    riverpod, dio, firebase_auth etc…
    

    View Slide

19. 19
    Platform OS
    • Flutter͸ޙ௥͍ʹͳΔͷͰ࠷৽ػೳ͕͙͢ʹར༻Ͱ͖ͳ͍έʔε΋͋Δ͕ɺରԠ͸ൺֱతૣ͍
    
    
    • ྫʣগ͠ݹ͍͕Android 13ͰͷThemed App IconsʹΑΔύʔιφϥΠζԽ
    iOS/Androidͷ৔߹͸ຖ೥Ն~ळࠒʹ๚ΕΔϝδϟʔΞοϓσʔτ
    [FlutterΞϓϦΛAndroid 13ʹରԠͤ͞Δ](https://zenn.dev/tsuruo/articles/eae9dbbad8372f)
    https://pc.watch.impress.co.jp/docs/news/1515805.html
    

    View Slide

20. 20
    Android OSͷstable൛ϦϦʔε·Ͱ
    • গ͠ݹ͍Ͱ͕͢ɺAndroid 13ͷϓογϡ௨஌ڐ୚μΠΞϩάରԠΛྫʹ঺հ
    
    
    • ਖ਼ࣜ൛ϦϦʔε࣌ʹ଎΍͔ʹରԠ͕ඞཁͳ৔߹͸ɺࣄલςετظ͕ؒগͳ݁͘ߏ߄͍ͨͩ͠
    ϓϥοτϑΥʔϜ҆ఆ൛͋ͨΓ͔Β։ൃ͞ΕͯɺΪϦΪϦͳ࣌ظײ
    Android 13ਖ਼ࣜϦϦʔε͔Β໿10೔ޙʹϚʔδ
    https://developer.android.com/about/versions/13/changes/notification-
    permission
    

    View Slide

21. 21
    ΞοϓσʔτΛଵΔ͜ͱʹΑΔฐ֐͸Կʁ
    

    View Slide

22. 22
    Developer
    Developer
    Developer Team
    Pla
    tf
    rom OS
    SDK
    Packages
    Flu
    tt
    er App
    Developer
    Update
    

    View Slide

23. 23
    ιϑτ΢ΣΞ΍ίʔυͷ඼࣭͕޲্͠ͳ͍
    ΞοϓσʔτΛଵΔ͜ͱʹΑΔฐ֐ - Fluter App
    • FlutterʹݶΒͣҰൠʹιϑτ΢ΣΞͰͷΞοϓσʔτ͕ཁٻ͞ΕΔ࿩ͱಉ͡
    
    
    • ϢʔβϏϦςΟɾ։ൃऀମݧɾηΩϡϦςΟͷ௿Լ
    
    
    • ࡉΊͳΞοϓσʔτΛଵΔͱɺσάϨ΍όάͳͲΛݟམͱ͢Մೳੑ͕ߴ͍
    Pla
    tf
    rom OS
    SDK
    Package
    
    
    dependencies
    App
    Usability
    Security
    Developer Experience
    

    View Slide

24. 24
    ݹ͍։ൃ؀ڥ͸ݹ͍෩౔ΛੜΈɺ։ൃऀ͕཭Ε͍͖ͯ΍͍͢
    ΞοϓσʔτΛଵΔ͜ͱʹΑΔฐ֐ - Developer Team
    • ࠾༻΋೉͘͠: ୯७ͳ࿩ɺࣗ෼͕։ൃऀͩͬͨͱͯͦ͠ͷ؀ڥʹ਎Λஔ͍ͯಇ͖͍͔ͨ
    
    
    • ٕज़બఆͷࡍʹɺ௠෗Խٕͨ͠ज़Ͱ͸ͳ͘Ϟμϯͳٕज़Λ࠾༻͢ΔϝϦοτʹ΋௨ͣΔͱ͜Ζ͕͋Δ
    Developer
    Developer
    Developer Team
    Developer
    Older App
    New Developer
    

    View Slide

25. 25
    ࠷৽൛ΛόϥϯεΑ͘औΓೖΕΔ޻෉
    Chapter.02
    

    View Slide

26. 26
    Կ΋͠ͳ͍ Ξοϓσʔτద༻ͷΈ Ξοϓσʔτ+৽ػೳΛ׆༻
    Gradient of Updates
    

    View Slide

27. 27
    Կ΋͠ͳ͍ Ξοϓσʔτద༻ͷΈ
    Gradient of Updates
    ͳΔ΂͘ӈͷྖҬʹدͤΔ
    Ξοϓσʔτ+৽ػೳΛ׆༻
    

    View Slide

28. 28
    طଘίʔυ͸ஈ֊తʹɺ৽نίʔυ͸ҙࣝతʹมߋʹ௥ै͢Δ
    ࠷খݶͷखؒͰॻ͖׵͓͑ͯ͘
    • ৽چͷίʔυ͕ࠞࡏ͢Δͱ͍͏σϝϦοτ΋͋ΔͷͰνʔϜͰͷೝࣝ߹Θͤ͸ඞཁ
    
    
    • ྫʣDart 2.17Ͱͷenhanced enumͷಋೖʹ൐͏extensionͷॻ͖׵͑
    Da
    rt
    2.17·Ͱʢچίʔυʣ ׬શʹ৽ػೳʹॻ͖׵͑Δ
    தؒղͱͯ͠ஈ֊తʹऔΓࠐΉ
    

    View Slide

29. 29
    ഁյతͳมߋ͕େ͖͗͢Δ৔߹͸ɺ෼཭͞Εͨ؅ཧը໘Ͱઌߦద༻͢Δ
    MelosͷϚϧνύοέʔδߏ੒Ͱࢼ༻͢Δ
    • Өڹൣғ͕େ͖͍ͱ༧ଌͰ͖Δ৔߹͸Ϣʔβʔ؀ڥΛ෼཭ͨ͠؅ཧը໘ΛαϯυϘοΫεͱͯ͠ར༻
    
    
    • ίʔυن໛͕খ͍͞ͱ͍͏ଆ໘΋͋Δͱঘྑ͠
    
    
    • ྫʣnull safetyରԠɺgo_routerରԠ
    admin
    app
    ӡӦ͕࢖͏؅ཧαΠτ
    Ϣʔβʔ͕࢖͏ΞϓϦ
    Ξοϓσʔτ+৽ػೳΛ׆༻
    Ξοϓσʔτ͸༷ࢠݟ
    common
    

    View Slide

30. 30
    ৗʹϞμϯͳίʔυ΁ͷॻ͖׵͑͹͔ΓΛͯ͠
    
    
    Ϣʔβʔମݧ޲্͕ૄ͔ʹͳΔͱྑ͘ͳ͍ͷͰɺ
    
    
    ͍ͭͲͷ͘Β͍౤ࢿ͢Δ͔͸όϥϯεײ͕֮ඞཁ
    

    View Slide

31. 31
    ٕज़ਐԽͱ޲͖߹͍ଓ͚ΔԸܙ
    Chapter.03
    

    View Slide

32. 32
    ͜͜·Ͱ͸Ξοϓσʔτʹର͢Δ۩ମͳ࿩
    

    View Slide

33. 33
    ࣮ࡍʹͦͷ࢟੎Λଓ͚Δ஝ੵͱͯ͠ੜ·ΕΔԸܙ
    

    View Slide

34. 34
    ٕज़ऀͨΔجຊ࢟੎͕਎ʹ͖ͭɺεςοϓΞοϓΛ࣮ײ
    

    View Slide

35. 35
    Developer
    Developer
    Developer Team
    Pla
    tf
    rom OS
    SDK
    Flu
    tt
    er App
    Developer
    Update
    

    View Slide

36. 36
    Developer
    Developer Team Flu
    tt
    er App
    Update
    • ஌ࣝͷ޲্ɿ1࣍৘ใΛࢀর͠࠷৽৘ใͷΩϟονΞοϓΛश׳Խ
    
    
    • Ξ΢τϓοτػձͷ֦େɿࢢ৔ʹग़ճ͍ͬͯͳ͍৘ใͷωλ͕Ͱ͖Δ
    
    
    • ίϛϡχςΟ΁ͷؼଐҙࣝɿOSSߩݙɺMainainerͱͷίϛϡχέʔγϣϯ
    ͳͲ
    

    View Slide

37. 37
    ҙࣝతʹΠϯϓοτΛऔΓೖΕΔΑ͏ʹͳΓɺைྲྀΛ௫ΉώϯτΛಘΔ
    ٕज़ऀͱͯ͠ͷԸܙ - 1
    • มߋ఺͔Βɺղܾ͠Α͏ͱ͍ͯ͠Δ໰୊΍޲͔͓͏ͱ͍ͯ͠Δํ޲ͳͲͷைྲྀ͕ݟ͑ͯ͘Δ
    
    
    • ಛʹFlutter͸ΦʔϓϯιʔεͷͨΊɺGitHubʹެ։͞Ε͓ͯΓϒϥοΫϘοΫε෦෼͕গͳֶ͘श͕ḿΔ
    
    
    • ΤϯδχΞͱͯ͠ੜ্͖͍ͯ͘ͰϚετͳʮ৘ใͷΩϟονΞοϓʯΛश׳ԽͰ͖Δ
    

    View Slide

38. 38
    ࣗ෼͕ͦͷٕज़ͷઌ಄Λ૸ΔҙࣝΛ࣋ͪɺίϛϡχςΟʹߩݙͰ͖Δ
    ٕज़ऀͱͯ͠ͷԸܙ - 2
    • ౰વઌ಄Ͱ͸ͳ͍ͱ͍͏ͷ͸ཧղͭͭ͠ɺͦͷٕज़ʹDeep Dive͍ͯ͠ΔҎ্͸ਓΑΓલΛ૸Δҙ͕ࣝେࣄ
    
    
    • FirebaseͳͲͷ༗໊ύοέʔδͰ΋ҙ֎ͱόά͕͋ͬͨΓ͢Δ
    
    
    • ઌΜͯ͡ࢼ͢͜ͱͰɺόά΍վળ఺͕ݟ͔ͭΓίϛϡχςΟߩݙʹ΋د༩Ͱ͖Δ
    Issueىථ΋গͳ͔Βͣ࿑ྗ͕͔͔ΔͷͰɺετοΫ͓͍ͯͯ͠ޙͰ΍ΔͷͰ΋ྑ͍
    

    View Slide

39. 39
    ٕज़ͷਐԽͷมભΛϦΞϧλΠϜʹ਎Λ΋ͬͯମݧͰ͖Δ
    ٕज़ऀͱͯ͠ͷԸܙ - 3
    • ྫʣProvider→StateNotifier→Riverpod→Riverpod v2→Riverpod Generator
    
    
    • ʮRiverpod͕ྲྀߦ͍ͬͯΔ͔Β࢖͑ΔΑ͏ʹͳΓ·ͨ͠ʯͱ͸΍͸Γղ૾౓͕ҧ͏
    
    
    • ҰํͰઌਓ͕ͨͪ੔උͯ͘͠Εͨߴ଎ಓ࿏ͳͷͰɺ࠷ॳ͔ΒRiverpod࢖͍·͢Ͱ΋౰વྑ͍
    ※͜ͷϓϩδΣΫτͰ͸·ͩriverpod_generatorରԠ·Ͱ͸ͯ͠·ͤΜ
    

    View Slide

40. 40
    ΫϩεϓϥοτϑΥʔϜͷಛੑʹΑΓɺڵຯɾ஌ࣝͷ෯͕޿͕Δ
    ٕज़ऀͱͯ͠ͷԸܙ - 4
    • FlutterΛى఺ʹपล஌ࣝΛิ׬ͯ͠࿈૝ήʔϜ͢Δʢྫ: Impeller→Skia→Metal, Vulkanʣ
    
    
    • Flutterʹ͸iOS/Androidͷ஌͕ࣝඞਢ৚݅ͳͷ͔ٞ࿦΋كʹ͋Δ͕ɺ஌ࣝͳ͘ͱ΋దֶٓ΂͹ࡁΉఔ౓
    
    
    • App Store/Google Play StoreͷΞϓϦετΞͷѻ͍΍WebAssemblyͳͲ෯޿͘
    Flu
    tt
    er
    Android
    iOS
    Web
    macOS
    Windows
    Linux
    Embedded Linux
    

    View Slide

41. 41
    ·ͱΊ
    Chapter.04
    

    View Slide

42. 42
    Conclusion
    • ٕज़ਐԽʹద߹͠ଓ͚Δ͜ͱ͸ϓϩμΫτ΁ͷ౤ࢿͰ͋Γɺ
    ΤϯδχΞͱͯ͠ͷࣗ෼ࣗ਎΁ͷ౤ࢿͰ͋Δɻ
    • FlutterΛத৺ʹऔΓר͘पғͷ؀ڥʹؔ৺Λ࣋ͪɺମܥతʹཧ
    ղʹ౒ΊΕ͹ɺࣗવͱεΩϧΞοϓʹܨ͕Δɻ
    • Ξοϓσʔτద༻͸νʔϜ؀ڥ΍ϞνϕʔγϣϯͰૄ͔ʹͳΔ͜
    ͱ΋͋Δ͕ɺ͜·ΊʹόϥϯεΑ͘औΓࠐΉ͜ͱΛҙࣝ͢Δɻ
    

    View Slide

43. 43
    Flutter/DartͷਐԽΛόϥϯεྑ͘औΓೖΕɺ
    
    
    ΞϓϦέʔγϣϯ඼࣭޲্ͱͱ΋ʹɺ
    
    
    ٕज़ऀͱͯ͠εςοϓΞοϓ͠Α͏
    Flutter/Dartͱ͸ҧ͏ٕज़͕ϝΠϯʹͳͬͯ΋ɺ͜ͷ࢟੎͸ϝλ஌ࣝͱͯ͠స༻Ͱ͖Δ͸ͣ
    

    View Slide

44. 44
    Appendix
    • [Introducing Flutter 3. The culmination of our journey to… | by Tim Sneath | Flutter | Medium](https://medium.com/
    flutter/introducing-flutter-3-5eb69151622f)
    
    
    • [What’s new | Flutter](https://docs.flutter.dev/release/whats-new)
    
    
    • [Flutter Tips and Tricks - FlutterCon23 - Google εϥΠυ](https://docs.google.com/presentation/d/1az1lb-p-
    aI6abv6w-jgMXKCKbl6qwfEwwR98mbJavbE/mobilepresent?pli=1&slide=id.g42789f296bb367e1_360)
    
    
    • https://developer.android.com/about/versions/13/changes/notification-permission
    
    
    • [FlutterΞϓϦΛAndroid 13ʹରԠͤ͞Δ](https://zenn.dev/tsuruo/articles/eae9dbbad8372f)
    
    
    • [ʮAndroid 14 Beta 4ʯ഑৴։࢝ɻPixel Tablet/FoldʹରԠ - PC Watch](https://pc.watch.impress.co.jp/docs/
    news/1515805.html)
    
    
    • [ʮiOS 17ʯʮiPadOS 17ʯύϒϦοΫϕʔλ͕ొ৔ - έʔλΠ Watch](https://k-tai.watch.impress.co.jp/docs/
    news/1516253.html)
    

    View Slide