プロフィールビュアーサービスProfllyのフロントエンド開発話

by hirobel

Slide 1

Slide 1 text

৽نࣄۀ౷ׅ෦Ճ౻୓໌ ϓϩϑΟʔϧϏϡΞʔαʔϏε1SPqMZͷϑϩϯτΤϯυ։ൃ࿩

Slide 2

Slide 2 text

ηογϣϯ֓ཁ ࠓ೥݄ʹϩʔϯνͨ͠ϓϩϑΟʔϧϏϡΞʔαʔϏε 1SPqMZʹ͍ͭͯɺզʑ1SPqMZ։ൃνʔϜ͕ɺϑϩϯτ Τϯυ։ൃͰۤ࿑ͨ͠఺ɺ޻෉ͨ͠఺ɺࠓޙͷ՝୊ײʹ ͍͓ͭͯ࿩͠·͢ɻ Illustration by Stories by Freepik

Slide 3

Slide 3 text

ࣗݾ঺հ Ճ౻୓໌!IJSPCFM ιϑτ΢ΣΞΤϯδχΞ 4BB4ϓϩμΫτͷاըɾ։ൃɾӡ༻

Slide 4

Slide 4 text

ΞδΣϯμ w 1SPqMZͱ͸ w ϑϩϯτΤϯυ։ൃͷελΠϧ w ޻෉ͨ͠఺ w ۤ࿑ͨ͠఺ w ࠓޙͷ՝୊

Slide 5

Slide 5 text

1SPqMZͱ͸

Slide 6

Slide 6 text

1SPqMZͱ͸

Slide 7

Slide 7 text

ଟ࠼ͳϓϩϑΟʔϧ߲໨

Slide 8

Slide 8 text

ࣾһͷεΩϧɾࢿ֨ͳͲΛݕࡧ

Slide 9

Slide 9 text

ϑϩϯτΤϯυ։ൃͷελΠϧ

Slide 10

Slide 10 text

ମ੍ ϑϩϯτΤϯυ୲౰ɺόοΫΤϯυ୲౰ͱ͍͏෼୲ͳ͠

Slide 11

Slide 11 text

ମ੍ w εΫϥϜϕʔεͷ։ൃख๏Λ࠾༻ w λΠϜϘοΫε͸िؒ w िؒεϓϦϯτ w εϓϦϯτຖʹ୲౰͢ΔόοΫϩάΞΠςϜΛܾఆ w ༏ઌॱҐͷߴ͍΋ͷ͔Β

Slide 12

Slide 12 text

ମ੍ PO Dev Designer Dev Dev Dev ౦ژ ౦ژ Ἒ৓ ࡳຈ ෋ࢁ ௗऔ 5 3 4 3 1 5 िՔಇ ڌ఺ ໾ׂ Dev ੩Ԭ 3 Dev ෱ౡ 5

Slide 13

Slide 13 text

ମ੍ PO Dev Designer Dev Dev Dev ౦ژ ౦ژ Ἒ৓ ࡳຈ ෋ࢁ ௗऔ 5 3 4 3 1 5 िՔಇ ڌ఺ ໾ׂ Dev ੩Ԭ 3 Dev ෱ౡ 5

Slide 14

Slide 14 text

ମ੍ PO Dev Designer Dev Dev Dev ౦ژ ౦ژ Ἒ৓ ࡳຈ ෋ࢁ ௗऔ 5 3 4 3 1 5 िՔಇ ڌ఺ ໾ׂ Dev ੩Ԭ 3 Dev ෱ౡ 5

Slide 15

Slide 15 text

ମ੍ PO Designer Devs w 'JHNBͰͷ6*σβΠϯ ؅ཧ w શһ͕ಉ͡πʔϧͰ6*σ βΠϯΛ֬ೝͰ͖Δ

Slide 16

Slide 16 text

ϑϩʔ ࡞ۀ ࢓༷ࡦఆ σβΠϯσʔλ࡞੒ʢ'JHNBʣ ઃܭॻ࡞੒ ίʔσΟϯά σϓϩΠ w 10͕όοΫϩάΞΠςϜʢ࢓ ༷ʣΛ࡞੒ w σβΠφʔ͕ɺ10ͱ࿩͠߹͍ ͳ͕ΒɺσβΠϯཁ݅Λ߹ҙ PO Designer Devs Leader

Slide 17

Slide 17 text

