Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Nokogiri

June 14, 2023
Tweet

More Decks by Nokogiri

Other Decks in Programming

Transcript

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

    View full-size slide

  2. ໨࣍
    • ࣗݾ঺հ


    • ࠓ೔࿩͢͜ͱ


    • લఏͱ͔എܠͱ͔


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


    • ґଘੑ஫ೖʢDependency Injectionʣ

    View full-size slide

  3. Nokogiri
    αΠϘ΢ζגࣜձࣾ


    kintoneͷϑϩϯτΤϯυ࡮৽


    React x TypeScript


    ೋࣇͷύύ


    ϙέϞϯରઓ޷͖


    ϙέιϧͷμϝܭͭ͘Γ·ͨ͠ʂ


    https://sv.pokesol.com
    nkgrnkgr
    https://www.nkgr.dev

    View full-size slide

  4. ࠓ೔࿩͢͜ͱ
    • ΦϒδΣΫτࢦ޲ͷϓϥΫςΟεΛkintoneͷϑϩϯτΤϯυ࡮৽Ͱ
    ׆༻ͨ͠ࣄྫΛ঺հ͠·͢


    • Ұൠతͳ༻ޠͱαϯϓϧΛJavaͰ঺հͭͭ͠React x TypeScriptͰͲ
    ͏׆༻͢Δ͔঺հ͠·͢


    • ฉ͍͍ͯͨͩ͘ํʹΦϒδΣΫτࢦ޲ͷߟ͑ํ͸ϑϩϯτΤϯυͰ΋
    ׆༻Ͱ͖Δͱࢥͬͯ΋Β͑Ε͹ࠓ೔ͷΰʔϧୡ੒Ͱ͢

    View full-size slide

  5. લఏͱ͔എܠͱ͔
    • ൃදऀ͸ReactҎ֎͸Θ͔Γ·ͤΜ͕ɺଟ෼΄͔Ͱ΋׆༻Ͱ͖Δͱࢥ
    ͍·͢


    • ΦϒδΣΫτࢦ޲≠ClassBasedProgrammingɻࠓ೔͸TypeScriptͷ
    Classߏจग़͖ͯ·ͤΜ


    • ϑϩϯτΤϯυͰΦϒδΣΫτࢦ޲ͱฉ͍ͯ΋͋·Γϐϯͱ͜ͳ͍͔
    ΋͠Ε·ͤΜ͕ɺ࣮͸طʹීஈͷ։ൃͰ΍͍ͬͯΔ͜ͱ͸ΦϒδΣΫ
    τࢦ޲ͷߟ͑ํ΍ઃܭ͕׆༻͞Ε͍ͯΔ͔΋ͤ͠·ͤΜ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. ྫʣNछྨͷίϯϙʔωϯτΛಉҰࢹͯ͠ѻ͏
    • NछྨͷίϯϙʔωϯτΛग़͠෼͚Δ࣮૷ΛΠϝʔδ͠·͢


    • ݸผͷύʔπ͝ͱʹඞཁͳঢ়ଶ͸ҟͳΓ·͢


    • ঢ়ଶΛ؅ཧ͢Δଆ͸Ͳͷίϯϙʔωϯτ͕Ͱͯ΋໰୊ͳ͘දࣔͰ͖Δ
    Α͏ͳ࢓૊ΈඞཁͰ͢

    View full-size slide

  11. ྫ͑͹kintoneͷ৔߹
    Ϣʔβʔૢ࡞ʹΑͬͯग़͢ίϯϙʔ
    ωϯτΛม͑Δඞཁ͕͋Γ·͢


    ίϯϙʔωϯτຖʹඞཁͳProps͸
    ҟͳΓ·͢

    View full-size slide

  12. ग़͠෼͚͢Δίϯϙʔ
    ωϯτ͕̍ͭͳΒ…
    ԿΒ͔ͷঢ়ଶ(type)ʹԠͯ͡ίϯ
    ϙʔωϯτΛग़͠෼͚Δͱͯ͠


    ͜ͷྫͰ͋Ε͹ͦΕͧΕͷύʔπ͝
    ͱʹঢ়ଶΛ؅ཧ͢Ε͹Α͍Ͱ͢


    Ͱ΋ग़͍ͨ͠ίϯϙʔωϯτͷ਺͕
    ՄมͰෳ਺ͷ৔߹͸ʁ

    View full-size slide

  13. ग़͠෼͚Δίϯϙʔω
    ϯτ਺͕Մม
    ίϯϙʔωϯτຖͷঢ়ଶΛ഑ྻͰѻ
    ͍ϧʔϓΛճ͠ͳ͕Βίϯϙʔωϯ
    τΛද͍ࣔͨ͠


    ϧʔϓΛճ͢ͱ͖͸த਎ΛಉҰࢹ͠
    ͯѻ͍͍ͨ


    View full-size slide

  14. TypeScriptͰ࣮૷ͯ͠ΈΔ

    View full-size slide

  15. ഑ྻͰෳ਺छྨͷঢ়
    ଶΛಉҰࢹ͢Δͱ
    ഑ྻͷ಺෦ͷཁૉͷܕ͕ᐆດͳܕʹ
    ͳͬͯ͠·͍·͢


    ܕ৘ใ͚ͩΈͯ΋ͲΜͳ஋͕͋Δͷ
    ͔Θ͔Γʹ͍͘

    View full-size slide

  16. ަࠩܕͱAssert Function

    View full-size slide

  17. ަࠩܕʢUnion Typeʣ
    ෳ਺ͷίϯϙʔωϯτͷPropsΛಉҰࢹ͢Δͨ
    Ίʹ InputProps ͱ͍͏UnionTypeΛ࡞੒͠·͢


    อ࣋͢Δঢ়ଶΛѻ͏഑ྻͷཁૉ͸ͦΕͧΕ͕
    InputPropsܕͱͳΓ·͢


    ֤ཁૉ͸UnionTypeͷ͍ͣΕ͔Ͱ͋Δ͜ͱ͕໌
    ࣔͰ͖·͢


    ͨͩ͜͠Ε͚ͩͩͱ࣮ࡍʹίϯϙʔωϯτଆͰ
    PropsΛѻ͏ࡍʹͲͷܕͳͷ͔Θ͔Γ·ͤΜ

    View full-size slide

  18. Assert Function
    propsͷܕΛInputTextPropsܕʹڱ
    ΊΔͨΊʹAssertFunction Λར༻͠
    ·͢


    ͜ͷؔ਺Λ௨աͨ͠ޙ͸ܕ͕ߜΒΕ
    ͨঢ়ଶʹͳΓ·͢


    ※ assertΛ࢖͍΍͘͢͢ΔͨΊʹ ‘type’ͱ͍͏ཁૉ
    Λ௥Ճ͍ͯ͠·͢

    View full-size slide

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

    View full-size slide

  20. ϙϦϞʔϑΟζϜʢଟଶੑʣͷ·ͱΊ
    • ෳ਺ͷཁૉΛදࣔ͢Δͱ͖ʹத਎͕ϥϯλΠϜ·ͰΘ͔Βͳ͍ʢෳ਺
    ͷબ୒ࢶ͕͋Δʣͱ͍͏έʔε͸ɺϑϩϯτΤϯυΛ։ൃ͍ͯͯ݁͠
    ߏΈΔύλʔϯͰ͸ͳ͍Ͱ͠ΐ͏͔ʁ


    • ྫΛݟ͍͍ͯͨͩͯɺผʑͷཁૉΛಉҰࢹͯ͠ѻ͏͜ͱ͸JavaͷΑ͏
    ͳΦϒδΣΫτࢦ޲ݴޠͰͳͯ͘΋Ͱ͖Δ͜ͱΛઆ໌͠·ͨ͠

    View full-size slide

  21. ґଘੑ஫ೖ


    ʢDependency Injectionʣ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. DIͷྫ
    RepositoryʢӬଓԽ૚ͱͷ΍ΓͱΓʣ
    ͱUsecaseʢϏδωεϩδοΫʣͷ੹
    ຿Λ෼཭ɻ


    Usecase͸ӬଓԽ૚ͷ࣮૷ͷৄࡉʹ͸
    ґଘͤ͞ͳ͍Α͏ʹ͠·͢


    ΫϥεͷಠཱੑΛߴΊɺςελϏϦ
    ςΟΛ͋͛ΔϝϦοτ͕͋Γ·͢

    View full-size slide

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

    View full-size slide

  26. ྫʣStorybook΍ςετͰར༻͢ΔComponent͔Β֎෦ґଘΛണ͕͢
    • Storybook΍ςετͰ࢖͏ίϯϙʔωϯτͷதͰAPI௨৴΍WebApiΛ
    ར༻͍ͯ͠Δ͜ͱ͕͋Γ·͢


    • mswɺ@storybook/jest Λ࢖ͬͯMock(Spy)͸Ͱ͖Δ͕΋ͬͱखܰʹ
    ৼΔ෣͍Λมߋ͍ͨ͠


    • Kintoneͷ৔߹͸্هͷέʔεҎ֎ͰGlobalม਺΁ͷґଘ΋཈ࢭͨ͠
    ͍έʔε͕͋Γ·ͨ͠

    View full-size slide

  27. ֎෦API΁ͷґଘ
    Storybook΍ςετͰ͸֎෦؀ڥ͕
    ͳ͍৔߹ࣦഊͯ͠͠·͍·͢


    ͳΜΒ͔ͷํ๏ͰMock͕ඞཁͰ͢

    View full-size slide

  28. ReactContextΛ࢖ͬͨґଘͷ஫ೖ

    View full-size slide

  29. ContextApiΛ࢖ͬͯ֎
    ෦ґଘΛ஫ೖ͢Δ
    postJsonͷΑ͏ͳ֎෦APIʹґଘ͢Δ
    ؔ਺ΛContextΛ࢖ͬͯComponetʹ஫
    ೖ͢Δ࢓૊ΈΛ࡞Γ·͢


    Storybook΍ςετ࣌͸
    ContextProviderΛ੾Γସ͑Δ͚ͩͰ
    postJsonͷৼΔ෣͍Λมߋ͢Δ͜ͱ͕
    Ͱ͖·͢

    View full-size slide

  30. ·ͱΊɿΦϒδΣΫτࢦ޲ͷϓϥΫςΟεΛϑϩϯτΤϯυͰ׆༻͢Δ
    ͝ཡ͍͍ͨͩͨ௨ΓϙϦϞʔϑΟζϜ΋DI΋αʔόʔαΠυͷΦϒδΣΫτࢦ
    ޲ͷ։ൃͰ͔͠ར༻Ͱ͖ͳ͍΋ͷͰ͸ͳ͍Ͱ͢ɻ


    ClassΛ࢖Θͳ͍ϓϩάϥϛϯάͰ΋ΦϒδΣΫτࢦ޲ͷߟ͑ํΛઃܭੜ͔ͤ
    Δ͜ͱ͕͋Γ·͢ɻ


    ΄͔ʹ΋ΦϒδΣΫτࢦ޲ͷϓϥΫςΟεΛϑϩϯτΤϯυ։ൃʹऔΓೖΕ
    ͍ͯ͘͜ͱͰίʔυͷ඼࣭ΛվળͰ͖Δͱࢥ͏ͷͰͥͻࢼ͍͚ͯͨͩ͠Δͱ
    ͏Ε͍͠Ͱ͢ʂ

    View full-size slide

  31. We are Hiring!!

    View full-size slide