オブジェクト指向のプラクティスをフロントエンドで活用する

Transcript

1. ΦϒδΣΫτࢦ޲ͷϓϥΫςΟεΛ ϑϩϯτΤϯυͰ׆༻͢Δ 2023/06/14 KFUG Web Creators Meetup #2 @nkgrnkgr
2. ໨࣍ • ࣗݾ঺հ • ࠓ೔࿩͢͜ͱ • લఏͱ͔എܠͱ͔ • ϙϦϞʔϑΟζϜʢଟଶੑʣ • ґଘੑ஫ೖʢDependency Injectionʣ
3. Nokogiri αΠϘ΢ζגࣜձࣾ kintoneͷϑϩϯτΤϯυ࡮৽ React x TypeScript ೋࣇͷύύ ϙέϞϯରઓ޷͖ ϙέιϧͷμϝܭͭ͘Γ·ͨ͠ʂ https://sv.pokesol.com nkgrnkgr https://www.nkgr.dev
4. ࠓ೔࿩͢͜ͱ • ΦϒδΣΫτࢦ޲ͷϓϥΫςΟεΛkintoneͷϑϩϯτΤϯυ࡮৽Ͱ ׆༻ͨ͠ࣄྫΛ঺հ͠·͢ • Ұൠతͳ༻ޠͱαϯϓϧΛJavaͰ঺հͭͭ͠React x TypeScriptͰͲ ͏׆༻͢Δ͔঺հ͠·͢ • ฉ͍͍ͯͨͩ͘ํʹΦϒδΣΫτࢦ޲ͷߟ͑ํ͸ϑϩϯτΤϯυͰ΋ ׆༻Ͱ͖Δͱࢥͬͯ΋Β͑Ε͹ࠓ೔ͷΰʔϧୡ੒Ͱ͢
5. લఏͱ͔എܠͱ͔ • ൃදऀ͸ReactҎ֎͸Θ͔Γ·ͤΜ͕ɺଟ෼΄͔Ͱ΋׆༻Ͱ͖Δͱࢥ ͍·͢ • ΦϒδΣΫτࢦ޲≠ClassBasedProgrammingɻࠓ೔͸TypeScriptͷ Classߏจग़͖ͯ·ͤΜ • ϑϩϯτΤϯυͰΦϒδΣΫτࢦ޲ͱฉ͍ͯ΋͋·Γϐϯͱ͜ͳ͍͔ ΋͠Ε·ͤΜ͕ɺ࣮͸طʹීஈͷ։ൃͰ΍͍ͬͯΔ͜ͱ͸ΦϒδΣΫ τࢦ޲ͷߟ͑ํ΍ઃܭ͕׆༻͞Ε͍ͯΔ͔΋ͤ͠·ͤΜ
6. ϙϦϞʔϑΟζϜʢଟଶੑʣ
7. ϙϦϞʔϑΟζϜʢଟଶੑʣͱ͸ʁ “ιϑτ΢ΣΞͷଟଶੑͱ͸ԿͳͷͰ͠ΐ͏ʁɹͻͱ͜ͱͰݴͬͯ͠·͑͹ɺଟଶੑͷ୅ද֨͸ͣ͹ΓɺϓϥάΠϯͷ͜ͱͰ͢ɻ ຊମͱͳΔιϑτ΢ΣΞ͸ͲΜͳϓϥάΠϯͰ΋ಉ͡ํ๏Ͱѻ͍ɺͦͷத਎ʹ͸ڵຯΛ࣋ͪ·ͤΜɻͲΜͳػೳΛఏڙ͢Δ͔͸ϓϥάΠ ϯʹΑͬͯ͞·͟·Ͱ͢ɻຊମଆ͔ΒݟΔͱͲΕ΋ಉ͡ʮϓϥάΠϯͱ͍͏୯Ұͷछྨͷ΋ͷʯʹݟ͑Δ͚ΕͲɺ࣮͸த਎ͷҧ͏਺ଟ͘ ͷ࣮ମ͕͋Δͱ͍͏ɺ͜ͷ༷ࢠ͕ଟଶੑͰ͢ɻ” ൈਮ: ͪΐ͏ͥͭιϑτ΢ΣΞઃܭೖ໳ !! PHPͰཧղ͢ΔΦϒδΣΫτࢦ޲ͷ׆༻ ాதͻͯ͞Δ
8. ϙϦϞʔϑΟζϜͷྫ PetShopCustomerʹͱͬͯDog͔ CatΛ۠ผ͢Δ͜ͱͳ͘Petͱͯ͠ಉ Ұࢹͯ͠·͢
9. ϑϩϯτΤϯυͷྫͰߟ͑Δ
10. ྫʣNछྨͷίϯϙʔωϯτΛಉҰࢹͯ͠ѻ͏ • NछྨͷίϯϙʔωϯτΛग़͠෼͚Δ࣮૷ΛΠϝʔδ͠·͢ • ݸผͷύʔπ͝ͱʹඞཁͳঢ়ଶ͸ҟͳΓ·͢ • ঢ়ଶΛ؅ཧ͢Δଆ͸Ͳͷίϯϙʔωϯτ͕Ͱͯ΋໰୊ͳ͘දࣔͰ͖Δ Α͏ͳ࢓૊ΈඞཁͰ͢
11. ྫ͑͹kintoneͷ৔߹ Ϣʔβʔૢ࡞ʹΑͬͯग़͢ίϯϙʔ ωϯτΛม͑Δඞཁ͕͋Γ·͢ ίϯϙʔωϯτຖʹඞཁͳProps͸ ҟͳΓ·͢
12. ग़͠෼͚͢Δίϯϙʔ ωϯτ͕̍ͭͳΒ… ԿΒ͔ͷঢ়ଶ(type)ʹԠͯ͡ίϯ ϙʔωϯτΛग़͠෼͚Δͱͯ͠ ͜ͷྫͰ͋Ε͹ͦΕͧΕͷύʔπ͝ ͱʹঢ়ଶΛ؅ཧ͢Ε͹Α͍Ͱ͢ Ͱ΋ग़͍ͨ͠ίϯϙʔωϯτͷ਺͕ ՄมͰෳ਺ͷ৔߹͸ʁ
13. ग़͠෼͚Δίϯϙʔω ϯτ਺͕Մม ίϯϙʔωϯτຖͷঢ়ଶΛ഑ྻͰѻ ͍ϧʔϓΛճ͠ͳ͕Βίϯϙʔωϯ τΛද͍ࣔͨ͠ ϧʔϓΛճ͢ͱ͖͸த਎ΛಉҰࢹ͠ ͯѻ͍͍ͨ
14. TypeScriptͰ࣮૷ͯ͠ΈΔ
15. ഑ྻͰෳ਺छྨͷঢ় ଶΛಉҰࢹ͢Δͱ ഑ྻͷ಺෦ͷཁૉͷܕ͕ᐆດͳܕʹ ͳͬͯ͠·͍·͢ ܕ৘ใ͚ͩΈͯ΋ͲΜͳ஋͕͋Δͷ ͔Θ͔Γʹ͍͘
16. ަࠩܕͱAssert Function
17. ަࠩܕʢUnion Typeʣ ෳ਺ͷίϯϙʔωϯτͷPropsΛಉҰࢹ͢Δͨ Ίʹ InputProps ͱ͍͏UnionTypeΛ࡞੒͠·͢ อ࣋͢Δঢ়ଶΛѻ͏഑ྻͷཁૉ͸ͦΕͧΕ͕ InputPropsܕͱͳΓ·͢ ֤ཁૉ͸UnionTypeͷ͍ͣΕ͔Ͱ͋Δ͜ͱ͕໌ ࣔͰ͖·͢ ͨͩ͜͠Ε͚ͩͩͱ࣮ࡍʹίϯϙʔωϯτଆͰ PropsΛѻ͏ࡍʹͲͷܕͳͷ͔Θ͔Γ·ͤΜ
18. Assert Function propsͷܕΛInputTextPropsܕʹڱ ΊΔͨΊʹAssertFunction Λར༻͠ ·͢ ͜ͷؔ਺Λ௨աͨ͠ޙ͸ܕ͕ߜΒΕ ͨঢ়ଶʹͳΓ·͢ ※ assertΛ࢖͍΍͘͢͢ΔͨΊʹ ‘type’ͱ͍͏ཁૉ Λ௥Ճ͍ͯ͠·͢
19. ίϯϙʔωϯτͰͷ ར༻ྫ ަࠩܕΛ࢖ͬͯ഑ྻͷத਎ΛಉҰࢹ ͭͭ͠ɺAssert functionΛར༻ͯ͠ ݸผͷίϯϙʔωϯτʹpropsΛద ੾ͳܕͰఏڙ͢Δ͜ͱ͕Ͱ͖·͢
20. ϙϦϞʔϑΟζϜʢଟଶੑʣͷ·ͱΊ • ෳ਺ͷཁૉΛදࣔ͢Δͱ͖ʹத਎͕ϥϯλΠϜ·ͰΘ͔Βͳ͍ʢෳ਺ ͷબ୒ࢶ͕͋Δʣͱ͍͏έʔε͸ɺϑϩϯτΤϯυΛ։ൃ͍ͯͯ݁͠ ߏΈΔύλʔϯͰ͸ͳ͍Ͱ͠ΐ͏͔ʁ • ྫΛݟ͍͍ͯͨͩͯɺผʑͷཁૉΛಉҰࢹͯ͠ѻ͏͜ͱ͸JavaͷΑ͏ ͳΦϒδΣΫτࢦ޲ݴޠͰͳͯ͘΋Ͱ͖Δ͜ͱΛઆ໌͠·ͨ͠
21. ґଘੑ஫ೖ ʢDependency Injectionʣ
22. ґଘੑ஫ೖʢDependency Injectionʣ ͱ͸ʁ “ʮΦϒδΣΫτ͕࢖͏ػೳͷ࣮ମΛಘΔࡍɺͦͷղܾΛࣗྗͰߦΘͣɺৗʹ֎෦͔Β༩͑ΔΑ͏ʹ͢΂͠ʯͱ͍͏ઃܭํ਑Ͱ͢ɻ” ൈਮ: ͪΐ͏ͥͭιϑτ΢ΣΞઃܭೖ໳ !! PHPͰཧղ͢ΔΦϒδΣΫτࢦ޲ͷ׆༻ ాதͻͯ͞Δ
23. લఏ • Dependency Injection ͷઃܭํ਑ͷ࿩ͰɺDIίϯςφʔͷ࿩͸͠· ͤΜ
24. DIͷྫ RepositoryʢӬଓԽ૚ͱͷ΍ΓͱΓʣ ͱUsecaseʢϏδωεϩδοΫʣͷ੹ ຿Λ෼཭ɻ Usecase͸ӬଓԽ૚ͷ࣮૷ͷৄࡉʹ͸ ґଘͤ͞ͳ͍Α͏ʹ͠·͢ ΫϥεͷಠཱੑΛߴΊɺςελϏϦ ςΟΛ͋͛ΔϝϦοτ͕͋Γ·͢
25. ϑϩϯτΤϯυͷྫͰߟ͑Δ
26. ྫʣStorybook΍ςετͰར༻͢ΔComponent͔Β֎෦ґଘΛണ͕͢ • Storybook΍ςετͰ࢖͏ίϯϙʔωϯτͷதͰAPI௨৴΍WebApiΛ ར༻͍ͯ͠Δ͜ͱ͕͋Γ·͢ • mswɺ@storybook/jest Λ࢖ͬͯMock(Spy)͸Ͱ͖Δ͕΋ͬͱखܰʹ ৼΔ෣͍Λมߋ͍ͨ͠ • Kintoneͷ৔߹͸্هͷέʔεҎ֎ͰGlobalม਺΁ͷґଘ΋཈ࢭͨ͠ ͍έʔε͕͋Γ·ͨ͠
27. ֎෦API΁ͷґଘ Storybook΍ςετͰ͸֎෦؀ڥ͕ ͳ͍৔߹ࣦഊͯ͠͠·͍·͢ ͳΜΒ͔ͷํ๏ͰMock͕ඞཁͰ͢
28. ReactContextΛ࢖ͬͨґଘͷ஫ೖ
29. ContextApiΛ࢖ͬͯ֎ ෦ґଘΛ஫ೖ͢Δ postJsonͷΑ͏ͳ֎෦APIʹґଘ͢Δ ؔ਺ΛContextΛ࢖ͬͯComponetʹ஫ ೖ͢Δ࢓૊ΈΛ࡞Γ·͢ Storybook΍ςετ࣌͸ ContextProviderΛ੾Γସ͑Δ͚ͩͰ postJsonͷৼΔ෣͍Λมߋ͢Δ͜ͱ͕ Ͱ͖·͢
30. ·ͱΊɿΦϒδΣΫτࢦ޲ͷϓϥΫςΟεΛϑϩϯτΤϯυͰ׆༻͢Δ ͝ཡ͍͍ͨͩͨ௨ΓϙϦϞʔϑΟζϜ΋DI΋αʔόʔαΠυͷΦϒδΣΫτࢦ ޲ͷ։ൃͰ͔͠ར༻Ͱ͖ͳ͍΋ͷͰ͸ͳ͍Ͱ͢ɻ ClassΛ࢖Θͳ͍ϓϩάϥϛϯάͰ΋ΦϒδΣΫτࢦ޲ͷߟ͑ํΛઃܭੜ͔ͤ Δ͜ͱ͕͋Γ·͢ɻ ΄͔ʹ΋ΦϒδΣΫτࢦ޲ͷϓϥΫςΟεΛϑϩϯτΤϯυ։ൃʹऔΓೖΕ ͍ͯ͘͜ͱͰίʔυͷ඼࣭ΛվળͰ͖Δͱࢥ͏ͷͰͥͻࢼ͍͚ͯͨͩ͠Δͱ ͏Ε͍͠Ͱ͢ʂ
31. We are Hiring!!