ϑϩʔ ࡞ۀ ࢓༷ࡦఆ σβΠϯσʔλ࡞੒ʢ'JHNBʣ ઃܭॻ࡞੒ ίʔσΟϯά σϓϩΠ w σβΠφʔ͕6*σβΠϯΛ࡞੒ w 10ɺσϕϩούʔʹରͯ͠σ βΠϯͷ'#Λద੾ͳཻ౓Ͱٻ ΊɺඞཁʹԠͯ͡मਖ਼ PO Designer Devs Leader

Slide 18

Slide 18 text

ϑϩʔ ࡞ۀ ࢓༷ࡦఆ σβΠϯσʔλ࡞੒ʢ'JHNBʣ ઃܭॻ࡞੒ ίʔσΟϯά σϓϩΠ w σϕϩούʔ͕σβΠϯΛ࣮ݱ w ٕज़ௐࠪɾݟੵ΋ΓɾඞཁʹԠ ͡σβΠϯɾείʔϓͷٯఏҊ PO Designer Devs Leader

Slide 19

Slide 19 text

޻෉ͨ͠఺

Slide 20

Slide 20 text

޻෉ͨ͠఺

Slide 21

Slide 21 text

޻෉ͨ͠఺ w 'JHNBͰͷ6*σβΠϯ࡞੒ w աڈʹࢲͷؔΘͬͨผҊ݅Ͱ͸ɺ6*σβΠϯΛ1IPUPTIPQ ͰɺϓϩτλΠϐϯάπʔϧ͸*O7JTJPOͰɺͱ͍͏Α͏ʹ ผʑͳπʔϧΛར༻ͯ͠Φʔόʔϔου͕ൃੜ͍ͯͨ͠ w 7VFUJGZͷ6*ίϯϙʔωϯτͷར༻

Slide 22

Slide 22 text

ิ଍ɿ7VFUJGZͱ͸ w 7VFKT༻ͷ6*ϑϨʔϜϫʔΫ w ϚςϦΞϧσβΠϯʹଇͬͨσβΠϯ͕ࢪ͞Ε͍ͯΔ w ؆୯ʹʮ͍͍ײ͡ʯͷσβΠϯ͕࡞ΕΔ w ͨͩ͠ɺ޲͖ෆ޲͖΋͋Δ w Ξοϓσʔτ͕׆ൃ

Slide 23

Slide 23 text

޻෉ͨ͠఺ w 'JHNBͰͷ$44ϓϩύ ςΟ֬ೝ w /VYUKTΛར༻࣮ͨ͠૷ w "UPNJD%FTJHOΛར༻ ͨ͠ίϯϙʔωϯτ෼ ׂϙϦγʔͷࡦఆ

Slide 24

Slide 24 text

޻෉ͨ͠఺ w 'JHNBͰͷ$44ϓϩύ ςΟ֬ೝ w /VYUKTΛར༻࣮ͨ͠૷ w "UPNJD%FTJHOΛར༻ ͨ͠ίϯϙʔωϯτ෼ ׂϙϦγʔͷࡦఆ

Slide 25

Slide 25 text

޻෉ͨ͠఺ɿ/VYUKTΛར༻࣮ͨ͠૷ w 7VFKTϕʔεͷϑϨʔϜϫʔΫ w σΟϨΫτϦߏ੒͕جຊతʹܾ·͍ͬͯΔͷͰ໎͍ʹ ͍͘ w Ξοϓσʔτ͕׆ൃ

Slide 26

Slide 26 text

޻෉ͨ͠఺ w 'JHNBͰͷ$44ϓϩύ ςΟ֬ೝ w /VYUKTΛར༻࣮ͨ͠૷ w "UPNJD%FTJHOΛར༻ ͨ͠ίϯϙʔωϯτ෼ ׂϙϦγʔͷࡦఆ https://bradfrost.com/blog/post/atomic-web-design/

Slide 27

Slide 27 text

޻෉ͨ͠఺ɿ"UPNJD%FTJHOΛར༻ͨ͠ίϯϙʔωϯτ෼ׂϙϦγʔͷࡦఆ w 6*ઃܭͷํ๏࿦ w ϞδϡʔϧԽͷߟ͑ํΛ νʔϜͰἧ͑Δͷʹศར w νʔϜʹ߹Θͤͨ࢖͍ํ Λߟ͑Δඞཁ͕͋Δ (https://atomicdesign.bradfrost.com/chapter-2/ ΑΓҾ༻)

Slide 28

Slide 28 text

ۤ࿑ͨ͠఺

Slide 29

Slide 29 text

