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.2k
オブジェクト指向のプラクティスをフロントエンドで活用する
Nokogiri
June 14, 2023
Tweet
Share
More Decks by Nokogiri
See All by Nokogiri
FizzBuzzで学ぶOCP
undefined_name
0
32
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2k
モププロ@kintone開発チーム
undefined_name
1
440
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.1k
Usefull GitLens
undefined_name
3
660
kintone開発チームにジョインして6カ月の所感
undefined_name
1
260
Trying State Manegemant without Redux(updated)
undefined_name
1
1.2k
Learning-Hooks
undefined_name
0
550
5分で紹介するエンジニアの知的生産術
undefined_name
0
78
Other Decks in Programming
See All in Programming
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
2 週間で Twitter Bot を作ってみた
contour_gara
0
610
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
7
990
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
雑に思考を整理する技術と効能
konifar
60
29k
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Ruby Pattern Matching
bkuhlmann
0
930
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.5k
Let's learn code review
riofujimon
2
490
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
450
Featured
See All Featured
Building Adaptive Systems
keathley
31
1.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Gamification - CAS2011
davidbonilla
76
4.6k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
It's Worth the Effort
3n
180
27k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Code Review Best Practice
trishagee
55
15k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
A better future with KSS
kneath
231
16k
Bash Introduction
62gerente
604
210k
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!!