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
プロフィールビュアーサービスProfllyのフロントエンド開発話
Search
hirobel
October 12, 2021
0
650
プロフィールビュアーサービスProfllyのフロントエンド開発話
hirobel
October 12, 2021
Tweet
Share
More Decks by hirobel
See All by hirobel
第1回 深夜のAWS勉強会オープニングスライド
hirobel
0
93
サーバレス系開発者がAmazon EC2について説明してみる
hirobel
0
180
Nuxt.jsでSPAを実装してみた話
hirobel
0
3.3k
初心者向けAWS(Lightsail)で初めるWordPress構築
hirobel
0
84
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How GitHub (no longer) Works
holman
314
140k
Music & Morning Musume
bryan
46
6.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Automating Front-end Workflow
addyosmani
1370
200k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
How to train your dragon (web standard)
notwaldorf
95
6.1k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Transcript
৽نࣄۀ౷ׅ෦Ճ౻໌ ϓϩϑΟʔϧϏϡΞʔαʔϏε1SPqMZͷϑϩϯτΤϯυ։ൃ
ηογϣϯ֓ཁ ࠓ݄ʹϩʔϯνͨ͠ϓϩϑΟʔϧϏϡΞʔαʔϏε 1SPqMZʹ͍ͭͯɺզʑ1SPqMZ։ൃνʔϜ͕ɺϑϩϯτ Τϯυ։ൃͰۤ࿑ͨ͠ɺͨ͠ɺࠓޙͷ՝ײʹ ͍͓ͭͯ͠·͢ɻ Illustration by Stories by Freepik
ࣗݾհ Ճ౻໌!IJSPCFM ιϑτΣΞΤϯδχΞ 4BB4ϓϩμΫτͷاըɾ։ൃɾӡ༻
ΞδΣϯμ w 1SPqMZͱ w ϑϩϯτΤϯυ։ൃͷελΠϧ w ͨ͠ w ۤ࿑ͨ͠ w
ࠓޙͷ՝
1SPqMZͱ
1SPqMZͱ
ଟ࠼ͳϓϩϑΟʔϧ߲
ࣾһͷεΩϧɾࢿ֨ͳͲΛݕࡧ
ϑϩϯτΤϯυ։ൃͷελΠϧ
ମ੍ ϑϩϯτΤϯυ୲ɺόοΫΤϯυ୲ͱ͍͏୲ͳ͠
ମ੍ w εΫϥϜϕʔεͷ։ൃख๏Λ࠾༻ w λΠϜϘοΫεिؒ w िؒεϓϦϯτ w εϓϦϯτຖʹ୲͢ΔόοΫϩάΞΠςϜΛܾఆ w
༏ઌॱҐͷߴ͍ͷ͔Β
ମ੍ PO Dev Designer Dev Dev Dev ౦ژ ౦ژ Ἒ
ࡳຈ ࢁ ௗऔ 5 3 4 3 1 5 िՔಇ ڌ ׂ Dev ੩Ԭ 3 Dev ౡ 5
ମ੍ PO Dev Designer Dev Dev Dev ౦ژ ౦ژ Ἒ
ࡳຈ ࢁ ௗऔ 5 3 4 3 1 5 िՔಇ ڌ ׂ Dev ੩Ԭ 3 Dev ౡ 5
ମ੍ PO Dev Designer Dev Dev Dev ౦ژ ౦ژ Ἒ
ࡳຈ ࢁ ௗऔ 5 3 4 3 1 5 िՔಇ ڌ ׂ Dev ੩Ԭ 3 Dev ౡ 5
ମ੍ PO Designer Devs w 'JHNBͰͷ6*σβΠϯ ཧ w શһ͕ಉ͡πʔϧͰ6*σ βΠϯΛ֬ೝͰ͖Δ
ϑϩʔ ࡞ۀ ༷ࡦఆ σβΠϯσʔλ࡞ʢ'JHNBʣ ઃܭॻ࡞ ίʔσΟϯά σϓϩΠ w 10͕όοΫϩάΞΠςϜʢ ༷ʣΛ࡞
w σβΠφʔ͕ɺ10ͱ͠߹͍ ͳ͕ΒɺσβΠϯཁ݅Λ߹ҙ PO Designer Devs Leader
ϑϩʔ ࡞ۀ ༷ࡦఆ σβΠϯσʔλ࡞ʢ'JHNBʣ ઃܭॻ࡞ ίʔσΟϯά σϓϩΠ w σβΠφʔ͕6*σβΠϯΛ࡞ w
10ɺσϕϩούʔʹରͯ͠σ βΠϯͷ'#ΛదͳཻͰٻ ΊɺඞཁʹԠͯ͡मਖ਼ PO Designer Devs Leader
ϑϩʔ ࡞ۀ ༷ࡦఆ σβΠϯσʔλ࡞ʢ'JHNBʣ ઃܭॻ࡞ ίʔσΟϯά σϓϩΠ w σϕϩούʔ͕σβΠϯΛ࣮ݱ w
ٕज़ௐࠪɾݟੵΓɾඞཁʹԠ ͡σβΠϯɾείʔϓͷٯఏҊ PO Designer Devs Leader
ͨ͠
ͨ͠
ͨ͠ w 'JHNBͰͷ6*σβΠϯ࡞ w աڈʹࢲͷؔΘͬͨผҊ݅Ͱɺ6*σβΠϯΛ1IPUPTIPQ ͰɺϓϩτλΠϐϯάπʔϧ*O7JTJPOͰɺͱ͍͏Α͏ʹ ผʑͳπʔϧΛར༻ͯ͠Φʔόʔϔου͕ൃੜ͍ͯͨ͠ w 7VFUJGZͷ6*ίϯϙʔωϯτͷར༻
ิɿ7VFUJGZͱ w 7VFKT༻ͷ6*ϑϨʔϜϫʔΫ w ϚςϦΞϧσβΠϯʹଇͬͨσβΠϯ͕ࢪ͞Ε͍ͯΔ w ؆୯ʹʮ͍͍ײ͡ʯͷσβΠϯ͕࡞ΕΔ w ͨͩ͠ɺ͖ෆ͖͋Δ w
Ξοϓσʔτ͕׆ൃ
ͨ͠ w 'JHNBͰͷ$44ϓϩύ ςΟ֬ೝ w /VYUKTΛར༻࣮ͨ͠ w "UPNJD%FTJHOΛར༻ ͨ͠ίϯϙʔωϯτ ׂϙϦγʔͷࡦఆ
ͨ͠ w 'JHNBͰͷ$44ϓϩύ ςΟ֬ೝ w /VYUKTΛར༻࣮ͨ͠ w "UPNJD%FTJHOΛར༻ ͨ͠ίϯϙʔωϯτ ׂϙϦγʔͷࡦఆ
ͨ͠ɿ/VYUKTΛར༻࣮ͨ͠ w 7VFKTϕʔεͷϑϨʔϜϫʔΫ w σΟϨΫτϦߏ͕جຊతʹܾ·͍ͬͯΔͷͰ໎͍ʹ ͍͘ w Ξοϓσʔτ͕׆ൃ
ͨ͠ w 'JHNBͰͷ$44ϓϩύ ςΟ֬ೝ w /VYUKTΛར༻࣮ͨ͠ w "UPNJD%FTJHOΛར༻ ͨ͠ίϯϙʔωϯτ ׂϙϦγʔͷࡦఆ
https://bradfrost.com/blog/post/atomic-web-design/
ͨ͠ɿ"UPNJD%FTJHOΛར༻ͨ͠ίϯϙʔωϯτׂϙϦγʔͷࡦఆ w 6*ઃܭͷํ๏ w ϞδϡʔϧԽͷߟ͑ํΛ νʔϜͰἧ͑Δͷʹศར w νʔϜʹ߹Θ͍ͤͨํ Λߟ͑Δඞཁ͕͋Δ (https://atomicdesign.bradfrost.com/chapter-2/
ΑΓҾ༻)
ۤ࿑ͨ͠
7VFUJGZͷ6*ίϯϙʔωϯτͷݸผΧελϚΠζ w ΧελϚΠζΛ͢Δຖʹίʔυ ͕૿͑Δ w σϑΥϧτͷελΠϧΠϯλ ϥΫγϣϯʹؾ͖ͮʹ͍͘߹ ͕͋Δ ˠదٓɺམͱ͠ॴΛͪΌΜͱٞ ΧελϚΠζͨ͠෦
ίϯϙʔωϯτͷ͚ํ w ʢ"UPNJD%FTJHOΛϕʔεʹ͍ͯ͠Δͱ ͍͑ʣϞδϡʔϧͷ͚ํʹ໎͏ w ྫ͑ɺPSHBOJTNTɺNPMFDVMFTͷͲͪΒʹೖͬ ͓͔ͯ͘͠ͳ͍Α͏ͳϞδϡʔϧ͕͋ͬͨΓ͢ Δͱ͔ɺ݁ہ͚ΒΕͣʹPSHBOJTNT͚͕ͩංେ Խͯ͠͠·͏ͱ͔ɾɾɻ w
ॊೈͳɺϓϩδΣΫτͰʮܾΊʯΛ࡞ͬͨΓׂ ΓΔέʔεੜ͡Δ ˠҰج४Λ໌จԽͯ͠Έ্ͨͰɺϨϏϡʔ࣮࣌ લʹٞ͢ΔͳͲͯ͠མͱ͠ॴΛܾΊΔ
ΦϯϘʔσΟϯά w ίϯϙʔωϯτԽ͕ਐΉʹͭΕͯɺٯʹϞδϡʔϧಉ ࢜ͷؔੑ͕ॴݟͰѲͮ͠Β͍ ˠ࠷ॳ͔Βͯ͢ΛѲ͓ͯ͜͠͏ͱ͠ͳ͍ ˠະܦݧͷՕॴܦݧऀͱϖΞϓϩͰॿΛ͚ͭΔ
ࠓޙͷ՝ײ
σβΠϯͷࠩผ͕ग़͠ʹ͍͘ w ౷Ұײ͕͋Δ6*ͱͳΔΛ͖ͯͨ͜͠ͱͰɺٯʹಠ ࣗੑ͕ੜ·Εʹ͘͘ɺࠩผ͕ग़͠ʹ͍͘ͱ͍͏໘͕ ͋Δ ˠશମͷόϥϯεΛߟ͑ͭͭɺ7VFUJGZͷ6*ϑϨʔϜ ϫʔΫͷ੍ݶʹनΘΕ͗͢ͳ͍σβΠϯΛߟ͑Δɻඞཁ ʹԠٕͯ͡ज़తͳνϟϨϯδʹ࣌ؒΛׂ͚ΔΑ͏ʹɺ։ ൃͷޮԽΛܧଓ͢Δɻ
σϦόϦʔͷ༏ઌͱσβΠϯ࠶ݱͷόϥϯε w σβΠϯͱશʹҰக͖͠Εͳ͍Օॴ͕Δ͜ͱ͕ ͋Δ ˠεϓϦϯτͰᘳʹ͠Α͏ͱ͠ͳ͍ ˠҰ୴ه͓͍ͯͯ͠ɺผͳλΠϛϯάͰվળ͢Δʢຖ िͷʮ,"*;&/ΞϫʔʯͳͲʣ
͍͞͝ʹ
͍͞͝ʹ w πʔϧϑϨʔϜϫʔΫͳͲͷΈͰղܾͰ͖Δ͜ ͱͦͪΒʹͤɺຊ࣭తͳՁΛͭ͘Δ͜ͱʹ࣌ؒ Λ͔͚ΒΕΔΑ͏ʹ͢Δ w ܧଓతʹվળΛଓ͚͍ͯ͘ w ࠓޙͷ1SPqMZʹ͝ظ͍ͩ͘͞