7VFUJGZͷ6*ίϯϙʔωϯτͷݸผΧελϚΠζ w ΧελϚΠζΛ͢Δຖʹίʔυ ͕૿͑Δ w σϑΥϧτͷελΠϧ΍Πϯλ ϥΫγϣϯʹؾ͖ͮʹ͍͘৔߹ ͕͋Δ ˠదٓɺམͱ͠ॴΛͪΌΜͱٞ࿦ ΧελϚΠζͨ͠෦෼

Slide 30

Slide 30 text

ίϯϙʔωϯτͷ෼͚ํ w ʢ"UPNJD%FTJHOΛϕʔεʹ͍ͯ͠Δͱ͸ ͍͑ʣϞδϡʔϧͷ෼͚ํʹ໎͏ w ྫ͑͹ɺPSHBOJTNTɺNPMFDVMFTͷͲͪΒʹೖͬ ͯ΋͓͔͘͠ͳ͍Α͏ͳϞδϡʔϧ͕͋ͬͨΓ͢ Δͱ͔ɺ݁ہ෼͚ΒΕͣʹPSHBOJTNT͚͕ͩංେ Խͯ͠͠·͏ͱ͔ɾɾɻ w ॊೈͳ෼ɺϓϩδΣΫτͰʮܾΊʯΛ࡞ͬͨΓׂ Γ੾Δέʔε͸ੜ͡Δ ˠҰ౓ج४Λ໌จԽͯ͠Έ্ͨͰɺϨϏϡʔ࣌΍࣮ ૷લʹٞ࿦͢ΔͳͲͯ͠མͱ͠ॴΛܾΊΔ

Slide 31

Slide 31 text

ΦϯϘʔσΟϯά w ίϯϙʔωϯτԽ͕ਐΉʹͭΕͯɺٯʹϞδϡʔϧಉ ࢜ͷؔ܎ੑ͕ॴݟͰ೺Ѳͮ͠Β͍ ˠ࠷ॳ͔Β͢΂ͯΛ೺Ѳ͓ͯ͜͠͏ͱ͠ͳ͍ ˠະܦݧͷՕॴ͸ܦݧऀͱϖΞϓϩͰॿ૸Λ͚ͭΔ

Slide 32

Slide 32 text

ࠓޙͷ՝୊ײ

Slide 33

Slide 33 text

σβΠϯͷࠩผ఺͕ग़͠ʹ͍͘ w ౷Ұײ͕͋Δ6*ͱͳΔ޻෉Λ͖ͯͨ͜͠ͱͰɺٯʹಠ ࣗੑ͕ੜ·Εʹ͘͘ɺࠩผ఺͕ग़͠ʹ͍͘ͱ͍͏໘͕ ͋Δ ˠશମͷόϥϯεΛߟ͑ͭͭɺ7VFUJGZ౳ͷ6*ϑϨʔϜ ϫʔΫͷ੍ݶʹनΘΕ͗͢ͳ͍σβΠϯΛߟ͑Δɻඞཁ ʹԠٕͯ͡ज़తͳνϟϨϯδʹ࣌ؒΛׂ͚ΔΑ͏ʹɺ։ ൃͷޮ཰ԽΛܧଓ͢Δɻ

Slide 34

Slide 34 text

σϦόϦʔͷ༏ઌ౓ͱσβΠϯ࠶ݱ౓ͷόϥϯε w σβΠϯͱ׬શʹ͸Ұக͖͠Εͳ͍Օॴ͕࢒Δ͜ͱ͕ ͋Δ ˠεϓϦϯτ಺Ͱ׬ᘳʹ͠Α͏ͱ͠ͳ͍ ˠҰ୴ه࿥͓͍ͯͯ͠ɺผͳλΠϛϯάͰվળ͢Δʢຖ िͷʮ,"*;&/ΞϫʔʯͳͲʣ

Slide 35

Slide 35 text

͍͞͝ʹ

Slide 36

Slide 36 text

͍͞͝ʹ w πʔϧ΍ϑϨʔϜϫʔΫͳͲͷ࢓૊ΈͰղܾͰ͖Δ͜ ͱ͸ͦͪΒʹ೚ͤɺຊ࣭తͳՁ஋Λͭ͘Δ͜ͱʹ࣌ؒ Λ͔͚ΒΕΔΑ͏ʹ͢Δ w ܧଓతʹվળΛଓ͚͍ͯ͘ w ࠓޙͷ1SPqMZʹ΋͝ظ଴͍ͩ͘͞