オブジェクト指向のプラクティスをフロントエンドで活用する

by Nokogiri

Slide 1

Slide 1 text

ΦϒδΣΫτࢦ޲ͷϓϥΫςΟεΛ ϑϩϯτΤϯυͰ׆༻͢Δ 2023/06/14 KFUG Web Creators Meetup #2 @nkgrnkgr

Slide 2

Slide 2 text

໨࣍ • ࣗݾ঺հ • ࠓ೔࿩͢͜ͱ • લఏͱ͔എܠͱ͔ • ϙϦϞʔϑΟζϜʢଟଶੑʣ • ґଘੑ஫ೖʢDependency Injectionʣ

Slide 3

Slide 3 text

Nokogiri αΠϘ΢ζגࣜձࣾ kintoneͷϑϩϯτΤϯυ࡮৽ React x TypeScript ೋࣇͷύύ ϙέϞϯରઓ޷͖ ϙέιϧͷμϝܭͭ͘Γ·ͨ͠ʂ https://sv.pokesol.com nkgrnkgr https://www.nkgr.dev

Slide 4

Slide 4 text

ࠓ೔࿩͢͜ͱ • ΦϒδΣΫτࢦ޲ͷϓϥΫςΟεΛkintoneͷϑϩϯτΤϯυ࡮৽Ͱ ׆༻ͨ͠ࣄྫΛ঺հ͠·͢ • Ұൠతͳ༻ޠͱαϯϓϧΛJavaͰ঺հͭͭ͠React x TypeScriptͰͲ ͏׆༻͢Δ͔঺հ͠·͢ • ฉ͍͍ͯͨͩ͘ํʹΦϒδΣΫτࢦ޲ͷߟ͑ํ͸ϑϩϯτΤϯυͰ΋ ׆༻Ͱ͖Δͱࢥͬͯ΋Β͑Ε͹ࠓ೔ͷΰʔϧୡ੒Ͱ͢

Slide 5

Slide 5 text

લఏͱ͔എܠͱ͔ • ൃදऀ͸ReactҎ֎͸Θ͔Γ·ͤΜ͕ɺଟ෼΄͔Ͱ΋׆༻Ͱ͖Δͱࢥ ͍·͢ • ΦϒδΣΫτࢦ޲≠ClassBasedProgrammingɻࠓ೔͸TypeScriptͷ Classߏจग़͖ͯ·ͤΜ • ϑϩϯτΤϯυͰΦϒδΣΫτࢦ޲ͱฉ͍ͯ΋͋·Γϐϯͱ͜ͳ͍͔ ΋͠Ε·ͤΜ͕ɺ࣮͸طʹීஈͷ։ൃͰ΍͍ͬͯΔ͜ͱ͸ΦϒδΣΫ τࢦ޲ͷߟ͑ํ΍ઃܭ͕׆༻͞Ε͍ͯΔ͔΋ͤ͠·ͤΜ

Slide 6

Slide 6 text

ϙϦϞʔϑΟζϜʢଟଶੑʣ

Slide 7

Slide 7 text

ϙϦϞʔϑΟζϜʢଟଶੑʣͱ͸ʁ “ιϑτ΢ΣΞͷଟଶੑͱ͸ԿͳͷͰ͠ΐ͏ʁɹͻͱ͜ͱͰݴͬͯ͠·͑͹ɺଟଶੑͷ୅ද֨͸ͣ͹ΓɺϓϥάΠϯͷ͜ͱͰ͢ɻ ຊମͱͳΔιϑτ΢ΣΞ͸ͲΜͳϓϥάΠϯͰ΋ಉ͡ํ๏Ͱѻ͍ɺͦͷத਎ʹ͸ڵຯΛ࣋ͪ·ͤΜɻͲΜͳػೳΛఏڙ͢Δ͔͸ϓϥάΠ ϯʹΑͬͯ͞·͟·Ͱ͢ɻຊମଆ͔ΒݟΔͱͲΕ΋ಉ͡ʮϓϥάΠϯͱ͍͏୯Ұͷछྨͷ΋ͷʯʹݟ͑Δ͚ΕͲɺ࣮͸த਎ͷҧ͏਺ଟ͘ ͷ࣮ମ͕͋Δͱ͍͏ɺ͜ͷ༷ࢠ͕ଟଶੑͰ͢ɻ” ൈਮ: ͪΐ͏ͥͭιϑτ΢ΣΞઃܭೖ໳ !! PHPͰཧղ͢ΔΦϒδΣΫτࢦ޲ͷ׆༻ ాதͻͯ͞Δ

Slide 8

Slide 8 text

ϙϦϞʔϑΟζϜͷྫ PetShopCustomerʹͱͬͯDog͔ CatΛ۠ผ͢Δ͜ͱͳ͘Petͱͯ͠ಉ Ұࢹͯ͠·͢

Slide 9

Slide 9 text

ϑϩϯτΤϯυͷྫͰߟ͑Δ

Slide 10

Slide 10 text

