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
540
プロフィールビュアーサービスProfllyのフロントエンド開発話
hirobel
October 12, 2021
Tweet
Share
More Decks by hirobel
See All by hirobel
第1回 深夜のAWS勉強会オープニングスライド
hirobel
0
86
サーバレス系開発者がAmazon EC2について説明してみる
hirobel
0
110
Nuxt.jsでSPAを実装してみた話
hirobel
0
3.1k
初心者向けAWS(Lightsail)で初めるWordPress構築
hirobel
0
81
Featured
See All Featured
Designing with Data
zakiwarfel
96
4.8k
Product Roadmaps are Hard
iamctodd
45
9.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
The Invisible Customer
myddelton
114
12k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6k
Designing for humans not robots
tammielis
247
25k
Designing Experiences People Love
moore
136
23k
In The Pink: A Labor of Love
frogandcode
138
21k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
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ʹ͝ظ͍ͩ͘͞