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
The Invisible Side of Design
smashingmag
301
51k
Agile that works and the tools we love
rasmusluckow
329
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
How to Ace a Technical Interview
jacobian
278
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Unsuck your backbone
ammeep
671
58k
Rails Girls Zürich Keynote
gr2m
95
14k
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ʹ͝ظ͍ͩ͘͞