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
starfish719
December 27, 2023
0
62
フロントエンドの設計刷新〜決断から効果検証まで〜
starfish719
December 27, 2023
Tweet
Share
More Decks by starfish719
See All by starfish719
開発生産性を上げるための生成AI活用術
starfish719
1
110
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
3.2k
ファインディ株式会社における生成AI活用までの軌跡
starfish719
1
3.5k
ファインディの テックブログ爆誕までの軌跡
starfish719
3
3.2k
動作確認やテストで漏れがちな観点3選
starfish719
6
1.5k
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
28
6.8k
Findyの爆速開発を支えるPull requestの粒度
starfish719
0
4.8k
開発生産性実践入門 Pullrequestの粒度編
starfish719
0
1.8k
Gatsby + Netlifyで ポートフォリオサイトを 作った話
starfish719
0
78
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Visualization
eitanlees
148
16k
It's Worth the Effort
3n
187
28k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
Speed Design
sergeychernyshev
32
1.1k
Designing Experiences People Love
moore
142
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
ϑϩϯτΤϯυͷઃܭ৽ ʙܾஅ͔ΒޮՌݕূ·Ͱʙ ϑϩϯτΤϯυͷٕज़తෛ࠴ʹ͖߹͏LTେձ@Ԭ 2023/08/23(ਫ)
ͳͥϑϩϯτΤϯυͷઃܭ৽Λܾஅͨ͠ͷ͔
ҟಈલޙͷൺֱ 3
ҟಈલޙͷൺֱ • ҟಈલͱൺͯੜ࢈ੑ͕ҎԼ·ͰԼ ◦ ײ֮ͱ͕Ұகͨͨ͠ΊɺͲ͔͜͠Βʹ͕͋Δͣ • ίʔυϦʔσΟϯάʹରͯ͠ඞཁҎ্ͷർ࿑ײΛײͨ͡ ◦ ผͷϓϩμΫτͱൺֱͯ͠໌Β͔ʹർ࿑ײ͕ҧͬͨ •
ײ͚֮ͩͰपΓΛೲಘͤ͞Δͷແཧ ◦ ͳͥੜ࢈ੑ͕Լ͕ͬͨͷ͔Λ۩ମతʹચ͍ग़ͯ͠ΈΔ͜ͱʹͨ͠ 4
ͷચ͍ग़͠
ݱߦઃܭͷ • աͳڞ௨Խ ◦ ػೳՃʹڧ͍͕ɺมߋɺআʹऑ͔ͬͨ ◦ άϥϑςʔϒϧ͝ͱʹσʔλ௨৴Λߦ͏Α͏ʹͯ͠ڞ௨Խ͍ͯͨ͠ ▪ άϥϑςʔϒϧͷݟͨಉ͕ͩ͡ɺऔಘɺදࣔ͢Δσʔλ͕ҟͳΔέʔεʹରԠͮ͠Β͍ ▪
σʔλͷऔಘͱද͚ࣔͯߟ͑Δ͖ͩͬͨ • ॲཧʹҰ؏ੑ͕ແ͍ ◦ APIͷݺͼग़͕͠ෳՕॴͰ࣮ߦ͞Ε͓ͯΓɺσʔλͷྲྀΕΛ͏͜ͱ͕ࠔ ◦ util͕utilҎ্ͷ͜ͱΛ͍ͯ͠Δ ▪ utilͰॲཧ͕ίέͨΒྫ֎Λthrow͓ͯ͠Γɺͦͷ࣌ͰΞϓϦέʔγϣϯશମ͕མͪΔ • ςετίʔυΛॻ͖ͮΒ͍ ◦ ඳըΛߦ͏͜ͱʹઐ೦͍ͨͣ͠ͷॲཧͷதͰσʔλͷऔಘ͕࣮ߦ͞Ε͍ͯΔ ◦ ͷ୲͕Ͱ͖͍ͯͳ͍ 6
ઃܭ৽ʹର͢Δೝࣝ߹Θͤͱ߹ҙܗ
ݱϝϯόʔͱೝࣝ߹Θͤ • ςοΫϦʔυ͕ʮΕʯͱݴͬͯϝϯόʔʹΒͤΔͷ؆୯ ◦ ࣗͨͪͰʮΔʯͱݴͬͯΔͷͱɺʮΕʯͱݴΘΕͯΒ͞ΕΔͷՁ͕ҧ͏ • ݱߦͷઃܭʹର͢Δҙݟަ ◦ ϝϯόʔΛूΊͯͰͳ͘ɺ1ਓͣͭ࣌ؒΛऔͬͯΛ͢Δ ◦
ʮࣗ͜͏ࢥͬͯΔΜ͚ͩͲɺͿͬͪΌ͚YouͲ͏ࢥͬͯΔʁʯ • ҙݟΛ·ͱΊͨ݁Ռɺݱߦͷઃܭʹର͢Δҙݟ΄΅Ұகͨ͠ ◦ ࣗͷײ֮ɺɺͦͯ͠पΓͷײ֮શ͕ͯҰகͨ͠ ◦ ϦϑΝΫλೖΕ͍͚ͨͲɺ࡞Γ͠نͩͱֻ͕͔࣌ؒΓ͗͢Δ • ͔͜͜ΒϓϩμΫτ։ൃͷεϐʔυΛߋʹՃͤ͞ΔͨΊʹɺઃܭͷ৽ඞཁෆՄ ܽͱ݁ ◦ ϲ݄ͷؒɺ৽ػೳ։ൃۃྗετοϓ͠ɺઃܭ৽ʹूத͢Δ • ܦӦਞͱͷ߹ҙܗΛ࡞Γʹߦ͘͜ͱʹ 8
ܦӦਞͱͷ߹ҙܗ 9 ࠷ۙͲ͏ʁ ϑϩϯτΤϯυΛ࡞Γͨ͠΄͏͕͍͍ ͔͠Ε·ͤΜɻ ࡞Γͨ͠Βੜ࢈ੑΛ࠷Ͱ2ഒҎ্ ʹҾ্͖͛Δ͜ͱ͕ग़དྷ·͢ɻ Ϛδʁ͡Ό͋ͬͯʂ
߹ҙܗ • ҎલʹผγεςϜͷઃܭ৽Λߦͬͨ͜ͱ͕͋Δ ◦ ͦͷࡍʹੜ࢈ੑΛര্͛ग़དྷ͍ͯͨͨΊɺઃܭ৽ʹର͢Δޭମݧ͕͋Δ ▪ ίετֻ͔Δ͕ɺ͙͢ʹճऩͰ͖ͨͱ͍͏ܦݧ͕͋Δ ▪ ֻ͔ͬͨίετͱϦλʔϯΛͰग़͢͜ͱ͕ग़དྷ͍ͯͨ •
աڈͷޭମݧͱ࣮ࡍͷΛग़͢͜ͱͰɺೝࣝ߹Θͤͱ߹ҙܗ͕ਐΉ 10
ணखલͷ४උ
ணखલͷ४උ • ৽ઃܭํΛݻΊΔ ◦ ଟগͰྑ͍ͷͰɺڞ௨Խ࠷ݶʹཹΊΔ ▪ ͦͷޙɺڞ௨Խ͢Δ͔Ͳ͏͔ͷٞΛ௨ͬͨॲཧ͚ͩڞ௨Խ͢Δ ▪ unit testΛ༻ҙ͓͖ͯ͠ɺޙͷڞ௨ԽͰॲཧ͕յΕͳ͍͜ͱΛอূ͢Δ
◦ ίʔυͷΛ໌֬ʹ͠ɺͦΕҎ্ͷ͜ͱߦΘͳ͍Α͏ʹ͢Δ • ؆୯ͳը໘ΛҰ͚ͭͩ࡞Γ͢ ◦ ৽ઃܭͰͷຌྫͱͯ͠ϝϯόʔʹల։͢Δ ◦ ޱͰઆ໌͢ΔΑΓɺίʔυͰઆ໌ͨ͠΄͏͕ཧղ͍͢͠ • ࣮ࡍͷ࡞Γ͠ͷྲྀΕΛݻΊΔ ◦ ݱঢ়ͷػೳɺελΠϧΛҡ࣋ͨ͠··ɺ҆શʹҠߦ͢Δ͜ͱ͕େલఏ ◦ ϖʔδ୯ҐͰ࡞Γ͠ΛਐΊ͍ͯ͘ ◦ APIطʹͬͯΔͷΛͦͷ··͍ճ͢ 12
࡞Γ͠ͷྲྀΕ
ಉ͡ը໘Λશ͘ҧ͏ίʔυͰ࡞Γͯ͠ผURLͰެ։ جຊతͳ࡞Γ͠ͷྲྀΕ 14 ৽ը໘ΛQA ϧʔςΟϯάΓସ͑ چ࣮Λશআ
࡞Γ͠ͷྲྀΕ • ಉ͡ը໘ΛผURLͰ࣮ ◦ طଘը໘ʹखΛՃ͑ΔͷجຊNG ◦ Ұ࣌తʹಉ͡ը໘͕ҟͳΔURLͰެ։͞ΕΔ ◦ طଘը໘ͱҟͳΔίʔυͰ࣮͍ͯ͠ΔͷͰɺPullrequestΛΨϯΨϯmergeͰ͖Δ •
৽ઃܭͰͷ࣮͕ྃޙɺຊ൪ڥͰಈ࡞֬ೝΛߦ͏ ◦ ಈ࡞֬ೝ͕OKͰ͋Εچ࣮ͷURLͷϧʔςΟϯάΛ৽ઃܭͷը໘ʹ͚Δ ▪ Կ͔͠Βෆ۩߹͕ൃੜͨ͠߹ϧʔςΟϯάΛ͢͜ͱͰճආ • Ұఆظ༷ؒࢠΛݟͯɺͳͦ͞͏ͳΒچ࣮ͷίʔυΛશআ ◦ ࡞Γ͠ͰҰ൪ָ͍͠࡞ۀ 15
ৼΓฦΓ
࡞Γͨ݁͠Ռ લൺͰҰਓͨΓͷੜ࢈ੑ͕2.5ഒఔ·Ͱ্ঢ 17
࡞Γ͠ͷߏ͔Βணखɺྃ·Ͱʹֻ͔ͬͨ • ߹ܭͰ17ਓ݄ఔͷֻ͕͔ͬͨ ◦ ४උظؒͰ1ਓ݄ ◦ ΨοπϦ࡞Γ͠ظؒͰ4ਓ * 3ϲ݄Ͱ12ਓ݄ ◦
͋Δఔ࡞Γ͕͠ऴΘͬͨ͋ͱ1ਓ * 4ϲ݄Ͱ4ਓ݄ • ը໘40ݸఔ ◦ 1ਓͨΓҰिؒ͘Β͍Ͱ1ը໘ͷ࡞Γ͕͠ຊ൪ࠩ͠ସ͑·Ͱྃ͢Δεϐʔυײ • طʹ࡞Γ͠ʹֻ͔ͬͨίετΛճऩࡁ ◦ ໌͚͔Β࡞Γ͠Λ։࢝ͯ͠7݄ʹશͯྃ ◦ 4݄ลΓ͔Β࡞Γ͠ʹֻ͚ΔίετΛԼ͛ɺͷେΛػೳՃͷํʹ͢ ◦ 7݄ͷ࣌Ͱ࡞Γ͠ʹֻ͔ͬͨίετͷճऩʹޭ ▪ 3ਓ ✕ 4ϲ݄ ✕ 2.5ഒ - 3ਓ ✕ 4ϲ݄ = 18ਓ݄ 18
·ͱΊ
·ͱΊ • ࡞Γ͠ɺઃܭ৽ΛఏҊ͢Δલʹɺ·ͣײ֮ͱ࣮ࡍͷΛݟൺΔ ◦ ͔ͦ͜Βϝϯόʔͱͷೝࣝ߹Θͤ • ࣮ࡍͷͱޭମݧͰɺܦӦਞͱͷ߹ҙܗ ◦ ·ͣࣈ͋Γ͖ ◦
ޭମݧ͕͋Ε࣍ͷఏҊࢥͬͨҎ্ʹ্ख͘ਐΉ ◦ ࠷ॳͷޭମݧΛ࡞Δͷ͕ඇৗʹ͍͠ ▪ ࣈΛग़͠ɺখ͞ͳޭମݧΛੵΜͰΈΔ͜ͱ͕େࣄ • ϓϩμΫτͷϑΣΠζʹ߹ΘͤͨઃܭΛ ◦ ϩϯν͔ͨ͠ΓͷͷͱɺͷϑΣΠζʹೖͬͨͷʹٻΊΒΕΔઃܭҧ͏ ◦ ϑΣΠζ͕มΘͬͨͳΒઃܭηοτͰݟ͢ 20
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