ྫʣNछྨͷίϯϙʔωϯτΛಉҰࢹͯ͠ѻ͏ • NछྨͷίϯϙʔωϯτΛग़͠෼͚Δ࣮૷ΛΠϝʔδ͠·͢ • ݸผͷύʔπ͝ͱʹඞཁͳঢ়ଶ͸ҟͳΓ·͢ • ঢ়ଶΛ؅ཧ͢Δଆ͸Ͳͷίϯϙʔωϯτ͕Ͱͯ΋໰୊ͳ͘දࣔͰ͖Δ Α͏ͳ࢓૊ΈඞཁͰ͢

Slide 11

Slide 11 text

ྫ͑͹kintoneͷ৔߹ Ϣʔβʔૢ࡞ʹΑͬͯग़͢ίϯϙʔ ωϯτΛม͑Δඞཁ͕͋Γ·͢ ίϯϙʔωϯτຖʹඞཁͳProps͸ ҟͳΓ·͢

Slide 12

Slide 12 text

ग़͠෼͚͢Δίϯϙʔ ωϯτ͕̍ͭͳΒ… ԿΒ͔ͷঢ়ଶ(type)ʹԠͯ͡ίϯ ϙʔωϯτΛग़͠෼͚Δͱͯ͠ ͜ͷྫͰ͋Ε͹ͦΕͧΕͷύʔπ͝ ͱʹঢ়ଶΛ؅ཧ͢Ε͹Α͍Ͱ͢ Ͱ΋ग़͍ͨ͠ίϯϙʔωϯτͷ਺͕ ՄมͰෳ਺ͷ৔߹͸ʁ

Slide 13

Slide 13 text

ग़͠෼͚Δίϯϙʔω ϯτ਺͕Մม ίϯϙʔωϯτຖͷঢ়ଶΛ഑ྻͰѻ ͍ϧʔϓΛճ͠ͳ͕Βίϯϙʔωϯ τΛද͍ࣔͨ͠ ϧʔϓΛճ͢ͱ͖͸த਎ΛಉҰࢹ͠ ͯѻ͍͍ͨ

Slide 14

Slide 14 text

TypeScriptͰ࣮૷ͯ͠ΈΔ

Slide 15

Slide 15 text

഑ྻͰෳ਺छྨͷঢ় ଶΛಉҰࢹ͢Δͱ ഑ྻͷ಺෦ͷཁૉͷܕ͕ᐆດͳܕʹ ͳͬͯ͠·͍·͢ ܕ৘ใ͚ͩΈͯ΋ͲΜͳ஋͕͋Δͷ ͔Θ͔Γʹ͍͘

Slide 16

Slide 16 text

ަࠩܕͱAssert Function

Slide 17

Slide 17 text

ަࠩܕʢUnion Typeʣ ෳ਺ͷίϯϙʔωϯτͷPropsΛಉҰࢹ͢Δͨ Ίʹ InputProps ͱ͍͏UnionTypeΛ࡞੒͠·͢ อ࣋͢Δঢ়ଶΛѻ͏഑ྻͷཁૉ͸ͦΕͧΕ͕ InputPropsܕͱͳΓ·͢ ֤ཁૉ͸UnionTypeͷ͍ͣΕ͔Ͱ͋Δ͜ͱ͕໌ ࣔͰ͖·͢ ͨͩ͜͠Ε͚ͩͩͱ࣮ࡍʹίϯϙʔωϯτଆͰ PropsΛѻ͏ࡍʹͲͷܕͳͷ͔Θ͔Γ·ͤΜ

Slide 18

Slide 18 text

Assert Function propsͷܕΛInputTextPropsܕʹڱ ΊΔͨΊʹAssertFunction Λར༻͠ ·͢ ͜ͷؔ਺Λ௨աͨ͠ޙ͸ܕ͕ߜΒΕ ͨঢ়ଶʹͳΓ·͢ ※ assertΛ࢖͍΍͘͢͢ΔͨΊʹ ‘type’ͱ͍͏ཁૉ Λ௥Ճ͍ͯ͠·͢

Slide 19

Slide 19 text

ίϯϙʔωϯτͰͷ ར༻ྫ ަࠩܕΛ࢖ͬͯ഑ྻͷத਎ΛಉҰࢹ ͭͭ͠ɺAssert functionΛར༻ͯ͠ ݸผͷίϯϙʔωϯτʹpropsΛద ੾ͳܕͰఏڙ͢Δ͜ͱ͕Ͱ͖·͢

Slide 20

Slide 20 text

ϙϦϞʔϑΟζϜʢଟଶੑʣͷ·ͱΊ • ෳ਺ͷཁૉΛදࣔ͢Δͱ͖ʹத਎͕ϥϯλΠϜ·ͰΘ͔Βͳ͍ʢෳ਺ ͷબ୒ࢶ͕͋Δʣͱ͍͏έʔε͸ɺϑϩϯτΤϯυΛ։ൃ͍ͯͯ݁͠ ߏΈΔύλʔϯͰ͸ͳ͍Ͱ͠ΐ͏͔ʁ • ྫΛݟ͍͍ͯͨͩͯɺผʑͷཁૉΛಉҰࢹͯ͠ѻ͏͜ͱ͸JavaͷΑ͏ ͳΦϒδΣΫτࢦ޲ݴޠͰͳͯ͘΋Ͱ͖Δ͜ͱΛઆ໌͠·ͨ͠

