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.6k
オブジェクト指向のプラクティスをフロントエンドで活用する
Nokogiri
June 14, 2023
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
Zustandを用いた実践的状態管理
undefined_name
3
590
React Testing Libraryでの WAI-ARIAロールの活用事例
undefined_name
1
170
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
5
1.7k
Pipe Operator (|>) の紹介
undefined_name
2
350
FizzBuzzで学ぶOCP
undefined_name
0
130
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.9k
モププロ@kintone開発チーム
undefined_name
1
600
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.3k
Usefull GitLens
undefined_name
3
830
Other Decks in Programming
See All in Programming
Laravel Boost 超入門
fire_arlo
3
220
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
AIでLINEスタンプを作ってみた
eycjur
1
230
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
🔨 小さなビルドシステムを作る
momeemt
4
690
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
160
AIコーディングAgentとの向き合い方
eycjur
0
280
Testing Trophyは叫ばない
toms74209200
0
890
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
The Invisible Side of Design
smashingmag
301
51k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Language of Interfaces
destraynor
161
25k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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!!