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
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
270
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
AI時代のUIはどこへ行く?
yusukebe
18
8.8k
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
私の後悔をAWS DMSで解決した話
hiramax
4
210
Laravel Boost 超入門
fire_arlo
2
210
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
210
Navigating Dependency Injection with Metro
zacsweers
3
240
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
旅行プランAIエージェント開発の裏側
ippo012
2
890
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
300
AIでLINEスタンプを作ってみた
eycjur
1
230
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Code Reviewing Like a Champion
maltzj
525
40k
Context Engineering - Making Every Token Count
addyosmani
1
35
Writing Fast Ruby
sferik
628
62k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Unsuck your backbone
ammeep
671
58k
A better future with KSS
kneath
239
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Practical Orchestrator
shlominoach
190
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
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!!