Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
オブジェクト指向のプラクティスをフロントエンドで活用する
Search
Nokogiri
June 14, 2023
Programming
7
1.5k
オブジェクト指向のプラクティスをフロントエンドで活用する
Nokogiri
June 14, 2023
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
React Testing Libraryでの WAI-ARIAロールの活用事例
undefined_name
1
140
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
4
1.7k
Pipe Operator (|>) の紹介
undefined_name
2
300
FizzBuzzで学ぶOCP
undefined_name
0
95
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.8k
モププロ@kintone開発チーム
undefined_name
1
570
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.2k
Usefull GitLens
undefined_name
3
800
kintone開発チームにジョインして6カ月の所感
undefined_name
1
330
Other Decks in Programming
See All in Programming
AIコーディングの理想と現実
tomohisa
33
35k
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
9
3.2k
監視 やばい
syossan27
11
10k
AI時代の開発者評価について
ayumuu
0
200
Thank you <💅>, What's the Next?
ahoxa
1
560
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
1
150
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
140
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
560
Empowering Developers with HTML-Aware ERB Tooling @ RubyKaigi 2025, Matsuyama, Ehime
marcoroth
2
810
Dissecting and Reconstructing Ruby Syntactic Structures
ydah
2
1.3k
On-the-fly Suggestions of Rewriting Method Deprecations
ohbarye
1
3.5k
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
bitkey
1
110
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
800
Designing for Performance
lara
608
69k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Code Reviewing Like a Champion
maltzj
523
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.3k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
Into the Great Unknown - MozCon
thekraken
38
1.7k
Transcript
ΦϒδΣΫτࢦͷϓϥΫςΟεΛ ϑϩϯτΤϯυͰ׆༻͢Δ 2023/06/14 KFUG Web Creators Meetup #2 @nkgrnkgr
࣍ • ࣗݾհ • ࠓ͢͜ͱ • લఏͱ͔എܠͱ͔ • ϙϦϞʔϑΟζϜʢଟଶੑʣ •
ґଘੑೖʢDependency Injectionʣ
Nokogiri αΠϘζגࣜձࣾ kintoneͷϑϩϯτΤϯυ৽ React x TypeScript ೋࣇͷύύ ϙέϞϯରઓ͖ ϙέιϧͷμϝܭͭ͘Γ·ͨ͠ʂ https://sv.pokesol.com
nkgrnkgr https://www.nkgr.dev
ࠓ͢͜ͱ • ΦϒδΣΫτࢦͷϓϥΫςΟεΛkintoneͷϑϩϯτΤϯυ৽Ͱ ׆༻ͨ͠ࣄྫΛհ͠·͢ • Ұൠతͳ༻ޠͱαϯϓϧΛJavaͰհͭͭ͠React x TypeScriptͰͲ ͏׆༻͢Δ͔հ͠·͢ •
ฉ͍͍ͯͨͩ͘ํʹΦϒδΣΫτࢦͷߟ͑ํϑϩϯτΤϯυͰ ׆༻Ͱ͖ΔͱࢥͬͯΒ͑ΕࠓͷΰʔϧୡͰ͢
લఏͱ͔എܠͱ͔ • ൃදऀReactҎ֎Θ͔Γ·ͤΜ͕ɺଟ΄͔Ͱ׆༻Ͱ͖Δͱࢥ ͍·͢ • ΦϒδΣΫτࢦ≠ClassBasedProgrammingɻࠓTypeScriptͷ Classߏจग़͖ͯ·ͤΜ • ϑϩϯτΤϯυͰΦϒδΣΫτࢦͱฉ͍ͯ͋·Γϐϯͱ͜ͳ͍͔ ͠Ε·ͤΜ͕ɺ࣮طʹීஈͷ։ൃͰ͍ͬͯΔ͜ͱΦϒδΣΫ
τࢦͷߟ͑ํઃܭ͕׆༻͞Ε͍ͯΔ͔ͤ͠·ͤΜ
ϙϦϞʔϑΟζϜʢଟଶੑʣ
ϙϦϞʔϑΟζϜʢଟଶੑʣͱʁ “ιϑτΣΞͷଟଶੑͱԿͳͷͰ͠ΐ͏ʁɹͻͱ͜ͱͰݴͬͯ͠·͑ɺଟଶੑͷද֨ͣΓɺϓϥάΠϯͷ͜ͱͰ͢ɻ ຊମͱͳΔιϑτΣΞͲΜͳϓϥάΠϯͰಉ͡ํ๏Ͱѻ͍ɺͦͷதʹڵຯΛ࣋ͪ·ͤΜɻͲΜͳػೳΛఏڙ͢Δ͔ϓϥάΠ ϯʹΑͬͯ͞·͟·Ͱ͢ɻຊମଆ͔ΒݟΔͱͲΕಉ͡ʮϓϥάΠϯͱ͍͏୯Ұͷछྨͷͷʯʹݟ͑Δ͚ΕͲɺ࣮தͷҧ͏ଟ͘ ͷ࣮ମ͕͋Δͱ͍͏ɺ͜ͷ༷ࢠ͕ଟଶੑͰ͢ɻ” ൈਮ: ͪΐ͏ͥͭιϑτΣΞઃܭೖ !! PHPͰཧղ͢ΔΦϒδΣΫτࢦͷ׆༻ ాதͻͯ͞Δ
ϙϦϞʔϑΟζϜͷྫ PetShopCustomerʹͱͬͯDog͔ CatΛ۠ผ͢Δ͜ͱͳ͘Petͱͯ͠ಉ Ұࢹͯ͠·͢
ϑϩϯτΤϯυͷྫͰߟ͑Δ
ྫʣNछྨͷίϯϙʔωϯτΛಉҰࢹͯ͠ѻ͏ • NछྨͷίϯϙʔωϯτΛग़͚͠Δ࣮ΛΠϝʔδ͠·͢ • ݸผͷύʔπ͝ͱʹඞཁͳঢ়ଶҟͳΓ·͢ • ঢ়ଶΛཧ͢ΔଆͲͷίϯϙʔωϯτ͕Ͱͯͳ͘දࣔͰ͖Δ Α͏ͳΈඞཁͰ͢
ྫ͑kintoneͷ߹ Ϣʔβʔૢ࡞ʹΑͬͯग़͢ίϯϙʔ ωϯτΛม͑Δඞཁ͕͋Γ·͢ ίϯϙʔωϯτຖʹඞཁͳProps ҟͳΓ·͢
ग़͚͢͠Δίϯϙʔ ωϯτ͕̍ͭͳΒ… ԿΒ͔ͷঢ়ଶ(type)ʹԠͯ͡ίϯ ϙʔωϯτΛग़͚͠Δͱͯ͠ ͜ͷྫͰ͋ΕͦΕͧΕͷύʔπ͝ ͱʹঢ়ଶΛཧ͢ΕΑ͍Ͱ͢ Ͱग़͍ͨ͠ίϯϙʔωϯτͷ͕ ՄมͰෳͷ߹ʁ
ग़͚͠Δίϯϙʔω ϯτ͕Մม ίϯϙʔωϯτຖͷঢ়ଶΛྻͰѻ ͍ϧʔϓΛճ͠ͳ͕Βίϯϙʔωϯ τΛද͍ࣔͨ͠ ϧʔϓΛճ͢ͱ͖தΛಉҰࢹ͠ ͯѻ͍͍ͨ
TypeScriptͰ࣮ͯ͠ΈΔ
ྻͰෳछྨͷঢ় ଶΛಉҰࢹ͢Δͱ ྻͷ෦ͷཁૉͷܕ͕ᐆດͳܕʹ ͳͬͯ͠·͍·͢ ܕใ͚ͩΈͯͲΜͳ͕͋Δͷ ͔Θ͔Γʹ͍͘
ަࠩܕͱAssert Function
ަࠩܕʢUnion Typeʣ ෳͷίϯϙʔωϯτͷPropsΛಉҰࢹ͢Δͨ Ίʹ InputProps ͱ͍͏UnionTypeΛ࡞͠·͢ อ࣋͢Δঢ়ଶΛѻ͏ྻͷཁૉͦΕͧΕ͕ InputPropsܕͱͳΓ·͢ ֤ཁૉUnionTypeͷ͍ͣΕ͔Ͱ͋Δ͜ͱ͕໌ ࣔͰ͖·͢
ͨͩ͜͠Ε͚ͩͩͱ࣮ࡍʹίϯϙʔωϯτଆͰ PropsΛѻ͏ࡍʹͲͷܕͳͷ͔Θ͔Γ·ͤΜ
Assert Function propsͷܕΛInputTextPropsܕʹڱ ΊΔͨΊʹAssertFunction Λར༻͠ ·͢ ͜ͷؔΛ௨աͨ͠ޙܕ͕ߜΒΕ ͨঢ়ଶʹͳΓ·͢ ※ assertΛ͍͘͢͢ΔͨΊʹ
‘type’ͱ͍͏ཁૉ ΛՃ͍ͯ͠·͢
ίϯϙʔωϯτͰͷ ར༻ྫ ަࠩܕΛͬͯྻͷதΛಉҰࢹ ͭͭ͠ɺAssert functionΛར༻ͯ͠ ݸผͷίϯϙʔωϯτʹpropsΛద ͳܕͰఏڙ͢Δ͜ͱ͕Ͱ͖·͢
ϙϦϞʔϑΟζϜʢଟଶੑʣͷ·ͱΊ • ෳͷཁૉΛදࣔ͢Δͱ͖ʹத͕ϥϯλΠϜ·ͰΘ͔Βͳ͍ʢෳ ͷબࢶ͕͋Δʣͱ͍͏έʔεɺϑϩϯτΤϯυΛ։ൃ͍ͯͯ݁͠ ߏΈΔύλʔϯͰͳ͍Ͱ͠ΐ͏͔ʁ • ྫΛݟ͍͍ͯͨͩͯɺผʑͷཁૉΛಉҰࢹͯ͠ѻ͏͜ͱJavaͷΑ͏ ͳΦϒδΣΫτࢦݴޠͰͳͯ͘Ͱ͖Δ͜ͱΛઆ໌͠·ͨ͠
ґଘੑೖ ʢDependency Injectionʣ
ґଘੑೖʢDependency Injectionʣ ͱʁ “ʮΦϒδΣΫτ͕͏ػೳͷ࣮ମΛಘΔࡍɺͦͷղܾΛࣗྗͰߦΘͣɺৗʹ֎෦͔Β༩͑ΔΑ͏ʹ͢͠ʯͱ͍͏ઃܭํͰ͢ɻ” ൈਮ: ͪΐ͏ͥͭιϑτΣΞઃܭೖ !! PHPͰཧղ͢ΔΦϒδΣΫτࢦͷ׆༻ ాதͻͯ͞Δ
લఏ • Dependency Injection ͷઃܭํͷͰɺDIίϯςφʔͷ͠· ͤΜ
DIͷྫ RepositoryʢӬଓԽͱͷΓͱΓʣ ͱUsecaseʢϏδωεϩδοΫʣͷ Λɻ UsecaseӬଓԽͷ࣮ͷৄࡉʹ ґଘͤ͞ͳ͍Α͏ʹ͠·͢ ΫϥεͷಠཱੑΛߴΊɺςελϏϦ ςΟΛ͋͛ΔϝϦοτ͕͋Γ·͢
ϑϩϯτΤϯυͷྫͰߟ͑Δ
ྫʣStorybookςετͰར༻͢ΔComponent͔Β֎෦ґଘΛണ͕͢ • StorybookςετͰ͏ίϯϙʔωϯτͷதͰAPI௨৴WebApiΛ ར༻͍ͯ͠Δ͜ͱ͕͋Γ·͢ • mswɺ@storybook/jest ΛͬͯMock(Spy)Ͱ͖Δ͕ͬͱखܰʹ ৼΔ͍Λมߋ͍ͨ͠ • Kintoneͷ߹্هͷέʔεҎ֎ͰGlobalมͷґଘࢭͨ͠
͍έʔε͕͋Γ·ͨ͠
֎෦APIͷґଘ StorybookςετͰ֎෦ڥ͕ ͳ͍߹ࣦഊͯ͠͠·͍·͢ ͳΜΒ͔ͷํ๏ͰMock͕ඞཁͰ͢
ReactContextΛͬͨґଘͷೖ
ContextApiΛͬͯ֎ ෦ґଘΛೖ͢Δ postJsonͷΑ͏ͳ֎෦APIʹґଘ͢Δ ؔΛContextΛͬͯComponetʹ ೖ͢ΔΈΛ࡞Γ·͢ Storybookςετ࣌ ContextProviderΛΓସ͑Δ͚ͩͰ postJsonͷৼΔ͍Λมߋ͢Δ͜ͱ͕ Ͱ͖·͢
·ͱΊɿΦϒδΣΫτࢦͷϓϥΫςΟεΛϑϩϯτΤϯυͰ׆༻͢Δ ͝ཡ͍͍ͨͩͨ௨ΓϙϦϞʔϑΟζϜDIαʔόʔαΠυͷΦϒδΣΫτࢦ ͷ։ൃͰ͔͠ར༻Ͱ͖ͳ͍ͷͰͳ͍Ͱ͢ɻ ClassΛΘͳ͍ϓϩάϥϛϯάͰΦϒδΣΫτࢦͷߟ͑ํΛઃܭੜ͔ͤ Δ͜ͱ͕͋Γ·͢ɻ ΄͔ʹΦϒδΣΫτࢦͷϓϥΫςΟεΛϑϩϯτΤϯυ։ൃʹऔΓೖΕ ͍ͯ͘͜ͱͰίʔυͷ࣭ΛվળͰ͖Δͱࢥ͏ͷͰͥͻࢼ͍͚ͯͨͩ͠Δͱ ͏Ε͍͠Ͱ͢ʂ
We are Hiring!!