宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践/swiftui-graphql

1
એݴత6*ͷঢ়ଶ؅ཧͱΞʔΩςΫνϟ
4XJGU6*ͱ(SBQI2-ʹΑΔ࣮ફ
J04%$
!TPOBUBSEͦͳଠ

View Slide

Appify Technologies
CTO
ͦͳଠ
@sonatard

View Slide

3
"QQJGZ
w 4IPQJGZɺ#"4&ͷJ04ɺ"OESPJEͷΞϓϦΛ/P$PEFͰϦϦʔε͢ΔαʔϏε
w ؅ཧը໘͔ΒωΠςΟϒΞϓϦͷσβΠϯΛಈతʹ͕มߋՄೳ 8FC7JFXͰ͸ͳ͍

w %SPJE,BJHJͰൃද༧ఆͰ͢
w ΦϑϥΠϯళฮͱͷ࿈ܞ
w όοΫΤϯυ
w ($1ɺ(P
w ࣾһਓ
w ۀ຿ҕୗɺ෭ۀਓ
w ࠾༻
w IUUQTBQQJGZJODDPNKPC

View Slide

͸͡Ίʹ

View Slide

5
͸͡Ίʹ
w 3FBDU͕ීٴͯ͠Ҏ߱(6*ϑϨʔϜϫʔΫͷଟ͘͸એݴత6*ʹͳΓ·ͨ͠
w ϑϩϯτΤϯυ
w 3FBDUɺ7VFKTɺ"OHVMBS
w ΞϓϦ
w 4XJGU6*ɺ+FUQBDL$PNQPTFɺ'MVUUFSɺ3FBDU/BUJWF
w ·ͨએݴత6*ͷ͓͔͛Ͱ7JFX͕ঢ়ଶΛ࣋ͨͳ͘ͳΓɺ1SFTFOUBUJPO%PNBJO4FQBSBUJPO
͕ଅਐ͞Ε7JFXͷ։ൃ͕͠΍͘͢ͳΓ·ͨ͠ɻ
6*7JFX 4UBUF

View Slide

6
͸͡Ίʹ
w ͔͠͠ঢ়ଶ͕ͳ͘ͳͬͨΘ͚Ͱ͸ͳ͍ͨΊɺঢ়ଶΛ؅ཧΛ͢Δඞཁ͕͋Γ·͢ɻ
w ͦͷΑ͏ͳதɺ'MVYɺ3FEVYɺ5IF$PNQPTBCMF"SDIJUFDUVSFͳͲଟ͘ͷঢ়ଶ؅ཧख๏
͕ొ৔͖ͯ͠·ͨ͠ɻ
w ͞Βʹ͜͜਺೥Ͱ͸(SBQI2-͕ొ৔ͨ͜͠ͱͰେ͖͘ύϥμΠϜγϑτ͕ى͜Ζ͏ͱ͠
͍ͯ·͢ɻ
w ຊൃදͰ͸ɺଟ͘ͷΞʔΩςΫνϟ͕ొ৔͖ͯͨ͠ྺ࢙ΛḷΓͳ͕ΒɺͦΕͧΕͷղܾ
ͨ͠՝୊ͱ๊͑Δ՝୊Λઆ໌͠ɺ࠷ऴతʹ(SBQI2-͕ղܾ͢Δ՝୊Λઆ໌͠·͢ɻ

View Slide

એݴత6*ͷঢ়ଶ؅ཧͱΞʔΩςΫνϟͷඞཁੑ

View Slide

8
w ΞʔΩςΫνϟΛߟ͑ͳͯ͘΋ಈ͘΋ͷ͸࡞Δ͜ͱ͕Ͱ͖·͢ɻ
w ͔͠͠νʔϜͱͯ͠։ൃ্͍ͯ͘͠Ͱ͸ɺΞʔΩςΫνϟΛܾఆ͠ɺ౷Ұͨ͠ํ਑Ͱ
ίʔυΛॻ͘͜ͱ͸։ൃੜ࢈ੑͷ޲্ͷͨΊʹආ͚ΒΕ·ͤΜɻ
w ·ͨ։ൃੜ࢈ੑΛ্͛Δ͜ͱ͸ɺϓϩμΫτͷͨΊʹͱͯ΋େ੾Ͱ͢
w ϢʔβͷϑΟʔυόοΫΛߴස౓Ͱड͚Δ͜ͱ͕Ͱ͖Δ
w ࢢ৔ʹઌߦͰ͖Δ
w গਓ਺ͷ։ൃνʔϜͰ։ൃՄೳʹͳΓɺίϛϡχέʔγϣϯίετ͕௿Լ͢Δ
w ৽نͷΤϯδχΞ͕։ൃʹࢀՃ͢Δϋʔυϧ͕Լ͕Δ

View Slide

9
w ҰํͰΞʔΩςΫνϟʹڽΓ͗ͯ͢͠·͍։ൃ଎౓্͕͕Βͳ͍͜ͱ͕͋Γ·͢
w ௕ظతࢹ఺Λॏࢹͯ͠੹຿ͷ෼ׂ΍ਖ਼͠͞Λ௥ٻ͠ա͗Δ͜ͱ͕໨తʹͳͬͯ͠·͏
w ৑௕ͳίʔυ͕૿͑ͯ͠·͏
w ݕ౼ࣄ߲͕૿͑ͯ͠·͏
w ͜ΕͰ͸ίʔυͷ౷Ұ͸Ͱ͖͍ͯͯ΋ɺ୹ظతͳ։ൃ଎౓্͕͕Γ·ͤΜɻ
w Ӭଓతʹ୹ظతͳ։ൃ଎౓্͕͕Βͳ͚Ε͹௕ظతͳ։ൃ଎౓΋্͕Γ·ͤΜɻ
w ͦͷͨΊ౷Ұੑͱγϯϓϧ͞ͷόϥϯεͷऔΕͨΞʔΩςΫνϟ͕ඞཁͱͳΓ·͢ɻ

View Slide

એݴత6*ͷঢ়ଶ؅ཧͱΞʔΩςΫνϟͷ໨ࢦ͢΂͖ΰʔϧ

View Slide

11
w γϯϓϧͳΞʔΩςΫνϟΛ໨ࢦͨ͢Ίʹ͸ɺ൓෮తͳ࣮૷Λ༰қʹ࣮ݱͰ͖Δ͜ͱ͕
େ੾Ͱ͢ɻ
w ΫϥΠΞϯτ։ൃͷதͰͷେ͖ͳ໾ׂͱͯ͠ҎԼͷ͕ͭ͋Γ·͢ɻ
"1*ϦΫΤετͰσʔλΛऔಘ͢Δ
7JFX͕σʔλΛड͚औΓදࣔ͢Δ
w ߋʹҰൠతʹ͸ΞϓϦͱͯ͠ͷύϑΥʔϚϯεͷͨΊʹ͸ҎԼΛ࣮ࢪ͠·͢ɻ
w "1*͔Βऔಘͨ͠σʔλΛӬଓԽͯ͠࠶ར༻͢Δ
w ͭ·Γ͜ΕΒΛγϯϓϧʹ࣮૷Ͱ͖Δͱɺཧ૝తͳΞʔΩςΫνϟΛ࣮ݱͰ͖ͦ͏Ͱ
͢ɻ

View Slide

12
3PPU7JFX\
"1*ϦΫΤετʹΑΓσʔλΛऔಘ
EBUB"1*ϦΫΤετ ϦΫΤετ಺༰

σʔλΛ7JFXʹ౉ͯ͠දࣔ͢Δ
7JFX EBUBWJFX

7JFX EBUBWJFX

^
7JFX WJFX
\
5FYU WJFXOBNF

5FYU WJFXBHF

^
7JFX WJFX
\
5FYU WJFXUJUMF

*NBHF WJFXJNBHF63-

^
w ͦͷͨΊʹ͸ҎԼͷίʔυ͚ͩଘࡏ͢Δ͜ͱ͕ཧ૝తͰ͢
w ͜Ε͚ͩͳΒզʑ͕࣮૷࣌ʹߟ͑Δ͜ͱͱ࣮૷ͷରԠ͕औΕ͓ͯΓɺͱͯ΋௚઀తʹཧ
ղͰ͖Δίʔυͱݴ͑·͢ɻ

View Slide

13
w ຊൃදͰ͸ɺ͜ͷΑ͏ͳίʔυΛ4XJGU6*ͱ(SBQI2-ʹΑΓ࣮ݱ͠·͢ɻ
w ·ͨ͜ΕΛ࣮ݱͰ͖ΔΑ͏ʹͳΔ·Ͱͷએݴత6*ΞʔΩςΫνϟͷྺ࢙తมભ΋঺հ͠
·͢ɻ

View Slide

એݴత6*ͷঢ়ଶ؅ཧΞʔΩςΫνϟͷྺ࢙

View Slide

15
એݴత6*ͷঢ়ଶ؅ཧΞʔΩςΫνϟͷྺ࢙
4UBSU
'MVY 3FEVY
-JGUJOH
4UBUF6Q
5$"
3FEVY
5PPM,JU
35,
2VFSZ
(SBQI2-
3FBDU
2VFSZ
3FBDUDPSF
νʔϜͷࢥ૝
ΫϥΠΞϯτ
Ωϟογϡ
୯ํ޲σʔλϑϩʔ
3FEVYͷվྑ
ϘΠϥʔ
ςϯϓϨʔτͷ࡟ݮ
3FDPJM
4UBUFߋ৽ͷ
఻೻Λ7JFX͔Β෼཭
4JOHMF4PVSDFPG5SVUI
ΫϥΠΞϯτ
ΩϟογϡΛ3FEVYͰ࣮ݱ
ΫϥΠΞϯτ
ΩϟογϡΛ3&45Ͱ࣮ݱ
ࠓճ໨ࢦ͢ΰʔϧ

View Slide

'MVY

View Slide

17
એݴత6*ͷঢ়ଶ؅ཧΞʔΩςΫνϟͷྺ࢙'MVY
4UBSU
'MVY 3FEVY
-JGUJOH
4UBUF6Q
5$"
3FEVY
5PPM,JU
35,
2VFSZ
(SBQI2-
3FBDU
2VFSZ
3FBDUDPSF
νʔϜͷࢥ૝
ΫϥΠΞϯτ
Ωϟογϡ
3FEVYͷվྑ
ϘΠϥʔ
ςϯϓϨʔτͷ࡟ݮ
3FDPJM
4UBUFߋ৽ͷ
4JOHMF4PVSDFPG5SVUI
ΫϥΠΞϯτ
ΫϥΠΞϯτ

View Slide

18
w 'MVY͸'BDFCPPL͕ఏএͨ͠ঢ়ଶ؅ཧͷΞʔΩςΫνϟͰ͢ɻ
w ޿ࠂνʔϜͷ+JOH$IFO͕ఏҊʁ3FBDUDPSFνʔϜఏҊͰ͸ͳ͍ɻ
w "DUJPO͕ൃߦ͞ΕΔͱ%JTQBUDIFSʹ"DUJPO͕౉͞Εͯɺର৅ͷ"DUJPOΛड͚औΔ΂͖
4UPSF͢΂ͯʹ௨஌͞Ε·͢ɻ
w ҎԼͷਤͰ͸Θ͔ΓͮΒ͍Ͱ͕͢ɺͭͷ%JTQBUDIFS͔Β͋Δ"DUJPO͕ෳ਺ͷ4UPSFʹ౉
͞ΕΔΠϝʔδͰ͢ɻ
w ͜ΕʹΑΓෳ਺ͷ4UPSF͢΂ͯʹঢ়ଶมߋ͕ߦΘΕΔΑ͏ʹͳΓ·͢ɻ
w ͜ͷҰ࿈ͷྲྀΕ͸ɺ6OJEJSFDUJPOBMEBUB
fl
PX ୯ํ޲σʔλϑϩʔ
ͱͯ͠ݺ͹Ε͍ͯ·
͢ɻ

View Slide

19
w Ͱ͸ͳͥ'MVY୯ํ޲σʔλϑϩʔ͸ඞཁͩͬͨͷͰ͠ΐ͏͔ʁ
w ୯ʹॻ͖ํΛ౷Ұ͢ΔͨΊͷํ਑ͱ͍͏Θ͚Ͱ͸͋Γ·ͤΜɻ

View Slide

20
w αϯϓϧΞϓϦಈ࡞Πϝʔδ
λεΫͷνΣοΫΛ֎͢
λεΫʹνΣοΫΛ͢Δ

View Slide

21
w 50%0ΞϓϦͰߟ͑ͯΈ·͢
w ׬ྃҰཡը໘͔ΒຊΛಡΉͷνΣοΫΛ֎ͯ͠ະ׬ྃʹ໭͢
50%0
શҰཡ
7JFX
50%0
׬ྃҰཡ
7JFX
શҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
ɹ૟আ͢Δ
׬ྃҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
50%0
ະ׬ྃҰཡ
7JFX
ະ׬ྃҰཡͷঢ়ଶɹ
ɹ૟আ͢Δ
ຊΛಡΉΛ
ະ׬ྃʹมߋ ຊΛಡΉΛ
׬ྃҰཡ͔Β࡟আ ຊΛಡΉΛ
ະ׬ྃҰཡʹ௥Ճ

View Slide

22
w શҰཡ7JFX͔ΒຊΛಡΉͷνΣοΫΛ֎͢
50%0
શҰཡ
7JFX
50%0
׬ྃҰཡ
7JFX
શҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
ɹ૟আ͢Δ
׬ྃҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
50%0
ະ׬ྃҰཡ
7JFX
ɹ૟আ͢Δ
ຊΛಡΉΛ
׬͔ྃΒ࡟আ
ຊΛಡΉΛ
શҰཡ͔Β࡟আ
ຊΛಡΉΛ

View Slide

23
w ະ׬ྃҰཡ7JFX͔Β૟আ͢ΔͷνΣοΫΛೖΕΔ
50%0
શҰཡ
7JFX
50%0
׬ྃҰཡ
7JFX
શҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
ɹ૟আ͢Δ
׬ྃҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
50%0
ະ׬ྃҰཡ
7JFX
ɹ૟আ͢Δ
૟আΛ͢Δʹ
νΣοΫΛ͍ΕΔ
૟আ͢ΔΛ
ະ׬ྃҰཡ͔Β࡟আ
૟আΛ͢ΔΛ
׬ྃҰཡʹ௥Ճ

View Slide

24
w ͢΂ͯͷΠϕϯτΛ౷߹͢ΔͱҎԼͷΑ͏ʹ૬ޓʹݺͼग़͕͋͠ΓෳࡶʹͳΓ؅ཧͰ͖
ͳ͘ͳΔ
50%0
શҰཡ
7JFX
50%0
׬ྃҰཡ
7JFX
શҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
ɹ૟আ͢Δ
׬ྃҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
50%0
ະ׬ྃҰཡ
7JFX
ɹ૟আ͢Δ
૟আΛ͢Δʹ
νΣοΫΛ͍ΕΔ
૟আ͢ΔΛ
ະ׬ྃҰཡ͔Β࡟আ
૟আΛ͢ΔΛ
׬ྃҰཡʹ௥Ճ
50%0
શҰཡ
7JFX
50%0
׬ྃҰཡ
7JFX
શҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
ɹ૟আ͢Δ
׬ྃҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
50%0
ະ׬ྃҰཡ
7JFX
ɹ૟আ͢Δ
ຊΛಡΉΛ
ະ׬ྃʹมߋ ຊΛಡΉΛ
׬ྃҰཡ͔Β࡟আ ຊΛಡΉΛ
50%0
શҰཡ
7JFX
50%0
׬ྃҰཡ
7JFX
શҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
ɹ૟আ͢Δ
׬ྃҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
50%0
ະ׬ྃҰཡ
7JFX
ɹ૟আ͢Δ
ຊΛಡΉΛ
׬͔ྃΒ࡟আ
ຊΛಡΉΛ
શҰཡ͔Β࡟আ
ຊΛಡΉΛ

View Slide

25
w ࣮ࡍͷίϯϙʔωϯτʹ͸֊૚ߏ଄΋ଘࡏ͢ΔͨΊΑΓෳࡶʹͳΔ
"7JFX
"ঢ়ଶ
3PPU7JFX
#7JFX
#ঢ়ଶ
"7JFX
"ঢ়ଶ
"7JFX
"ঢ়ଶ
#7JFX
#ঢ়ଶ

View Slide

26
w ͦ͜Ͱ'MVYͰ͸%JTQBUDIFSΛதԝͷϋϒͱͯ͠༻ҙͯ͠ɺ"DUJPOΛूத؅ཧ͢Δ͜ͱʹ
͠·ͨ͠
50%0
શҰཡ
7JFX
50%0
׬ྃҰཡ
7JFX
શҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
ɹ૟আ͢Δ
׬ྃҰཡͷঢ়ଶ
ɹຊΛಡΉɹ✅
50%0
ະ׬ྃҰཡ
7JFX
ɹ૟আ͢Δ
%JTQBDIFS
׬ྃ"DUJPO
4UPSF͕
ߋ৽͞ΕΔͱ࠶ඳը
ະ׬ྃ"DUJPO
׬ྃ"DUJPO
ະ׬ྃ"DUJPO
%JTQBUDIFS͸"DUJPOʹ
ैͬͯ4UPSFΛߋ৽
͜ΕʹΑΓ%JTQBDIFS͔Β4UPSF΁ͷ
ߋ৽͕୯ํ޲ͰγϯϓϧʹͳΓ·͢

View Slide

3FEVY

View Slide

28
એݴత6*ͷঢ়ଶ؅ཧΞʔΩςΫνϟͷྺ࢙3FEVY
4UBSU
'MVY 3FEVY
-JGUJOH
4UBUF6Q
5$"
3FEVY
5PPM,JU
35,
2VFSZ
(SBQI2-
3FBDU
2VFSZ
3FBDUDPSF
νʔϜͷࢥ૝
ΫϥΠΞϯτ
Ωϟογϡ
3FEVYͷվྑ
ϘΠϥʔ
ςϯϓϨʔτͷ࡟ݮ
3FDPJM
4UBUFߋ৽ͷ
4JOHMF4PVSDFPG5SVUI
ΫϥΠΞϯτ
ΫϥΠΞϯτ

View Slide

29
w 3FEVY͸೥ʹ%BO"CSPNPWͱ"OESFX$MBSLʹΑΓ࡞ΒΕͨΞʔΩςΫνϟͰ͋Γ
ϥΠϒϥϦͰ͢ɻ
w "OESFX$MBSL͸ɺ'MVYϥΠϒϥϦ'MVNNPYͷ࡞ऀɻ
w ݱࡏ͸ਓͱ΋3FBDUDPSFνʔϜʹࡏ੶͍ͯͯ͠ɺ3FEVYϝϯςφϯε͸.BSL
&SJLTPOʹҾ͖ܧ͍Ͱ͍·͢

View Slide

30
w ϥΠϒϥϦͱͯ͠͸'MVYΑΓ΋γϯϓϧʹ࣮૷Ͱ͖ΔΑ͏ʹͳ͓ͬͯΓɺ୯ํ޲σʔλ
ϑϩʔͱ͍͏఺Ͱ͸'MVYΛ౿ऻ͍ͯ͠·͢ɻ
w ΫϦοΫ͞ΕͨΒ"DUJPOΛ%JTQBUDI͠ɺ"DUJPOΛड͚ͨ3FEVDFS͕"DUJPOʹԠͯ͡4UPSF
Λߋ৽͠·͢

View Slide

31
w 3FEVYࡾݪଇ
w 4JOHMF4PVSDFPG5SVUI
w 'MVY͸ΞϓϦέʔγϣϯ಺ʹෳ਺ͷঢ়ଶΛ͍࣋ͬͯ·͕ͨ͠ɺ3FEVYͰ͸୯Ұͷ
4UPSFΛ༻ҙͯͦ͜͠Ͱ͢΂ͯͷঢ়ଶΛ؅ཧ͠·͢ɻ
w ͜ΕʹΑΓ'MVYͰ͋ͬͨΑ͏ʹ%JTQBUDIFS͔Βෳ਺ͷҟͳΔ4UPSFΛߋ৽͢ΔΑ͏
ͳ͜ͱ͸ͳ͘ͳΓɺߟ͑ํͱͯ͠͸୯७ʹͳΓ·ͨ͠ɻ
w 4UBUFJTSFBEPOMZ
w 7JFXͳͲͰड͚औͬͨঢ়ଶͦͷ΋ͷ͸ߋ৽ͤͣɺ4UPSFʹ"DUJPOΛ%JTQBUDIͯ͠ɺ
ͦͷ"DUJPOΛड͚औͬͨ3FEVDFS͕ঢ়ଶΛߋ৽͠·͢
w $IBOHFTBSFNBEFXJUIQVSFGVODUJPO
w 3FEVDFSͱ͍͏७ਮͳؔ਺͕"DUJPOʹԠͯ͡4UPSFΛߋ৽͠·͢

View Slide

32
w 4JOHMF4PVSDFPG5SVUI
શҰཡ7JFX
׬ྃҰཡ
7JFX
ະ׬ྃҰཡ
7JFX
4UPSF
5BTLҰཡ
4FMFDUPS
5BTLҰཡ
UBTLEPOF
4FMFDUPS
UBTLҰཡ
UBTLEPOF
4FMFDUPS
5BTLҰཡ
'MVYͰ͸ঢ়ଶ͕7JFX͝ͱʹଘࡏ͍ͯͨ͠
ͨΊ%JTQBUDIFS͕ෳ਺ͷঢ়ଶΛߋ৽͍ͯͨ͠
͕ɺ3FEVYͰ͸44P5Ͱ͋Δ4UPSF͚ͩΛߋ৽͠
ͯɺଞͷ஋͸3FBDUJWFʹಋग़͢Δ
3FEVDFS
*G׬ྃʹνΣοΫ"DUJPJO
UBTLEPOFUSVF
*G׬ྃνΣοΫΛ֎͢
"DUJPO
UBTLEPOFGBMTF
׬ྃ"DUJPO
ະ׬ྃ"DUJPO
׬ྃ"DUJPO
ະ׬ྃ"DUJPO

View Slide

33
w 4JOHMF4PVSDFPG5SVUIͷ஫ҙ
w 4UPSF͕୯Ұͩͱͯ͠΋ɺ4UPSFͷதͰঢ়ଶΛෳ੡͍ͯ࣋ͬͯͯ͠͸ҙຯ͕ͳ͍
w ͜Ε͸/(
w ͭ·Γࣗ෼ࣗ਎Ͱద੾ʹ44P5Λ࣮ݱ͢ΔͨΊʹਖ਼نԽΛ͠ͳ͚Ε͹͍͚·ͤΜ
4UPSF
UPEPҰཡ
5PEP׬ྃҰཡ
5Pະ׬ྃҰཡ

View Slide

34
w ͜ΕΒͷಛੑʹΑΓҎԼͷ͕࣮ࣜݱ͞Ε͍ͯΔɻ
w 4UPSF3FEVDFS ॳظঢ়ଶ "DUJPO

w ͭ·Γॳظঢ়ଶͱ͢΂ͯͷ"DUJPOΛه࿥͓ͯ͘͜͠ͱͰɺ͢΂ͯͷঢ়ଶΛ࠶ݱ͢Δ͜ͱ
͕Ͱ͖·͢
w ͜ΕΛλΠϜτϥϕϧͱݺͼ·͢
w 3FEVYEFWUPPMͰ͸ɺ"DUJPOΛר͖໭ͨ͠Γ࠶ੜͨ͠Γ͢Δ͜ͱ͕Ͱ͖·͢

View Slide

35
શҰཡ7JFX
4UPSF
UPEPҰཡ
UPEP"1*-PEJOH
UPEP"1*&SSPS
4FMFDUPS
UPEPҰཡ
3FEVDFS
*GUPEPҰཡΛอଘ
4UPSFUPEPҰཡ
"1*Ͱऔಘͨ͠UPEPҰཡ
*GMPBEJOH"DUJPO
UPEP"1*-PBEJOHUSVF
*GMPBEJOHGBMTF"DUJPO
UPEP"1*-PBEJOHGBMTF
*G&SSPS"DUJPO
UPEP"1*&SSPSGBMFT
શҰཡදࣔ
"DUJPO
.JEEMFXBSF
"1*ͰUPEPҰཡΛऔಘ
EJTQBUDI UPEPҰཡΛอଘ

EJTQBUDI MPBEJOHUSVF

EJTQBUDI MPBEJOHGBMTF

"1*ίʔϧ
w "1*ίʔϧͷঢ়ଶ؅ཧ
w 'MVY4UBOEBSE"DUJPO
w සग़͢Δ"DUJPOΛύ
λʔϯԽͨ͠΋ͷ
ঢ়ଶͱҰॹʹMPBEJOHͱ
FSSPSΛ࣋ͭ

View Slide

36
w .VUBUJPO"1*࣮ߦޙͷ4UPSFߋ৽
w ྫ͑͹UPHHMF"1*Λ࣮ߦͨ͠ͱ͖͸ɺ4UPSFʹอ͍࣋ͯ͠Δ஋Λߋ৽͢Δඞཁ͕͋Δ
w ͦ͏͠ͳ͍ͱ7JFX͕ߋ৽͞Εͳ͍
w ΋͘͠͸ඞͣ5P%Pͷ7JFXΛදࣔ͢ΔࡍʹຖճϑΣον͢Δඞཁ͕͋Δ
w ࣮૷͸ָ͕ͩը໘ભҠ͝ͱʹ'FUDIͯ͠-PBEJOH͕૸ΔͷͰ69͸ѱ͍
w Ϣʔεέʔεʹ߹Θͤͯ൑அ

View Slide

37
w ͢΂ͯͷঢ়ଶΛ4UPSFʹ࣋ͭ͜ͱΛਪ঑
"7JFX
4UPSF
UPEPঢ়ଶ
6TFSঢ়ଶ
#7JFX
શҰཡ7JFX
׬ྃҰཡ
7JFX
6TFS7JFX

View Slide

38
w 3PPUʹଘࡏ͢Δ4UPSFͷ՝୊1SPQ%SJMMJOH
"7JFX
4UPSF
UPEPঢ়ଶ
6TFSঢ়ଶ
#7JFX
શҰཡ7JFX
׬ྃҰཡ
7JFX
6TFS7JFX
5PEPঢ়ଶෆཁ
"7JFXͱ#7JFX͸ຊདྷ͸UPEPঢ়ଶͱ6TFS
ঢ়ଶ͸ඞཁͳ͍͕ɺ࠷Լ෦ͷ7JFXʹ౉ͨ͢
Ίʹ͸ܦ༝͠ͳ͚Ε͹ͳΒͳ͍
͜ΕΛ1SPQ%SJMMJOHͱݴ͏
6TFSঢ়ଶෆཁ
5PEPঢ়ଶඞཁ
5PEPঢ়ଶඞཁ 6TFSঢ়ଶඞཁ

View Slide

39
w 1SPQ%SJMMJOHͷղܾࡦ4FMFDUPS
"7JFX
4UPSF
UPEPঢ়ଶ
6TFSঢ়ଶ
#7JFX
શҰཡ7JFX
׬ྃҰཡ
7JFX
6TFS7JFX
4FMFDUPS
5PEPঢ়ଶ͢΂ͯ
4FMFDUPS
5PEP׬ྃঢ়ଶ
4FMFDUPS
6TFSঢ়ଶ
"7JFXͱ#7JFXΛ
εΩοϓͰ͖Δ
ඞཁͳ஋͚ͩʹϑΟϧλʔ͠
ͯɺ֊૚ΛεΩοϓ͢Δ
4FMFDUPSΛ࢖͏͜ͱͰɺ1SPQ
%SJMMJOHΛճආͰ͖Δ

View Slide

40
w 4UPSFΛෳ਺࡞Δ͜ͱ͕Ͱ͖Δ͕ਪ঑͞Ε͍ͯͳ͍
w 3FEVY%FW5PPMTͰλΠϜτϥϕϧͰ͖ͳ͘ͳΔ
w ੹຿Λ෼ׂ͍ͨ͠৔߹͸4UPSFͷதͰ%PNBJO͝ͱʹঢ়ଶΛ෼ׂͯ͠ɺͦΕ͝ͱʹ
3FEVDFSΛ࡞Δ
w 'MVYͷΑ͏ʹҟͳΔ3FEVDFS͕ಉҰ"DUJPOΛड͚औΓҟͳΔঢ়ଶΛߋ৽͢Δ͜ͱ΋Մೳ
w ͭ·ΓϥΠϒϥϦͱͯ͠ͷ3FEVY͸'MVYΛ࣮ݱ͢ΔͨΊʹ΋ར༻Ͱ͖Δ
w ͦͷͨΊݱࡏͰ͸'MVYઐ༻ϥΠϒϥϦ͕࢖༻͞ΕΔ͜ͱ͸΄ͱΜͲͳ͍
w 3FEVY5PPM,JU
w 3FEVY͸ϘΠϥʔϓϨʔτ͕ଟ͍͜ͱ͕՝୊ͱݴΘΕΔΑ͏ʹͳ͖ͬͯͨͷͰɺղܾ
͢ΔͨΊͷϥΠϒϥϦ
w 5$"Ͱ΋ϘΠϥʔϓϨʔτ͕ؾʹͳΓग़ͨ࣌͠ʹ͸ࢀߟʹͳΔͱࢥ͍·͢

View Slide

41
w ՝୊
w ਖ਼نԽ͸ࣗ෼Ͱ͠ͳ͚Ε͹͍͚ͳ͍
w ϘΠϥʔϓϨʔτ
w 3FEVY5PPM,JUͰղܾɻ͔͠͠ίʔυྔ͸ݮ͕ͬͨ֓೦͸ݮͬͯ͸͍ͳ͍
w "1*ίʔϧͷঢ়ଶΛ4UPSFͰ؅ཧ͢ΔͷͰείʔϓ͕େ͖͍
w NVUBUJPOͷ"1*࣮ߦޙʹ4UPSFΛߋ৽͢Δඞཁ͕͋Δ

View Slide

42
༨ஊͭͷ4JOHMF4PVSDFPG5SVUI
w 4JOHMF4PVSDFPG5SVUIͱݴͬͨ࣌ʹͭͷҙຯ͕ଘࡏ͍ͯ͠·͢ɻ
w 3FEVY͕ఏএ͢ΔΑ͏ͳʮΞϓϦέʔγϣϯ্ͷ4UPSFΛͭ࣋ͭʯͱ͍͏ҙຯ
w ʮಉҰঢ়ଶΛॏෳͯ࣋ͨͣ͠ʹɺਖ਼نԽͨ͠ঢ়ଶΛ࣋ͭʯͱ͍͏ҙຯ
w લऀͷҙຯͰɺઆ໌ͯ͠͠·͏ͱࠓޙͷઆ໌Ͱࠞཚ͕ੜ·ΕΔͷͰɺ͜ͷ͋ͱͷεϥΠ
υͰ͸ޙऀΛ4JOHMF4PVSDFPG5SVUIͱͯ͠આ໌Λଓ͚͍͖ͯ·͢ɻ
w Ұൠతʹ͸ޙऀ͕ਖ਼͍͠Ͱ͢ɻ

View Slide

5IF$PNQPTBCMF"SDIJUFDUVSF

View Slide

44
એݴత6*ͷঢ়ଶ؅ཧΞʔΩςΫνϟͷྺ࢙5IF$PNQPTBCMF"SDIJUFDUVSF
4UBSU
'MVY 3FEVY
-JGUJOH
4UBUF6Q
5$"
3FEVY
5PPM,JU
35,
2VFSZ
(SBQI2-
3FBDU
2VFSZ
3FBDUDPSF
νʔϜͷࢥ૝
ΫϥΠΞϯτ
Ωϟογϡ
3FEVYͷվྑ
ϘΠϥʔ
ςϯϓϨʔτͷ࡟ݮ
3FDPJM
4UBUFߋ৽ͷ
4JOHMF4PVSDFPG5SVUI
ΫϥΠΞϯτ
ΫϥΠΞϯτ

View Slide

45
w 5$"͸10*/5'3&&ͷ#SBOEPO8JMMJBNTͱ4UFQIFO$FMJTʹΑͬͯఏҊ͞ΕͨΞʔΩς
ΫνϟͰ͢ɻ
w 7JFXɺ4UPSFɺ"DUJPOɺ3FEVDFSͱ͍͏ؔ܎͸3FEVYͱಉ͡

View Slide

46
w 3FEVYͱͷҧ͍
w "1*ίʔϧ
w 3FEVYͷΑ͏ʹ"1*ίʔϧͳͲͷ෭࡞༻ΛNJEEMFXBSFͰ࣮ݱ͢ΔͷͰ͸ͳ͘
3FEVDFSͷฦΓ஋ͷ&
ff
FDUͰ࣮ݱ͢Δ
w 4UPSFͱ3FEVDFS
w 3FEVYͷΑ͏ʹͭͷ4UPSFΛ3PPUʹ഑ஔ͢Δ͜ͱΛਪ঑͍ͯ͠ΔΘ͚Ͱ͸ͳ͍
w ͦͷͨΊ֊૚ΛεΩοϓ͢Δ4FMFDUPS૬౰ͷ΋ͷ͸ͳ͍
w 'MVY΍3FEVYͷΑ͏ʹಉҰͷ"DUJPOΛҟͳΔ3FEVDFS͕ड͚औΒͳ͍
w ΋ͦ͠Εʹ͍ۙ͜ͱΛ΍Ζ͏ͱͨ͠Β)JHI0SEFS3FEVDFSͰ࣮ݱ
w ͜ΕΒͷํ਑͸3FBDUެࣜͷVTF3FEVDFSͱࣅ͍ͯͯγϯϓϧͳઃܭʹͳ͍ͬͯΔ
w 3FEVYͷ֊૚εΩοϓ͸൱ఆతͳҙݟ΋ࠜڧ͍

View Slide

47
w ݸਓతͳٙ໰
w 3FEVYͰ͸ʮ3PPUʹ4UPSFΛ഑ஔ͢Δ͜ͱʯͱʮ4FMFDUPSʹΑΔ1SPQ%SJMMJOHͷղ
ܾʯʹΑΓɺϨεϙϯεΩϟογϡΛίϯϙʔωϯτπϦʔશମͰ༰қʹར༻Ͱ͖
ΔΑ͏ʹ͕ͨ͠ɺ5$"Ͱ͸͜ΕΛղܾ͢Δํ๏ΛఏҊ͍ͯ͠ͳ͍Α͏ʹײͨ͡
w 5$"Ͱ͸είʔϓΛดͯ͡ίϯϙʔωϯτؒΛҾ਺Ͱ౉͍͚ͯ͠͹ྑ͍ͱ͍͏ߟ
͑ʁ
w ΋͘͠͸ͦ͏͍͏஋͸3FEVYͷΑ͏ʹ3PPUʹ4UPSFΛ഑ஔͯ͠&OWJSPONFOU0CKFDU
Ͱ1SPQ%SJMMJOHΛղܾ͢Δʁ
w &OWJSPONFOU0CKFDU͸໊લͷ௨Γ؀ڥม਺ͷΑ͏ͳઃఆ஋ʹ࢖͏΂͖Ͱ͋·Γ
ཚ༻͢Δ΂͖Ͱ͸ͳ͍Α͏ʹ΋ࢥ͑Δ

View Slide

48
શҰཡ7JFX
4UPSF
UPEPҰཡ 3FEVDFS
JGUPHHMF JE

JEͰҰகͨ͠UBTLΛ
UPHHMFͯ͠ߋ৽

5PHHMF
"DUJPO
w 5$"
w ׬ྃͷνΣοΫϘοΫεΛೖΕͨ৔߹ͷྲྀΕ
3FEVDFS͕BDUJPOΛड͚ͯ4UPSFΛߋ৽

View Slide

49
w 5$"ͷίʔυ
enum ToDoAction: Equatable {

case append

case toggle(UUID)

}
let toDoReducer = Reducer<

ToDoState,

ToDoAction,

ToDoEnvironment> { state, action, environment in

switch action {

case .append:

state.tasks += [Task(title: "௥Ճ", done: false)]

return .none

case let .toggle(id):

state.tasks = state.tasks.map { task in

guard task.id == id else {

return task

}

var newTask = task

newTask.done = !newTask.done

return newTask

}

return .none

}

}
struct ToDoState : Equatable {

var tasks: [Task] = []

var completed: [Task] {

get{

return tasks.filter { $0.done }

}

}

var unCompleted: [Task] {

get{

return tasks.filter { !$0.done }

}

}

}
3FEVDFS͕BDUJPOΛड͚ͯ4UBUFΛߋ৽

View Slide

50
w 5$"ͷίʔυ
struct ToDoView: View {

let store: Store

var body: some View {

WithViewStore(self.store) { viewStore in

VStack{

Button(action: { viewStore.send(.append) }){ Text("௥Ճ") }

Text("શToDo")

ToDoListView(todos: viewStore.todos,

toggle: { id in viewStore.send(.toggle(id))})

Text("ະ׬ྃToDo")

ToDoListView(todos: viewStore.unCompletedToDos,


Text("׬ྃࡁΈToDo")

ToDoListView(todos: viewStore.completedToDos,

toggle:{ id in viewStore.send(.toggle(id))})

}

}

}

}
4UPSF͔Βঢ়ଶΛऔಘͯ͠දࣔ
7JFX͔Β͸4UPSFʹ"DUJPOΛૹ৴ͯ͠ঢ়ଶΛߋ৽

View Slide

51
શҰཡ7JFX
4UPSF
UPEPҰཡ
UPEP"1*-PEJOH
UPEP"1*&SSPS
3FEVDFS
JGදࣔ"DUJPO
TUBUFMPBEJOHUSVF
SFUVSO"1* lUPEPTz

ɹNBQ Ϩεϙϯε੒ޭ"DUJPO

JGϨεϙϯε੒ޭ"DUJPO UPEPT

TUBUFUPEPҰཡUPEPT
TUBUFMPBEJOHGBMTF
JGશҰཡϨεϙϯεࣦഊ"DUJPO FSSPS

TUBUFUPEP"1*&SSPSFSSPS
TUBUFMPBEJOHGBMTF
શҰཡදࣔ
"DUJPO
w "1*ίʔϧͷঢ়ଶ؅ཧ 3FEVYͱ͸ҟͳΓNJEEMFXBSFͰ͸ͳ͘
3FEVDFSͷதͰ&
ff
FDUΛ࡞੒ͯ͠ฦ͢͜ͱͰ
ඇಉظॲཧΛ࣮ߦ͍ͯ͘͠
3FEVDFSʹදࣔ"DUJPO͕౉͞ΕΔ
MPBEJOHΛUSVFʹͯ͠"1*ίʔϧͷ
&
ff
FDUΛ࡞੒ɺͦͷ&
ff
FDU݁ՌΛϨε
ϙϯε੒ޭ"DUJPO΁౉͢
Ϩεϙϯε݁Ռ͔Βঢ়ଶΛߋ৽ͯ͠
MPBEJOHΛGBMTFʹ͢Δ

View Slide

52
w 5$"ͷίʔυ"1*ίʔϧ͋Γ
"1*ίʔϧͷ݁ՌΛ5P%P"DUJPOHFU3FTQPOTFʹ
౉͍ͯ͠Δ
let toDoReducer = Reducer<

ToDoState,

ToDoAction,

ToDoEnvironment> { state, action, environment in

switch action {

case .get:

state.loading = true

return environment.getAPI()

.delay(for: 2, scheduler: environment.mainQueue.animation())

.catchToEffect()

.map(ToDoAction.getResponse)

case let .getResponse(.success(tasks)):

state.tasks = tasks

state.loading = false

return .none

case let .getResponse(.failure(error)):

state.error = error.localizedDescription

state.loading = false

return .none

}

}

View Slide

53
w 5$"ͷίʔυ"1*ίʔϧ͋Γ

let store: Store


WithViewStore(self.store) { viewStore in

ZStack {

VStack{

if viewStore.error != "" {

Text(viewStore.error)

}

Button(action: { viewStore.send(.append) }){ Text("௥Ճ") }

Text("શToDo")

TasksView(tasks: viewStore.tasks,



TasksView(tasks: viewStore.unCompleted,



TasksView(tasks: viewStore.completed,

toggle:{ id in viewStore.send(.toggle(id))})

}.onAppear { viewStore.send(.get) }

if viewStore.loading {

ProgressView()

}

}

}

}

}
"1*ίʔϧͳ͠ͱͷҧ͍͸
MPBEJOH࣌ͷ1SPHSFTT7JFXͷ௥Ճ͞Εͨ͜ͱͰɺ
ଞ͸΄΅ಉ͡

View Slide

54
w ՝୊جຊతʹ͸3FEVYͱಉ͡՝୊Λ๊͍͑ͯΔ
w ਖ਼نԽ͸ࣗ෼Ͱ͠ͳ͚Ε͹͍͚ͳ͍
w ϘΠϥʔϓϨʔτ
w "1*ίʔϧͷঢ়ଶΛ4UPSFͰ؅ཧ͢ΔͷͰείʔϓ͕େ͖͍
w 3PPUʹஔ͔ͳ͚Ε͹3FEVYΑΓ͔͸ڱ͍
w NVUBUJPOͷ"1*࣮ߦޙʹ4UPSFΛߋ৽͢Δඞཁ͕͋Δ

View Slide

-JGUJOH4UBUF6Q

View Slide

56
એݴత6*ͷঢ়ଶ؅ཧΞʔΩςΫνϟͷྺ࢙-JGUJOH4UBUF6Q
4UBSU
'MVY 3FEVY
-JGUJOH
4UBUF6Q
5$"
3FEVY
5PPM,JU
35,
2VFSZ
(SBQI2-
3FBDU
2VFSZ
3FBDUDPSF
νʔϜͷࢥ૝
ΫϥΠΞϯτ
Ωϟογϡ
3FEVYͷվྑ
ϘΠϥʔ
ςϯϓϨʔτͷ࡟ݮ
3FDPJM
4UBUFߋ৽ͷ
4JOHMF4PVSDFPG5SVUI
ΫϥΠΞϯτ
ΫϥΠΞϯτ

View Slide

57
w ೥ʹ3FBDUެࣜCMPHʹൃද͞Ε·ͨ͠ɻ
w ෳ਺ίϯϙʔωϯτͰར༻͢Δঢ়ଶΛɺඞཁͳίϯϙʔωϯτ·Ͱ্࣋ͪ͛Δ͜ͱΛݴ
͍·͢ɻ
w 'MVY΍3FEVYͳͲͷΑ͏ʹΘ͔Γ΍͍͢ΞʔΩςΫνϟͷਤ͕ͳ͍ͨΊ͋·Γීٴ͕ਐ
ΜͰ͍·ͤΜ͕ɺએݴత6*ͷঢ়ଶ؅ཧʹ͓͍ͯ΋࠷΋େ੾ͳ֓೦ͱݴ͑·͢ɻ
w ΞʔΩςΫνϟͱ͍͏ΑΓ͔͸એݴత6*ͷݪଇͱݴ͑ΔͰ͠ΐ͏ɻ
w 3FBDUɺ4XJGU6*ɺ+FUQBDL$PNQPTFͰެࣜʹݴٴ͞Ε͍ͯΔ͜ͱ͔Β΋େ੾ͳ͜ͱͩͱ
Θ͔Γ·͢ɻ
w 3FBDU-JGUJOH4UBUF6Q
w 4XJGU6*4PVSDFPG5SVUI 88%$
PS4JOHMF4PVSDFPG5SVUI
w +FUQBDL$PNQPTF4UBUF)PJTUJOH

View Slide

58
w ෳ਺ͷ7JFXͰར༻͢Δঢ়ଶΛ্࣋ͪ͛Δ
w 3FEVYͰ͸3PPUʹ্͕࣋ͪ͛ͨɺඞཁͳͱ͜Ζ·Ͱ্࣋ͪ͛Ε͹ྑ͍ͱ͍͏ߟ͑ํ
w είʔϓΛՄೳͳݶΓখ͘͢͞Δ
શҰཡ7JFX
׬ྃҰཡ
7JFX
ະ׬ྃҰཡ
7JFX
શҰཡ
ঢ়ଶ
׬ྃҰཡ
ঢ়ଶ
ະ׬ྃҰཡ
ঢ়ଶ
5P%P7JFX 6TFS7JFX
6TFS
ঢ়ଶ
3PPU7JFX
͜ΕΒͷঢ়ଶ͸
4JOHMF4PVSDFPG5SVUIͰ͸ͳ
͍ͷͰ্࣋ͪ͛Δඞཁ͕͋Δ
্࣋ͪ͛Δલͷঢ়ଶ

View Slide

59
w 3FEVYͷ৔߹
શҰཡ7JFX
׬ྃҰཡ
7JFX
ະ׬ྃҰཡ
7JFX
5P%P7JFX
6TFS7JFX
6TFS
ঢ়ଶ
3PPU7JFX
Ұ൪্·Ͱ্࣋ͪ͛Δ
͔͠͠6TFS7JFXʹ͸ඞཁͳ͍
ͷͰείʔϓͱ͍͏؍఺Ͱ͸
3PPUʹ͋Δඞཁ͸ͳ͍
શҰཡ
ঢ়ଶ
3PPUͷঢ়ଶ͔ΒTFMFDUPSͰί
ϯϙʔωϯτʹ஋Λ౉͍ͯͨ͠
4FMFDUPS
શҰཡ
4FMFDUPS
׬ྃҰཡ
4FMFDUPS
ະ׬ྃҰཡ

View Slide

60
w -JGUJOH4UBUF6QͰঢ়ଶΛ্࣋ͪ͛Δ
w 5$"ͷ৔߹͸4UPSFΛ্࣋ͪ͛Δ
શҰཡ7JFX
׬ྃҰཡ
7JFX
ະ׬ྃҰཡ
7JFX
5P%P7JFX
6TFS7JFX
6TFS
ঢ়ଶ
3PPU7JFX
3PPUͰ͸ͳ͘
ඞཁͳ5P%P7JFX·Ͱ
্࣋ͪ͛Δ
Ҏ্Ͱ4JOHMF4PVSDFPG5SVUI
Λ࣮ݱͭͭ͠είʔϓΛ࠷௿ݶ
ʹͰ͖Δ
·ͨಛผͳϥΠϒϥϦ΍ػೳΛ
ඞཁͱ͠ͳ͍
શҰཡ
ঢ়ଶ
ΞʔΩςΫνϟͱͯ͠ͷ
4FMFDUPSͱ͍͏֓೦͸ඞཁͳ͍
ͷͰɺ७ਮʹϑΟϧλϦϯά͠
ͯ౉͢
UPEPT
fi
MUFS
UPEPEPOF

UPEPT
fi
MUFS
UPEPEPOF

6TFSʹ͸5P%Pঢ়ଶͷӨڹ
͕ͳ͘ͳΔ

View Slide

61

@StateObject private var tasks = Tasks()


VStack{

Text("શToDo")

TasksView(tasks: tasks.tasks, toggle: tasks.toggle)


TasksView(tasks: tasks.unCompleted, toggle: tasks.toggle)


TasksView(tasks: tasks.completed, toggle: tasks.toggle)

}

}

}
struct ContentView: View {


VStack{

UserView()

ToDoView()

}

}

}
5P%P7JFX͕5BTLTͷঢ়ଶΛ͍࣋ͬͯΕ͹Α͍
5P%P7JFX͔ΒԼҐͷίϯϙʔωϯτʹ౉͍ͯ͘͠
5P%P7JFXΑΓ্ͷ$POUFOU7JFX΍
ಉྻͷ6TFS7JFX͸5BTLͷঢ়ଶΛ
͍࣋ͬͯΔඞཁ͸ͳ͍

View Slide

62
w 3FEVDFSͷ༗༻ੑ
w 3FBDUDPSFνʔϜ͸ɺ4UPSF͕άϩʔόϧͰ͋Δඞཁ͸ͳ͍͕3FEVYͷ3FEVDFSͷΞΠσΞ͸
Α͔ͬͨͱߟ͑ͯϩʔΧϧεςʔτʹར༻͢ΔVTF3FEVDFSΛఏڙ͠·ͨ͠
w ϑϨʔϜϫʔΫͰ͸ͳ͘খ͍͞ϥΠϒϥϦ
w ͔͠͠3EVDFS͸ΦϓγϣϯͰඞਢͰ͸͋Γ·ͤΜ
w 5$"ͷ4UPSF3FEVDFS͸͜Εʹ͍ۙ
w ҧ͍͸&
ff
FDU
w 3FEVYͰ΋ෳ਺ͷ4UPSFΛ࡞੒͠4FMFDUPSΛ࢖Θͳ͚Ε͹ಉ͜͡ͱ͕࣮ݱͰ͖Δ
w ͔͠͠4XJGU6*Ͱ͸ɺ3FEVDFS͸ఏڙ͞Ε͍ͯ·ͤΜ

View Slide

63
w 4XJGU6*͔Β3FEVDFS͕ఏڙ͞Εͳ͍ཧ༝ ༧૝

w 3FBDUͷVTF3FVDFS͸ҎԼͷཧ༝Ͱఏڙ͞Ε
͍ͯ·͢
class Tasks :ObservableObject {

@Published var tasks: [Task] = []


get{


}

}


get{


}

}

func toggle(id: UUID){

tasks = tasks.map { task in

guard task.id == id else { return task }

var newTask = task


return newTask

}

}

func append(title: String){

tasks.append(Task(title: title, done: false))

}

}
3FEVDFSΛ࢖Θͣ͜ΕͰ΋Α͍
௨ৗɺuseReducer ͕ useState ΑΓ޷·͍͠ͷ͸ɺෳ਺ͷ஋
ʹ·͕ͨΔෳࡶͳ state ϩδοΫ͕͋Δ৔߹΍ɺ
લͷ state ʹج͍ͮͯ࣍ͷ state ΛܾΊΔඞཁ͕͋Δ৔߹Ͱ͢ɻ
Ҿ༻: https://ja.reactjs.org/docs/hooks-reference.html#usereducer
w 4XJGU6*Ͱ͸ɺ͜ΕΛ0CTFSWBCMF0CKFDUͰղ
ܾͰ͖Δ

View Slide

64
w 5$"ͱ0CTFSWBCMF0CKFDUͷίʔυൺֱ
enum ToDoAction: Equatable {

case append

case toggle(UUID)

}
let toDoReducer = Reducer { state, action, environment in

switch action {

case .append:

state.tasks += [Task(title: "௥Ճ", done: false)]

return .none

case let .toggle(id):

state.tasks = state.tasks.map { task in


var newTask = task


return newTask

}

return .none

}

}
struct ToDoState : Equatable {

var tasks: [Task] = []


get{


}

}


get{


}

}

}
class Tasks :ObservableObject {

@Published var tasks: [Task] = []


get{


}

}


get{


}

}

func append(title: String){

tasks.append(Task(title: title, done: false))

}

func toggle(id: UUID){

tasks = tasks.map { task in


var newTask = task


return newTask

}

}

}
5$"͸ؔ਺ܕ
0CTFSWBCMF0CKFDU͸001
ঢ়گ΍޷ΈʹԠͯ͡࢖͍෼͚͕Ͱ͖Δ

View Slide

65
w -JGUJOH4UBUF6QʹΑΓ44P5ΛकΓͳ͕Β࠷௿ݶͷείʔϓͰঢ়ଶ؅ཧ͕Ͱ͖ΔΑ͏ʹ
ͳΓ·ͨ͠ɻ
w ঢ়ଶ͕෼ࢄ͢ΔͨΊλΠϜτϥϕϧ͸Ͱ͖ͳ͘ͳΓ·͕͢ɺঢ়ଶͷείʔϓΛ࠷௿ݶʹ
ด͡Δ͜ͱΛ༏ઌ͢Δ͜ͱͰɺมߋ࣌ͷӨڹൣғ͕Θ͔Γ΍͘͢ͳΓίʔυͷՄಡੑ͕
্͕Γ·͢ɻ
w -JGUJOH4UBUF6Qͯ͠44P5ΛकΔ͜ͱͰɺ'MVYͰղܾ͔ͨͬͨ͠໰୊͸ͳ͘ͳΓ·ͨ͠
w 'MVYͷͱ͖ʹ͸ঢ়ଶ͕4JOHMF4PVSDFPG5SVUIͰ͸ͳ͘৑௕ͩͬͨͨΊɺෳ਺ͷ4UPSF
ʹରͯ͠%JTQBUDI͢Δඞཁ͕͋Γ·ͨ͠ɻ
w ͔͠͠44P5Λक͍ͬͯΕ͹ɺඞͣͭͷঢ়ଶΛߋ৽͢Δ͚ͩͰΑ͘ͳΓ·͢ɻ

View Slide

66
w ͦͷͨΊݱ୅ʹ͓͍ͯ'MVYʹ͍ͭͯݴٴ͢Δػձ͸গͳ͘ͳ͍ͬͯ·͢
w ͦͷΑ͏ͳதͰ΋ਖ਼نԽ͞Ε͍ͯͳ͍ෳ਺ͷ4UPSF͕͋ΓಉҰ"DUJPOΛෳ਺ͷ
3FEVDFS͕ड͚औΓɺͦΕͧΕͷ4UPSFΛߋ৽͢ΔΞʔΩςΫνϟΛ'MVYͱݴ͏͜ͱ
͸ద੾ͩͱࢥ͍·͢
w ͔͠͠ՄೳͳݶΓ4UPSFΛਖ਼نԽͯ͠44P5Λ࣮ݱ͢Δ͜ͱΛ͓͢͢Ί͠·͢
w 4UPSFɺ3FEVDFSɺ"DUJPO͸ͷؔ܎Λҡ࣋͠ɺͭͷ"DUJPO͔Β44P5ͳ4UPSFͩ
͚Λߋ৽͢ΔΞʔΩςΫνϟͷํ͕γϯϓϧͰ͢
w ͱ͸͍͑ɺ஋ʹΑͬͯ͸4UPSFͷਖ਼نԽ͕೉͘͠ɺ44P5ΛఘΊͨ͘ͳΔؾ࣋ͪ΋Θ
͔Γ·͢ʜ

View Slide

"1*ίʔϧͷঢ়ଶ؅ཧͷվળ

View Slide

68
એݴత6*ͷঢ়ଶ؅ཧΞʔΩςΫνϟͷྺ࢙"1*ίʔϧͷঢ়ଶ؅ཧͷվળ
4UBSU
'MVY 3FEVY
-JGUJOH
4UBUF6Q
5$"
3FEVY
5PPM,JU
35,
2VFSZ
(SBQI2-
3FBDU
2VFSZ
3FBDUDPSF
νʔϜͷࢥ૝
ΫϥΠΞϯτ
Ωϟογϡ
3FEVYͷվྑ
ϘΠϥʔ
ςϯϓϨʔτͷ࡟ݮ
3FDPJM
4UBUFߋ৽ͷ
4JOHMF4PVSDFPG5SVUI
ΫϥΠΞϯτ
ΫϥΠΞϯτ
"1*ίʔϧͷվળ

View Slide

69
w 3FEVYͷ'MVY4UBOEBSE"DUJPOͰ͸"1*ίʔϧͷMPBEJOH΍FSSPSͷঢ়ଶΛऔಘ͢Δ஋ͷ
4UBUFʹอ࣋͢Δ͜ͱ͕ҰൠతͰͨ͠
w 5$"Ͱ΋ಉ༷ʁ

View Slide

70
શҰཡ7JFX
4UPSF
UPEPҰཡ
UPEP"1*-PEJOH
UPEP"1*&SSPS
3FEVDFS
JGશҰཡදࣔ"DUJPO
TUBUFMPBEJOHUSVF
SFUVSO"1* lUPEPTz

JGશҰཡϨεϙϯε੒ޭ"DUJPO UPEPT

TUBUFUPEPҰཡUPEPT
TUBUFMPBEJOHGBMTF
JGશҰཡϨεϙϯεࣦഊ"DUJPO FSSPS

TUBUFUPEP"1*&SSPSFSSPS
TUBUFMPBEJOHGBMTF
શҰཡදࣔ
"DUJPO
w 5$"ͷ"1*ίʔϧͷঢ়ଶ؅ཧ
4UPSFʹMPBEJOHͱFSSPSঢ়ଶΛ࣋ͭ
͜ΕΒΛ3FEVDFS͔Βߋ৽

View Slide

71
w ݱࡏͰ͸ɺ3FBDUͷੈքͰ͸-PBEJOH΍&SSPSͷঢ়ଶ͸4UPSFʹ࣋ͭͷͰ͸ͳ͘ɺ"1*
ίʔϧΛݺͿ৔ॴͰঢ়ଶΛ࣋ͭ͜ͱ͕ҰൠతʹͳΓ·ͨ͠

View Slide

72
w ίʔυΠϝʔδ

@StateObject private var api = APIState {

// APIίʔϧ

}


Group {

if api.isLoading {

ProgressView()

} else if let error = api.error {

ErrorView(error: error)

} else {

// api.data.tasksΛ࢖ͬͯදࣔ

}

}

}

}
7JFXͷதͰ"1*4UBUFͷఆٛͱ"1*ͷ࣮ߦΛߦ͍ɺͦΕʹैͬͯ7JFXΛग़͠෼͚Δ

View Slide

73
"7JFX
3PPU7JFX
w "1*ͷঢ়ଶ؅ཧͷείʔϓͷҧ͍
#7JFX $7JFX
7JFXͷ֎ͷ4UBUF͕MPBEJOH΍FSSPSͷ
ঢ়ଶΛ࣋ͪείʔϓ͕޿͍
7JFXͷ಺෦ͷ4UBUF͕MPBEJOH΍FSSPSͷঢ়ଶ
Λ࣋ͭͷͰείʔϓ͕ڱ͍
"7JFX
-PBEJOH
&SSPS
%BUB
3PPU7JFX
#7JFX $7JFX
4UPSF
%BUB
-PBEJOH
&SSPS

View Slide

74
"7JFX
"1*ίʔϧ
3PPU7JFX
w ෳ਺ՕॴͰͷ"1*ίʔϧ
#7JFX
"1*ίʔϧ
$7JFX
"ͱ#͕ಉ࣌ʹ࣮ߦͨ͠৔߹ͷMPBEJOH΍
FSSPSͷߟྀ͕ඞཁ
"1*ίʔϧ͝ͱʹঢ়ଶΛ࣋ͭ
ಠཱ͍ͯͯ͠ͱͯ΋ࣗવͳঢ়ଶ
"7JFX
"1*ίʔϧ
-PBEJOH
&SSPS
%BUB
3PPU7JFX
#7JFX
"1*ίʔϧ
$7JFX
4UPSF
-PBEJOH
&SSPS
-PBEJOH
&SSPS
%BUB

View Slide

75
"7JFX
-PBEJOH
&SSPS
%BUB
3PPU7JFX
#7JFX $7JFX "7JFX
3PPU7JFX
#7JFX $7JFX
-PBEJOH
&SSPS
%BUB
w ଞͷίϯϙʔωϯτͰ΋-PBEJOH΍&SSPSΛ࢖͍͍ͨ৔߹͸ʁ
-JGUJOH4UBUF6Q͢Δ
#7JFXͰ΋
-PBEJOH΍&SSPSΛ
ද͍ࣔͨ͠
3PPU7JFXͰ"1*ίʔϧͯ͠ɺ
"ͱ7JFXʹ݁ՌΛ౉͢

View Slide

76
w "1*ίʔϧͷঢ়ଶ؅ཧͷվળʹΑΓɺ-PBEJOHͱ&SSPSঢ়ଶͷείʔϓΛ࠷௿ݶʹ཈͑Δ
͜ͱ͕Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠
w ·ͨ-PBEJOH΍&SSPSͷঢ়ଶ؅ཧͷ࣮૷Λ"1*ίʔϧ͝ͱʹ͢Δඞཁ͕ͳ͘ͳΓ·͢

View Slide

(SBQI2-

View Slide

78
એݴత6*ͷঢ়ଶ؅ཧΞʔΩςΫνϟͷྺ࢙(SBQI2-
4UBSU
'MVY 3FEVY
-JGUJOH
4UBUF6Q
5$"
3FEVY
5PPM,JU
35,
2VFSZ
(SBQI2-
3FBDU
2VFSZ
3FBDUDPSF
νʔϜͷࢥ૝
ΫϥΠΞϯτ
Ωϟογϡ
3FEVYͷվྑ
ϘΠϥʔ
ςϯϓϨʔτͷ࡟ݮ
3FDPJM
4UBUFߋ৽ͷ
4JOHMF4PVSDFPG5SVUI
ΫϥΠΞϯτ
ΫϥΠΞϯτ
"1*ίʔϧͷվળ

View Slide

79
w (SBIQ2-͸ɺΫϥΠΞϯταΠυ͔Β2VFSZΛૹ৴͢Δ͜ͱͰɺඞཁͳ஋Λ౓ͷϦΫ
ΤετͰऔಘ͢Δ͜ͱ͕ՄೳͱͳΔɻ
w ҎԼͷ໰୊Λղܾ
w ΦʔόʔϑΣον ඞཁͳ͍஋ͷऔಘ

w ΞϯμʔϑΣον ඞཁͳ஋͕଍Γͳ͍ͨΊʹෳ਺ͷ"1*Λݺͼग़͢

w 2VFSZͷ݁ՌΛड͚औΔϨεϙϯεͷܕ͸ɺ"QPMMPʹΑͬͯDPEFHFO͞ΕΔɻ
w ϨεϙϯεͷܕͱΫϥΠΞϯτͷܕͷಉظ͕อূ͞ΕΔ
w એݴతσʔλϑΣονϯά

View Slide

80
w 'BDFCPPL͕೥ʹ։ൃɺ೥ެ։ɻ
w ࣮͸ΞϓϦͷͨΊʹ։ൃͨ͠ͷ͕࢝·ΓͰ͢
w ೥'BDFCPPLͷJ04ɺ"OESPJEΞϓϦͷχϡʔεϑΟʔυʹ࠾༻
w ೥͘Β͍·Ͱ͸։ൃίϛϡχςΟʹ΄ͱΜͲཧղ͞Ε͍ͯ·ͤΜͰͨ͠
w 3FEVYͷ՝୊Λղܾ͢Δଘࡏͱͯ͠஫໨ΛूΊͨʁ
w ۙ೥Ͱ͸ଟ͘ͷاۀͰ࠾༻͍ͯ͠·͢
w 'BDFCPPLɺ(JU)VCɺ6CFSɺ/FU
fl
JYɺ"JSCOCɺ5XJUUFS
w 5XJUUFS"1*Wͷ3&45"1*͸ཪͰ(SBQI2-͕ಈ͍͍ͯ·͢

View Slide

81
w (SBQI2-ΫϥΠΞϯτͷϝϦοτ
w (SBQI2-ΫϥΠΞϯτ "QPMMP
ͷػೳͰɺ
(SBQI2-Ͱऔಘͨ͠2VFSZͷ݁ՌΛάϥϑߏ଄ͦ
ͷ··Ωϟογϡ͢Δ͜ͱ͕Մೳ
w εΩʔϚઃܭͰਖ਼نԽΛҙࣝ͢Δඞཁ͸ͳ͍
w άϥϑߏ଄ͷதͷΤϯςΟςΟ͸*%ͰҰҙͱ
ͳ͓ͬͯΓΫϥΠΞϯτΩϟογϡͰ͸ࣗಈత
ʹਖ਼نԽ͞ΕΔ
w ͜ΕʹΑΓ3FEVY΍5$"ͰඞཁͰ͋ͬͨਖ਼نԽ͠
ͨΩϟογϡΛࣗ෼Ͱ؅ཧ͢Δඞཁ͕ͳ͘ͳΔ
w ͦͷ͓͔͛ͰΞʔΩςΫνϟ͕ͱͯ΋γϯϓϧʹ
ͳΔ
query ToDoView {
todo {
id
all {
id
title
done
}
unCompleted {
id
title
done
}
completed {
id
title
done
}
}
}

View Slide

82
w ΫϥΠΞϯτΩϟογϡ
query ToDoView {
todo {
id
all {
id
title
done
}
unCompleted {
id
title
done
}
completed {
id
title
done
}
}
}
UPEP
*E
VO$PNQMFUFE
JE
UJUMF
%POF
DPNQMFUFE
JE
UJUMF
%POF
"MM
JE
UJUMF
%POF
άϥϑߏ଄ͷ··Ωϟογϡ͢Δ

View Slide

83
w ΫϥΠΞϯτΩϟογϡ
query CompletedToDoView {
todo {
id
completed {
id
title
done
}
}
}
UPEP
*E
VO$PNQMFUFE
JE
UJUMF
%POF
DPNQMFUFE
JE
UJUMF
%POF
"MM
JE
UJUMF
%POF
΋͠ઌ΄Ͳͷ5P%P7JFXΛදࣔͨ͋͠ͱʹ
$PNQMFUFE5P%P7JFX͕ϦΫΤετΛ౤͛Ε͹ɺ
DPNQMFUFE͸Ωϟογϡώοτ͢Δ
Ωϟογϡώοτ
Ωϟογϡώοτ

View Slide

84
w ΫϥΠΞϯτΩϟογϡඞཁ
w 3FEVY΍5$"ͰϖʔδΛදࣔ͢Δͨͼʹ"1*ίʔϧ͠ͳ͍Α͏ʹ͢ΔͨΊʹ4UPSF
ʹอଘ͢Δ͜ͱ͕ଟ͍
w ͜ΕΛ͢΂ͯࣗಈͰ΍ͬͯ͘ΕΔ΋ͷͱߟ͑Δͱྑ͍

View Slide

85
w (SBQI2-ʹΑΔΩϟογϡͷϝϦοτ
w σʔλม׵͕ෆཁʹͳΔ
w 3FEVY΍5$"Ͱݫີʹ΍Ζ͏ͱ͢ΔͱɺҎԼͷछྨͷม׵͕ඞཁͩͬͨ
w "1*Ϩεϙϯε༻ͷܕ
w ˠ4UPSFʹอଘ͢ΔͨΊͷ.PEFMͷܕ
w ˠ7JFXʹදࣔ͢ΔͨΊͷ7JFX.PEFMͷܕ

View Slide

86
w (SBQI2-ʹ͓͚Δܕͷҙࣝ
"1*ͷϨεϙϯεͷܕ
Ωϟογϡͷܕ
7JFXʹදࣔ͢ΔͨΊͷ7JFX.PEFMͷܕ
ม׵͕ඞཁͳ͍
query ToDoView {
todo {
...CompletedTasksViewFragment
}
}

@StateObject private var query = Query()


VStack {

if let data = query.response {

VStack {

CompletedTasksView(fragment:

ɹɹɹɹɹɹɹɹɹɹɹɹ data.todo.fragments.completedTasksViewFragment)

}

}

}

}

}
'SBHNFOUͱ͍͏ػೳͰ2VFSZͱ͸ผʹઐ༻ͷܕΛੜ੒͢Δ
ੜ੒͞Εͨ'SBHNFOUΛίϯϙʔωϯτͷϑΟʔϧυͱ͢Δ
ˠ'SBHNFOU$PMPDBUJPO
fragment CompletedTasksViewFragment on ToDo {
id
completed {
...TaskViewFragment
}
} .PEFM͝ͱʹ'SBHNFOUΛ࡞ΔͷͰ͸ͳ͘
7JFX͝ͱʹ࡞Δ͜ͱ͕େ੾
2VFSZ΍'SBHNFOU͔Βੜ੒͞Εͨܕ͸7JFX༝དྷͷܕͰ͋ͬͯɺ
.PEFM༝དྷͷܕͰ͸ͳ͍ɻ7JFXʹ౉ͯͦ͠ͷ··ར༻͢Δ
3&45ͷΑ͏ʹ.PEFMͷܕʹม׵ͯ͠͠·ͬͯ͸
(SBQI2-ͷϝϦοτ͕ଛͳΘΕΔ

View Slide

87
VStack {

Text("શToDo")

TasksView(fragment: data.todo.fragments.tasksViewFragment)


UnCompletedTasksView(fragment: data.todo.fragments.unCompletedTasksViewFragment)


CompletedTasksView(fragment: data.todo.fragments.completedTasksViewFragment)

}
query ToDoView {
todo {
...TasksViewFragment
...UnCompletedTasksViewFragment
}
}
7JFXͷίʔυɺσʔλϑΣονɺ࠷ऴతͳ6*͕ରԠ
એݴతσʔλϑΣονϯά
એݴత6*

View Slide

88
w (SBQI2-ͷ2VFSZͱ"1*ίʔϧͷঢ়ଶ؅ཧͷվળ

@StateObject private var query = Query()


VStack {

if query.fetching {

ProgressView()

} else if let errorContent = query.error?.content {

ErrorRetryButtonView(

error: errorContent,

retryAction: { query.refetch() }

)

} else if let data = query.response {

VStack {

Text("શToDo")

TasksView(fragment: data.todo.fragments.tasksViewFragment)


UnCompletedTasksView(fragment: data.todo.fragments.unCompletedTasksViewFragment)


CompletedTasksView(fragment: data.todo.fragments.completedTasksViewFragment)

}

}

}

}

}
"1*ίʔϧͷঢ়ଶ؅ཧͷվળͱ߹ΘͤΔͱɺͱͯ΋γϯϓϧʹը໘Λߏ੒Ͱ͖Δ
ΫΤϦʔҎ֎͸͜ͷͭͷը໘Ͱ׬͍݁ͯ͠Δ

View Slide

89
w 5$"ͱൺֱ࣮ͨ͠૷࣌ͷ࡞ۀ
w 5$"
w ϑΣον͢Δ஋ͷঢ়ଶΛ4UPSFʹఆٛ
w ਖ਼نԽΛݕ౼
w ϑΣον࣌ͷMPBEJOHͱFSSPSͷঢ়ଶΛ
4UPSFʹఆٛ
w ϑΣον͢ΔͨΊͷ"DUJPOΛఆٛ
w ϑΣον࣮ߦͷ࣮૷MPBEJOHΛ4UPSFʹ
ߋ৽
w ϑΣον͢ΔͨΊͷ&
ff
FDUΛఆٛ
w ϑΣονͨ݁͠ՌΛड͚Δ"DUJPOΛఆٛ
w ϑΣον݁ՌɺMPBEJOHɺFSSPSΛ4UPSF
ʹߋ৽
w 4UPSF͔Β7JFXʹϑΣονͨ͠஋Λ౉͢
w (SBQI2-
w ΫΤϦʔ΍ϑϥάϝϯτΛఆٛ
w ίʔυੜ੒
w 7JFXͰΫΤϦʔΛ࣮ߦͯ͠ϑΣον
w -PBEJOH FSSPS औಘ݁ՌΛ7JFXʹ౉͢
ݕ౼ࣄ߲ͱ࣮૷ྔ͕େ෯ʹ࡟ݮ͞ΕΔ
·ͨ
ݟͨ໨Λ࣮૷͢Δ 7JFXͷ࣮૷

ݟͨ໨ʹඞཁͳ஋Λߟ͑Δ 2VFSZͷهड़

ͱ͍͏։ൃऀͱͯ͠ۃΊͯࣗવͳࢥߟͱৼΔ෣͍Λ
௚઀తʹ࣮ࢪ͢Δ͚ͩͰը໘Λ࡞Δ͜ͱ͕Ͱ͖Δ

View Slide

90
w (SBQI2-ͷNVUBUJPOͱ"1*ίʔϧͷঢ়ଶ؅ཧͷվળ
struct TaskView: View {

@StateObject private var toggleMutation = Mutation()

let task: GraphQL.TaskViewFragment


HStack {

Text(task.title)

Spacer()

Button(action: {

toggleMutation.perform(input: .init(id: task.id))

}) {

if toggleMutation.executing {

ProgressView()

} else if task.done {

Image(systemName: "checkmark.square.fill")

.foregroundColor(.green)

} else {

Image(systemName: "square")

}

}

}

}

}
NVUBUJPO΋γϯϓϧʹ࣮૷είʔϓΛด͡Δ͜ͱ͕Ͱ͖Δ

View Slide

91
w Ҏ্Ͱɺ࠷ॳʹఆٛͨ͠ཧ૝తͳΞʔΩςΫνϟΛ࣮ݱͰ͖·ͨ͠
w ΞʔΩςΫνϟ΍ϑϨʔϜϫʔΫͷΑ͏ͳେ͖ͳ࿮૊ΈΛఆٛͨ͠ͱ͍͏ΑΓ͔͸ɺγ
ϯϓϧͳݪཧݪଇΛੵΈ্͛ͨίʔυͱ͍͏ํ͕ద੾͔΋͠Ε·ͤΜ
w ஫ҙࣄ߲
w ࠓճͷίʔυ͸BQPMMPJPTΛಋೖ͢Δ͚ͩͰ͙͢ʹ࣮ݱͰ͖Δͱ͍͏Θ͚Ͱ͸͋Γ·
ͤΜɻ
w 8FCͷ"QPMMP͕͜ͷΑ͏ͳΠϯλʔϑΣʔεΛ͓࣋ͬͯΓɺBQPMMPJPT͕ͦΕʹ४ڌ
Ͱ͖ΔΑ͏ʹ"QQJGZͰϥούʔΛ࣮૷͍ͯ͠·͢ɻ
w BQPMMPJPTW͕ϦϦʔε͞ΕͨΒϥούʔͷ࣮૷͕ෆཁʹͳΔ͔΋͠Ε·ͤΜ

View Slide

92
w .VUBUJPO࣮ߦ࣌ͷαʔόͱΫϥΠΞϯτΩϟογϡͷಉظ
w .VUBUJPOʹΑΓαʔόͷ5P%Pঢ়ଶΛม͑ͨͱ͖ʹ͸ɺΫϥΠΞϯτΩϟογϡͷ
σʔλΛߋ৽͢Δ͜ͱͰ7JFXͱαʔόͷঢ়ଶΛಉظ͢Δඞཁ͕͋Δ
5BTLT7JFX
5BTL7JFX
Ωϟογϡ
αʔό
UPHHMF5P%P JE

$PNQMFUFE
5BTLT7JFX
6O$PNQMFUFE
5BTLT7JFX
λεΫʹνΣοΫΛ͍ΕͨΒҎԼ͕ඞཁ
શ5P%PͷλεΫʹνΣοΫ
ະ׬ྃ5P%P͔ΒͷλεΫΛআ֎
׬ྃࡁΈ5P%P΁௥λεΫΛ௥Ճ

View Slide

93
5BTLT7JFX
5BTL7JFX
Ωϟογϡ
αʔό
UPHHMF5P%P JE

mutation ToggleTodo($input: ToggleToDoInput!) {
toggleToDo(input: $input) {
todo {
...TasksViewFragment
...UnCompletedTasksViewFragment
}
}
}
(SBQI2-Ͱ͸.VUBUJPOͷϨεϙϯεʹΑΓࣗಈత
ʹΩϟογϡ͕ߋ৽͞Εɺଓ͍ͯ7JFX΋ࣗಈతʹ
࠶ϨϯμϦϯά͞ΕΔ
Ϩεϙϯε
Ϩεϙϯε͔Β
Ωϟογϡߋ৽
࠶ϨϯμϦϯά
w .VUBUJPO͔ΒͷΩϟογϡߋ৽
7JFXʹରԠͨ͠'SBHNFOUΛϨεϙϯεͰฦ͢
3FEVY΍5$"Ͱ͸ߋ৽͢ΔίʔυΛॻ͘ඞཁ͕͋
Δ͕ɺ(SBQI2-Ͱ͸NVUBUJPOͷ࣮ߦҎ֎ʹ͢Δ͜
ͱ͸ͳ͍

View Slide

94
5BTLT7JFX
5BTL7JFX
Ωϟογϡ
αʔό
UPHHMF5P%P JE

BQPMMPͰ͸0QUJNJTUJD6*Λ࣮ݱ͢ΔͨΊʹɺ
NVUBUJPOͷૹ৴ͱಉ࣌ʹΩϟογϡͷߋ৽͕Մೳ
Ϩεϙϯε
w .VUBUJPOͷϨεϙϯεͷલʹ7JFXΛߋ৽͍ͨ͠৔߹
w νΣοΫϘοΫεΛλοϓͨ͠Β͙͢ʹ7JFXʹ൓ө͍ͨ͠
Ωϟογϡߋ৽
࠶ϨϯμϦϯά
ϨεϙϯεʹΑΔ
Ωϟογϡߋ৽
ϨεϙϯεʹΑΔ
࠶ϨϯμϦϯά

View Slide

95
w ͦͷଞͷ(SBQI2-ͷϝϦοτ
w σβΠϯͷϢʔεέʔεʹҾͬுΒΕͯɺ"1*Λมߋ͢Δඞཁ͕ͳ͍
w ΫϥΠΞϯτʮը໘9ʹ:Λදࣔ͢Δඞཁ͕Ͱ͖ͨͷͰɺ9"1*Ͱ:ΛҾ͖͍ͨʯ
w 3&45ύλʔϯΫϥΠΞϯτଆ͕ଥڠ͢Δ৔߹
w όοΫΤϯυʮ9"1*ͷ੹຿͔Β:͸֎ΕΔͷͰ:"1*Λ࣮ߦͯ͠ཉ͍͠ʯ
w ΫϥΠΞϯτʮ9"1*ͱ:"1*ճ࣮ߦ͢Δ͔ʜ355Ͱ69མͪ͠ίʔυ΋ෳࡶʹͳΔͳʯ
w 3&45ύλʔϯόοΫΤϯυଆ͕ଥڠ͢Δ৔߹
w όοΫΤϯυʮ9"1*Ͱ:ฦ͢Α͏ʹ͢Δ͔ʜ੹຿ͱͯ͠ҧ࿨ײ͋Δ͠ɺଞͷը໘Ͱ࢖Θͳ͍ͷ
ʹ༨ܭͳ3FBE૿͑Δͳɻ΋͘͠͸ઐ༻ͷ9:"1*௥Ճ͢Δ͔ʜʯ
w (SBQI2-ͷ৔߹ΫϥΠΞϯτόοΫΤϯυͲͪΒ΋޾ͤ
w όοΫΤϯυʮը໘9༻ʹ9ͱ:ΛҾ͘2VFSZΛॻ͍ͯऔಘ͍͍ͯ͠Αଞͷը໘Ͱ͸9͚ͩΛҾ͘
2VFSZॻ͚͹ຖճ:ΛҾ͘ඞཁͳ͍͔ΒύϑΥʔϚϯεͷ໰୊΋ͳ͍Αʯ
w ΫϥΠΞϯτʮ355ͰࡁΉ͠ɺίʔυ͸γϯϓϧɺը໘Ͱඞཁͳ஋͢΂ͯऔಘͰ͖ͯخ͍͠ʯ
w
όοΫΤϯυΤϯδχΞͱͯ͠ͷ
(SBQI2-࠷େͷϝϦοτ

View Slide

96
w (SBIQ2-ͷ໰୊఺
w όοΫΤϯυ͕(SBQI2-Ͱ࣮૷͞Ε͍ͯΔ͜ͱ͕ඞਢ
όοΫΤϯυνʔϜͷ"1*αʔόΛ(SBQI2-ʹͯ͠΋Β͏
όοΫΤϯυνʔϜʹ(SBQI2-ͷ#''Λ༻ҙͯ͠΋Β͏
ΫϥΠΞϯτνʔϜͰڠྗͯ͠(SBQI2-ͷ#''Λ༻ҙ͢Δ
w νʔϜঢ়گʹΑΔͱࢥ͍·͕͢ɺ৽نͳΒ͕͓͢͢ΊͰ͢ɻ
w طଘͷ3&45΍H31$ͷ.JDSPTFSWJDFT͕͋Δ৔߹͸ɺ͔ʹͳΔͱࢥ͍·͢ɻ
w ฐࣾ͸৽ن։ൃͰͰ͕͢ɺόοΫΤϯυͷ(SBQI2-։ൃ޻਺ΛؚΊͯ΋νʔϜͱͯ͠
ͷ։ൃ޻਺͸େ෯ʹ࡟ݮͰ͖͍ͯ·͢ɻ
w ·ͨόοΫΤϯυ୯ମͰߟ͑ͯ΋։ൃ޻਺͸Լ͕͍ͬͯΔͱೝ͍ࣝͯ͠·͢ɻ
w 3PQQPOHJ(SBQI2-ͷಈըͰɺ(SBQI2-࠾༻اۀ͕࿩͍ͯ͠ΔͷͰͥͻ͝ཡ͍ͩ͘͞

View Slide

97
w BQPMMPJPTͷ໰୊఺
w ൃల్্
w ੜ੒͞ΕΔίʔυαΠζ͕େ͖͘Ϗϧυ͕஗͍
w ੜ੒͞ΕΔ഑ྻ͕JEFOUJ
fi
BCMFͰ͸ͳ͍ͷͰ࣮૷͢Δඞཁ͕͋Δ
w $PEBCMFະରԠ
w 8FC൛ͷ"QPMMPʹൺ΂Δͱػೳ͕ෆ଍
w ϖʔδωʔγϣϯ
w એݴత6*ʹదͨ͠ΠϯλʔϑΣʔε
w -PDBMTUBUF
w ݱࡏBQPMMPJPTWͷ։ൃ͕ਐΜͰ͍ΔͷͰظ଴

View Slide

98
༨ஊίϯϙʔωϯτ֊૚ͷεΩοϓ
w 3FEVYͰ͸άϩʔόϧεςʔτʹϨεϙϯεͷ݁ՌΛอ͍࣋ͯ͠Δ͕ɺίϯϙʔωϯτ
֊૚ͷεΩοϓ͸ਪ঑͞Εͳ͍͜ͱ͕͋Δ
w ঢ়ଶͱίϯϙʔωϯτͷґଘؔ܎͕Θ͔ΓͮΒ͘ͳΔ
w ϨϯμϦϯά͕ฒߦͯ͠ߦΘΕΔΑ͏ʹͳΔͱ͖ʹݒ೦͕͋Δ
3PPU7JFX
6TFS7JFX
1SPEVDU
7JFX
4UPSF͔Β6TFS7JFX΁௚઀౉͢͜ͱ͸
ճආ͢Δ΂͖ʁ
4UPSF
6TFS৘ใ
6TFS
3PPU7JFX
6TFS7JFX
1SPEVDU
7JFX
4UPSF
6TFS৘ใ
3PPU7JFX͸6TFS͸
ෆཁ͚ͩͲܦ༝͢Δ
6TFS
6TFS
εΩοϓ͠ͳ͍৔߹
εΩοϓ͢Δ৔߹

View Slide

99
3PPU7JFX
6TFS7JFX
1SPEVDU
7JFX
4UPSF
6TFS৘ใ
6TFS
3FEVY
(SBQI2-
3PPU7JFX
6TFS7JFX
1SPEVDU
7JFX
6TFS
(SBQI2-͸ΫΤϦʔͰ
௚઀औಘ͢ΔͨΊεΩοϓ͕ͳ͍
ͷͰ໰୊͸ͳ͍
ຊ౰ʜʁ

View Slide

100
3PPU7JFX
6TFS7JFX
1SPEVDU
7JFX
4UPSF
6TFS৘ใ
6TFS
3FEVY
(SBQI2-
3PPU7JFX
6TFS7JFX
1SPEVDU
7JFX
6TFS
(SBQI2-
Ωϟογϡ
6TFS৘ใ
w ࣮ࡍʹ͸(SBQI2-ʹ΋άϩʔόϧͳΩϟογϡ͕ଘࡏ͍ͯͯ͠ɺ͔ͦ͜Βऔಘ͍ͯ͠ΔͷͰ
֓೦తʹ͸άϩʔόϧεςʔτ͔ΒεΩοϓ͍ͯ͠ΔͷͱมΘΒͳ͍ͷͰ͸ʁ
w ࣗ෼ͱͯ͠͸ɺϨεϙϯεΩϟογϡʹ͍ͭͯ͸3FEVYͷ৔߹εΩοϓͯ͠΋͠ΐ͏͕ͳ͍
ͱߟ͍͑ͯ·͢ɻ͕͢͞ʹ͢΂ͯͷ஋Λϧʔτ͔Β1SPQ%SJMMJOH͢Δ։ൃମݧ͸ਏ͍ͱࢥ͍
·͢ʜͱ͸͍͑ࠓޙͦ͏͠ͳ͍ͰࡁΉํ๏͸໛ࡧ͍ͯ͘͠ඞཁ͕͋Δͱ͸ࢥ͍·͢ɻ
྆ऀʹେ͖ͳҧ͍͸ͳ͍ʁ

View Slide

101
3PPU7JFX
.PEBM7JFX
1SPEVDU
7JFX
4UPSF
JT0QFO
JT0QFO
3FEVY
w ͨͩ΋ͪΖΜ7JFXͷঢ়ଶͳͲΛ4UPSFʹ഑ஔͯ͠ɺεΩοϓ͢Δ͜ͱ͸είʔϓ͕޿͕
Γґଘؔ܎Λᐆດʹ͢Δ͜ͱʹܨ͕ΔͷͰɺՄೳͳݶΓճආͨ͠ํ͕ྑ͍ͱࢥ͍·͢
3PPU7JFX
.PEBM7JFX
1SPEVDU
7JFX
4UPSF
JT0QFO
ඞཁͳίϯϙʔωϯτ͕
ঢ়ଶΛ࣋ͯ͹े෼

View Slide

102
w (SBIQ2-ʹΑͬͯঢ়ଶͷଊ͑ํ͕େ͖͘มΘΓ·ͨ͠
w ϨεϙϯεΩϟογϡͱͦΕҎ֎ͷঢ়ଶ 7JFXͷঢ়ଶͳͲ

w (SBQI2-ΫϥΠΞϯτ͸ɺϨεϙϯεͷঢ়ଶ؅ཧΛΩϟογϡͱͯ͠࠷దͳܗͰ؅ཧ
͢Δ͜ͱΛఏҊ
w ਖ਼نԽɺܕม׵ɺΩϟογϡͷߋ৽ͷ࣮૷͕ෆཁ
w એݴత6*(SBQI2-ͰଞͷΫϥΠΞϯταΠυͷίʔυͱύϥμΠϜΛ౷ҰͰ͖Δ
w "QQJGZͷίʔυ͸8FCɺ"OEPJSEɺJ04ͲΕ͔ॻ͚Ε͹શ෦ͷίʔυ͕ಡΊ·͢
w ࠓճઆ໌ͨ͠Ҏ֎ʹ΋(SBIQ2-ʹ͸ศརͳػೳ͕ଟ͘ଘࡏ͠·͢
w ͦͯ͠·ͩൃల్্ͳͷͰࠓޙͷ੒௕ʹ΋ظ଴͍ͯ͠·͢

View Slide

"GUFS(SBQI2-

View Slide

104
એݴత6*ͷঢ়ଶ؅ཧΞʔΩςΫνϟͷྺ࢙"GUFS(SBQI2-
4UBSU
'MVY 3FEVY
-JGUJOH
4UBUF6Q
5$"
3FEVY
5PPM,JU
35,
2VFSZ
(SBQI2-
3FBDU
2VFSZ
3FBDUDPSF
νʔϜͷࢥ૝
ΫϥΠΞϯτ
Ωϟογϡ
3FEVYͷվྑ
ϘΠϥʔ
ςϯϓϨʔτͷ࡟ݮ
3FDPJM
4UBUFߋ৽ͷ
4JOHMF4PVSDFPG5SVUI
ΫϥΠΞϯτ
ΫϥΠΞϯτ
3FBDU2VFSZͱ35,2VFSZͷొ৔

View Slide

105
w (SBQI2-ͷීٴʹΑΓ։ൃίϛϡχςΟ͸͋Δ͜ͱʹؾ͕͖ͭ·ͨ͠ɻ
w ঢ়ଶΛάϩʔόϧεςʔτʹ͔࣋ͪͨͬͨΘ͚Ͱ͸ͳ͍
w 3&45Ͱ΋ಉ͡Α͏ͳ͜ͱ͕࣮ݱͰ͖Δʁ
զʑ͕࣮ݱ͔ͨͬͨ͜͠ͱ͸ɺ"1*ϨεϙϯεΛ
Ωϟογϡ͢Δ͜ͱͩͬͨͷͰ͸ʂʁ

View Slide

106
w ͦΕʹΑΓීٴͨ͠ͷ͕3FBDU2VFSZ΍35,2VFSZͳͲͷϥΠϒϥϦͰ͢ɻ
w 3FBDU2VFSZ͸γϯϓϧʹ3&45ͰΩϟογϡͰ͖ΔΑ͏ʹͨ͠ϥΠϒϥϦͰ͢ɻ
w ΋͠ࠓ·Ͱ3FEVYΛ"1*ϨεϙϯεΩϟογϡͷͨΊ͚ͩʹར༻͍ͯͯ͠3FBDU
2VFSZΛ࠾༻ͨ͠ͳΒ͹3FEVY͕ෆཁʹͳΔ
w 4XJGUʹ͸ӨڹΛड͚ͨGNP1JHFPO͕͋Γ·͢ ීٴ͍ͯ͠ΔΘ͚Ͱ͸ͳ͍

w 35, 3FEVY5PPM,JU
2VFSZ͸ɺ3FEVYͰΩϟογϡΛͰ͖ΔΑ͏ʹͨ͠ϥΠϒϥϦ
Ͱ͢ɻ
w 3FEVYΛ"1*ϨεϙϯεҎ֎ͷ༻్Ͱ࢖͍ͬͯͨ৔߹ͳͲɺ3FEVYΛ࢖͍ͳ͕ΒϨ
εϙϯεΩϟογϡΛར༻͢Δ৔߹ʹར༻͠΍͍͢
w ͔͜͠͠ΕΒ͸(SBQI2-Ͱ͸ͳ͍ͨΊਖ਼نԽ͕Ͱ͖ΔΘ͚Ͱ͸ͳ੍͘໿͕͋Γ·͢ɻ

View Slide

3FDPJM

View Slide

108
એݴత6*ͷঢ়ଶ؅ཧΞʔΩςΫνϟͷྺ࢙3FDPJM
4UBSU
'MVY 3FEVY
-JGUJOH
4UBUF6Q
5$"
3FEVY
5PPM,JU
35,
2VFSZ
(SBQI2-
3FBDU
2VFSZ
3FBDUDPSF
νʔϜͷࢥ૝
ΫϥΠΞϯτ
Ωϟογϡ
3FEVYͷվྑ
ϘΠϥʔ
ςϯϓϨʔτͷ࡟ݮ
3FDPJM
4UBUFߋ৽ͷ
4JOHMF4PVSDFPG5SVUI
ΫϥΠΞϯτ
ΫϥΠΞϯτ
3FDPJM͸'BDFCPPL੡ϥΠϒϥϦ
3FBDUDPSFνʔϜఏڙͰ͸ͳ͍ͷͰ3FBDUެࣜϥΠϒϥϦͰ͸ͳ͍
(SBQI2-ΫϥΠΞϯτͷ3FMBZͷ։ൃ͸3FBDUDPSFνʔϜ

View Slide

109
w -JGUJOH4UBUF6Qͷ໰୊఺
w ࠶ϨϯμϦϯάͷ໰୊΋͋Δ
શҰཡ7JFX
׬ྃҰཡ
7JFX
ະ׬ྃҰཡ
7JFX
5P%P7JFX
6TFS7JFX
6TFS
ঢ়ଶ
3PPU7JFX
શҰཡ
ঢ়ଶ
7JFXͷ֊૚ͱঢ়ଶͷ఻೻ͷ֊૚
͕ඥ͍͍ͮͯΔ
UPEPT
fi
MUFS
UPEPEPOF

UPEPT
fi
MUFS
UPEPEPOF

View Slide

110
w 3FDPJMͰ͸7JFXͱ͸ಠཱͯ͠ɺঢ়ଶͱ4FMFDUPSΛఆٛͰ͖Δ
w ൺֱత௚ײతͰૉ௚ʹཧղͰ͖Δ
શҰཡ7JFX
׬ྃҰཡ
7JFX
ະ׬ྃҰཡ
7JFX
5P%P7JFX
શҰཡ
ঢ়ଶ
UPEPT
fi
MUFS
UPEPEPOF

UPEPT
fi
MUFS
UPEPEPOF

View Slide

111
w 7JFXͱঢ়ଶΛಠཱͤͯ̏࣍͞ݩతʹଊ͑ΒΕΔΑ͏ʹͳͬͨͱߟ͑Δͱཧղ͠΍͍͢Ͱ
͢

View Slide

112
w (SBQI2-ͳͲͷΫϥΠΞϯτΩϟογϡͱ͸ҟͳΔ՝୊Λղܾ͢Δ
w 7JFXͳͲαʔόʹ͸ͳ͍ঢ়ଶΛ࣋ͭΞϓϦέʔγϣϯͰ༗ޮ
w (SBQI2-ͳ͠ͰΩϟογϡΛ͢ΔͨΊʹ3FEVYͷ୅ΘΓʹ3FDPJMΛ࢖͏͜ͱ΋Ͱ͖Δ
w ·ͨVTF3FEVDFSͷొ৔Ҏ߱3FEVDFS͸ඞਢͷ΋ͷͰ͸ͳ͘ɺ࣮૷खஈͷͭͱͯ͠ೝࣝ
͞ΕΔΑ͏ʹͳͬͨͨΊɺ3FDPJMͰ΋γϯϓϧͳTFU4UBUFܗࣜͱSFEVDFSܗࣜ͸બ୒͢Δ
͜ͱ͕Մೳͱͳ͍ͬͯΔɻ
w ͜Εʹ֘౰͢Δීٴ͍ͯ͠ΔϥΠϒϥϦ͸4XJGUʹ͸ͳ͍͸ͣͳͷͰɺࠓޙཁ஫໨

View Slide

ۙ೥ͷΞʔΩςΫνϟͷ܏޲

View Slide

114
w 8FCओʹ64ͷΤϯδχΞ
w 9͕࣠ຬ଍౓
w :͕࣠࢖ͬͨ͜ͱ͕͋Δ͔
w ંઢ͸೥͝ͱͷਪҠ
w ݁Ռ
w 3FEVYܦݧऀ͸ଟ͍
w ׂ
w (SBQI2-ܦݧऀ͸೥࿈ଓ૿Ճ
w ׂ
w 3FEVYͷຬ଍౓͸௿Լ܏޲
w (SBQI2-͸ׂ͕ۙ͘ຬ଍͍ͯ͠Δ
w ଞٕज़ͷதͰ΋τοϓ
w ࠓޙ͸ར༻Ϣʔβ͕૿͑ͯ௿Լ͕༧
૝͞ΕΔ
Ҿ༻5IF4UBUFPG+BWB4DSJQU4VSWFZ
IUUQTTUBUFPGKTDPNKB+1

View Slide

115
w J044XJGU6*
w 5$"͕ීٴ͍ͯ͠Δʁ
w ࠓޙ(SBQI2-ͳͲͷϨεϙϯεΩϟογϡ੎ͷಈ޲ʹཁ஫໨
w "OESPJE+FUQBDL$PNQPTF
w +FUQBDL$PNQPTFDPSFνʔϜʹ͸ҎԼͷϝϯόʔ͕ࡏ੶
w ݩ3FBDUDPSFνʔϜͷΤϯδχΞ
w ݩ"JSCOCͷ3FBDUΤϯδχΞ
w 3FBDUಉ౳Ҏ্ͷ͜ͱ͕Ͱ͖ΔͷͰ3FBDUͰ࿩୊ʹͳͬͨΞʔΩςΫνϟ΍ઃܭ͸ద
༻Մೳ
w ৽͍ͨ͠Ίɺ·ͩྲྀߦ͍ͬͯΔΞʔΩςΫνϟ͸ͳ͍ҹ৅
w ࠓޙ.77.ɺ3FEVYͳͲͷద༻ݕূ͕࢝·Δ͸ͣ

View Slide

116
w $MFBO"SDIJUFDUVSF
w ͜Ε͸ঢ়ଶ؅ཧͷΞʔΩςΫνϟͰ͸ͳ͍ͷͰผ్࠾༻͢Δ͜ͱ΋ෆ࠾༻ͱ͢Δ͜ͱ
΋Ͱ͖·͢ɻ
w ࠷ॳ͸͋ͷਤΛ͢΂ͯ࠶ݱ͢Δ͜ͱ͸ͤͣʹඞཁͳͱ͜ΖʹϞοΫΛͤ͞ΔΑ͏ʹ͠
͓͚ͯͩ͘Ͱे෼ͩͱࢥ͍·͢
w ·ͨ"QPMMPͳͲͷϥΠϒϥϦ͕.PDLͷػೳΛ͍࣋ͬͯΕ͹ͦΕͰे෼͔΋͠Ε·
ͤΜ
w ·ͨ7JFXΛಠཱͤ͞Δ͜ͱ͕໨తͰ͋Ε͹1SFTFOUBUJPOBM$PNQPOFOU 4UBUFMFTT
$PNQPOFOU
ͱ$POUBJOFS$PNQPOFOU 4UBUFGVM$PNQPOFOU
ʹ෼ׂ͢Δͱ͜Ζ͔Β࢝
Ίͯ΋ྑ͍͔΋͠Ε·ͤΜɻ
w ͨͩ͜͠Ε΋͢΂ͯʹద༻͢Δͱ͍͏ํ਑͸͓קΊ͠·ͤΜ

View Slide

ͲͷΞʔΩςΫνϟ͕ྑ͍ͷ͔ʁ

View Slide

118
͓͢͢Ίͳબ୒ࢶ
w -JGUJOH4UBUF6Qͱ0CTFSWBCMF0CKFDU
w ࢝Ί͸໰୊ͳ͍ݶΓ͜Ε͚ͩΛҙࣝͯ͠։ൃͯ͘͜͠ͱΛ͓͢͢Ί͠·͢
w ಛʹϨεϙϯεΩϟογϡ͕ෆཁͳ৔߹͸ɺ͜Ε͚ͩͰे෼Ͱ͠ΐ͏
w ·ͣ͸ެࣜͱͯ͠ਪ঑͍ͯ͠Δجຊతͳ΍ΓํΛཧղ͢Δ͜ͱΛ༏ઌ͍ͯͩ͘͠͞
w ࠷ॳ͔Βʮ999ΞʔΩςΫνϟΛ࠾༻ʂʯͱ͍͏͜ͱ͸͓͢͢Ί͠·ͤΜ
w ೉͘͠ߟ͑ͯϋʔυϧΛ্͛ͳ͍Α͏ʹ͠·͠ΐ͏
w ΧϓηϧԽɺείʔϓͷݶఆɺϦʔμϏϦςΟɺ࣮૷޻਺ɺγϯϓϧ͞ɺJNVUBCJMJUZɺ
ςελϏϦςΟͳͲϓϩάϥϜͷݪଇΛݩʹࣗ਎ͰࢼߦࡨޡΛॏͶ͍ͯͩ͘͞
w ΞʔΩςΫνϟ͸*NNVUBCJMJSUZ΍ςελϏϦςΟͷਖ਼͠͞ʹ஫໨͗͢͠Δ܏޲͕͋
ΔͷͰؾΛ͚͍ͭͯͩ͘͞
w ਖ਼͠͞ͷͨΊʹΞʔΩςΫνϟΛ࠾༻͢ΔͷͰ͸ͳ͘ɺجຊΛ΍্͍ͬͯ͘Ͱࣗ਎Ͱ
՝୊Λମݧͯ͠ɺͦͷ՝୊Λղܾ͢ΔͨΊʹ࣍ͷखஈΛ୳͍ͯͩ͘͠͞

View Slide

119
͓͢͢Ίͳબ୒ࢶ
w 5IF$PNQPTBCMF"SDIJUFDUVSF
w 3FEVDFS΍&
ff
FDUʹັྗΛײͨ͡Βঢ়ଶߋ৽ϧʔϧΛ5$"ʹै͏
w 3PPUʹͭͷ4UPSFΛ഑ஔ͢ΔͷͰ͸ͳ͘খ͍͞είʔϓʹ4UPSFΛఆ͍ٛͯ͘͜͠
ͱΛ͓͢͢Ί͠·͢
w ϨεϙϯεΩϟογϡʹ͍ͭͯ͸ɺ3PPUʹͭͷ4UPSFΛ഑ஔ͢Δબ୒ࢶΛݕ౼͠
ͯ΋Α͍͔΋͠Ε·ͤΜ
w "1*ίʔϧΛ5$"ͷ&
ff
FDUͰ؅ཧ͢Δ৔߹
w "1*ͷMPBEJOH΍FSSPSͷঢ়ଶ͸5$"ʹ഑ஔ͠ɺ"TZOD༻ͷؔ਺Λ༻ҙ͠ͳ͍ɻ
w ௥ՃͰϨεϙϯεΩϟογϡͰ͖ΔϥΠϒϥϦΛ࠾༻͢Δ৔߹
w Ωϟογϡ͸5$"Ͱ͸ͳ͘ϥΠϒϥϦʹ೚ͤΔ
w "1*ͷMPBEJOH΍FSSPSͷঢ়ଶ΋5$"ʹ͸ஔ͔ͣʹ"TZOD༻ؔ਺Λ࡞Δ
w ͜Ε͸ࢲͷҙݟͳͷͰ5$"ͷηΦϦʔ͸10*/5'3&&Λ֬ೝ͍ͯͩ͘͠͞
w &
ff
FDU΋ؚΊͨςελϏϦςΟͳͲ͸ࣦΘΕ·͢ɻ

View Slide

120
͓͢͢Ίͳબ୒ࢶ
w (SBQI2-"QPMMP
w (SBQI2-Λ࠾༻͍ͯ͠ΔͳΒ໎Θͣ͜Ε
w (SBQI2-ͷϨεϙϯεΩϟογϡ7JFXͷঢ়ଶ͸-JGUJOH4UBUF6Q
w ϨεϙϯεΩϟογϡҎ֎ͷঢ়ଶ؅ཧʹ5$"Λ࠾༻͢Δͱ΋Ͱ͖Δ

View Slide

121
·ͱΊ
w 4XJGU6*Λϕʔεʹɺ(SBQI2-ʹΑΔϨεϙϯεΩϟογϡɺ-JGUJOH4UBUF6Qɺ"1*
ίʔϧͷվળΛ͢Δ͜ͱͰͱͯ΋γϯϓϧʹ࣮૷Ͱ͖Δ͜ͱΛ঺հ͠·ͨ͠
w ͜ΕΒ͸ΞʔΩςΫνϟͱ͍͏ΑΓ͔͸γϯϓϧͳݪଇͰ͋ΓɺͦΕͧΕ͸೉͍͠΋ͷ
Ͱ͸͋Γ·ͤΜɻ
w ΞʔΩςΫνϟΛݕ౼͢Δͱ༗໊ͳΞʔΩςΫνϟͷਤʹै͍ਖ਼͘͠ίʔυΛ෼ׂ͢Δ
ํ๏Λߟ͑Δ͜ͱ͕໨తʹͳͬͯ͠·͏͜ͱ͕͋Γ·͢ɻ
w ͔͠͠େ੾ͳ͜ͱ͸՝୊Λղܾ͢Δ͜ͱͰ͢ɻ
w ࠓճ͸෼ׂํ๏͚ͩͰ͸ͳ͘ΞʔΩςΫνϟ͕ղܾͨ͠՝୊Λ͓఻͑͢Δ͜ͱͰɺ͝
ࣗ਎Ͱ͔ΒΞʔΩςΫνϟͷඞཁੑΛݕ౼͢Δ͖͔͚ͬʹͳΕ͹خ͍͠Ͱ͢ɻ

View Slide

122
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
4QFBLFS%FDLͷ֓ཁཝʹؔ࿈εϥΠυΛܝࡌ͍ͯ͠·͢

View Slide

宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践/swiftui-graphql

宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践/swiftui-graphql

sonatard

More Decks by sonatard

Other Decks in Programming

Featured

Transcript