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
120
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
5
1.7k
Pipe Operator (|>) の紹介
undefined_name
2
270
FizzBuzzで学ぶOCP
undefined_name
0
87
エンジニアとQAでコラボするフロントエンドリアーキテクチャ開発の事例
undefined_name
4
2.7k
モププロ@kintone開発チーム
undefined_name
1
550
勉強会で登壇者に 質問しづらい課題を解決する サービスをリリースしました🎉
undefined_name
2
1.2k
Usefull GitLens
undefined_name
3
770
kintone開発チームにジョインして6カ月の所感
undefined_name
1
310
Other Decks in Programming
See All in Programming
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
47
17k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
Domain-Driven Transformation
hschwentner
2
1.9k
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
150
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Spring gRPC について / About Spring gRPC
mackey0225
0
220
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
580
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
260
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Automating Front-end Workflow
addyosmani
1368
200k
Six Lessons from altMBA
skipperchong
27
3.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
We Have a Design System, Now What?
morganepeng
51
7.4k
Into the Great Unknown - MozCon
thekraken
35
1.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Rails Girls Zürich Keynote
gr2m
94
13k
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!!