Slide 21

Slide 21 text

ґଘੑ஫ೖ ʢDependency Injectionʣ

Slide 22

Slide 22 text

ґଘੑ஫ೖʢDependency Injectionʣ ͱ͸ʁ “ʮΦϒδΣΫτ͕࢖͏ػೳͷ࣮ମΛಘΔࡍɺͦͷղܾΛࣗྗͰߦΘͣɺৗʹ֎෦͔Β༩͑ΔΑ͏ʹ͢΂͠ʯͱ͍͏ઃܭํ਑Ͱ͢ɻ” ൈਮ: ͪΐ͏ͥͭιϑτ΢ΣΞઃܭೖ໳ !! PHPͰཧղ͢ΔΦϒδΣΫτࢦ޲ͷ׆༻ ాதͻͯ͞Δ

Slide 23

Slide 23 text

લఏ • Dependency Injection ͷઃܭํ਑ͷ࿩ͰɺDIίϯςφʔͷ࿩͸͠· ͤΜ

Slide 24

Slide 24 text

DIͷྫ RepositoryʢӬଓԽ૚ͱͷ΍ΓͱΓʣ ͱUsecaseʢϏδωεϩδοΫʣͷ੹ ຿Λ෼཭ɻ Usecase͸ӬଓԽ૚ͷ࣮૷ͷৄࡉʹ͸ ґଘͤ͞ͳ͍Α͏ʹ͠·͢ ΫϥεͷಠཱੑΛߴΊɺςελϏϦ ςΟΛ͋͛ΔϝϦοτ͕͋Γ·͢

Slide 25

Slide 25 text

ϑϩϯτΤϯυͷྫͰߟ͑Δ

Slide 26

Slide 26 text

ྫʣStorybook΍ςετͰར༻͢ΔComponent͔Β֎෦ґଘΛണ͕͢ • Storybook΍ςετͰ࢖͏ίϯϙʔωϯτͷதͰAPI௨৴΍WebApiΛ ར༻͍ͯ͠Δ͜ͱ͕͋Γ·͢ • mswɺ@storybook/jest Λ࢖ͬͯMock(Spy)͸Ͱ͖Δ͕΋ͬͱखܰʹ ৼΔ෣͍Λมߋ͍ͨ͠ • Kintoneͷ৔߹͸্هͷέʔεҎ֎ͰGlobalม਺΁ͷґଘ΋཈ࢭͨ͠ ͍έʔε͕͋Γ·ͨ͠

Slide 27

Slide 27 text

֎෦API΁ͷґଘ Storybook΍ςετͰ͸֎෦؀ڥ͕ ͳ͍৔߹ࣦഊͯ͠͠·͍·͢ ͳΜΒ͔ͷํ๏ͰMock͕ඞཁͰ͢

Slide 28

Slide 28 text

ReactContextΛ࢖ͬͨґଘͷ஫ೖ

Slide 29

Slide 29 text

ContextApiΛ࢖ͬͯ֎ ෦ґଘΛ஫ೖ͢Δ postJsonͷΑ͏ͳ֎෦APIʹґଘ͢Δ ؔ਺ΛContextΛ࢖ͬͯComponetʹ஫ ೖ͢Δ࢓૊ΈΛ࡞Γ·͢ Storybook΍ςετ࣌͸ ContextProviderΛ੾Γସ͑Δ͚ͩͰ postJsonͷৼΔ෣͍Λมߋ͢Δ͜ͱ͕ Ͱ͖·͢

Slide 30

Slide 30 text

·ͱΊɿΦϒδΣΫτࢦ޲ͷϓϥΫςΟεΛϑϩϯτΤϯυͰ׆༻͢Δ ͝ཡ͍͍ͨͩͨ௨ΓϙϦϞʔϑΟζϜ΋DI΋αʔόʔαΠυͷΦϒδΣΫτࢦ ޲ͷ։ൃͰ͔͠ར༻Ͱ͖ͳ͍΋ͷͰ͸ͳ͍Ͱ͢ɻ ClassΛ࢖Θͳ͍ϓϩάϥϛϯάͰ΋ΦϒδΣΫτࢦ޲ͷߟ͑ํΛઃܭੜ͔ͤ Δ͜ͱ͕͋Γ·͢ɻ ΄͔ʹ΋ΦϒδΣΫτࢦ޲ͷϓϥΫςΟεΛϑϩϯτΤϯυ։ൃʹऔΓೖΕ ͍ͯ͘͜ͱͰίʔυͷ඼࣭ΛվળͰ͖Δͱࢥ͏ͷͰͥͻࢼ͍͚ͯͨͩ͠Δͱ ͏Ε͍͠Ͱ͢ʂ

Slide 31

Slide 31 text

We are Hiring!!