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

Transcript

1.  ৽نࣄۀ౷ׅ෦
   Ճ౻୓໌ ϓϩϑΟʔϧϏϡΞʔαʔϏε1SPqMZͷϑϩϯτΤϯυ։ൃ࿩
2. ηογϣϯ֓ཁ ࠓ೥݄ʹϩʔϯνͨ͠ϓϩϑΟʔϧϏϡΞʔαʔϏε 1SPqMZʹ͍ͭͯɺզʑ1SPqMZ։ൃνʔϜ͕ɺϑϩϯτ Τϯυ։ൃͰۤ࿑ͨ͠఺ɺ޻෉ͨ͠఺ɺࠓޙͷ՝୊ײʹ ͍͓ͭͯ࿩͠·͢ɻ Illustration by Stories by Freepik
3. ࣗݾ঺հ Ճ౻
   ୓໌
   !IJSPCFM
   ιϑτ΢ΣΞΤϯδχΞ
   4BB4ϓϩμΫτͷاըɾ։ൃɾӡ༻
4. ΞδΣϯμ w 1SPqMZͱ͸
   w ϑϩϯτΤϯυ։ൃͷελΠϧ
   w ޻෉ͨ͠఺
   w ۤ࿑ͨ͠఺
   w ࠓޙͷ՝୊
5. 1SPqMZͱ͸
6. 1SPqMZͱ͸
7. ଟ࠼ͳϓϩϑΟʔϧ߲໨
8. ࣾһͷεΩϧɾࢿ֨ͳͲΛݕࡧ
9. ϑϩϯτΤϯυ։ൃͷελΠϧ
10. ମ੍ ϑϩϯτΤϯυ୲౰ɺόοΫΤϯυ୲౰ͱ͍͏෼୲ͳ͠
11. ମ੍ w εΫϥϜϕʔεͷ։ൃख๏Λ࠾༻
    w λΠϜϘοΫε͸िؒ
    w िؒεϓϦϯτ
    w εϓϦϯτຖʹ୲౰͢ΔόοΫϩάΞΠςϜΛܾఆ
    w ༏ઌॱҐͷߴ͍΋ͷ͔Β
12. ମ੍ PO Dev Designer Dev Dev Dev ౦ژ ౦ژ Ἒ৓ ࡳຈ ෋ࢁ ௗऔ 5 3 4 3 1 5 िՔಇ ڌ఺ ໾ׂ Dev ੩Ԭ 3 Dev ෱ౡ 5
13. ମ੍ PO Dev Designer Dev Dev Dev ౦ژ ౦ژ Ἒ৓ ࡳຈ ෋ࢁ ௗऔ 5 3 4 3 1 5 िՔಇ ڌ఺ ໾ׂ Dev ੩Ԭ 3 Dev ෱ౡ 5
14. ମ੍ PO Dev Designer Dev Dev Dev ౦ژ ౦ژ Ἒ৓ ࡳຈ ෋ࢁ ௗऔ 5 3 4 3 1 5 िՔಇ ڌ఺ ໾ׂ Dev ੩Ԭ 3 Dev ෱ౡ 5
15. ମ੍ PO Designer Devs w 'JHNBͰͷ6*σβΠϯ ؅ཧ
    w શһ͕ಉ͡πʔϧͰ6*σ βΠϯΛ֬ೝͰ͖Δ
16. ϑϩʔ ࡞ۀ ࢓༷ࡦఆ σβΠϯσʔλ࡞੒ʢ'JHNBʣ ઃܭॻ࡞੒ ίʔσΟϯά σϓϩΠ w 10͕όοΫϩάΞΠςϜʢ࢓ ༷ʣΛ࡞੒
    w σβΠφʔ͕ɺ10ͱ࿩͠߹͍ ͳ͕ΒɺσβΠϯཁ݅Λ߹ҙ PO Designer Devs Leader
17. ϑϩʔ ࡞ۀ ࢓༷ࡦఆ σβΠϯσʔλ࡞੒ʢ'JHNBʣ ઃܭॻ࡞੒ ίʔσΟϯά σϓϩΠ w σβΠφʔ͕6*σβΠϯΛ࡞੒
    w 10ɺσϕϩούʔʹରͯ͠σ βΠϯͷ'#Λద੾ͳཻ౓Ͱٻ ΊɺඞཁʹԠͯ͡मਖ਼ PO Designer Devs Leader
18. ϑϩʔ ࡞ۀ ࢓༷ࡦఆ σβΠϯσʔλ࡞੒ʢ'JHNBʣ ઃܭॻ࡞੒ ίʔσΟϯά σϓϩΠ w σϕϩούʔ͕σβΠϯΛ࣮ݱ
    w ٕज़ௐࠪɾݟੵ΋ΓɾඞཁʹԠ ͡σβΠϯɾείʔϓͷٯఏҊ PO Designer Devs Leader
19. ޻෉ͨ͠఺
20. ޻෉ͨ͠఺
21. ޻෉ͨ͠఺ w 'JHNBͰͷ6*σβΠϯ࡞੒
    w աڈʹࢲͷؔΘͬͨผҊ݅Ͱ͸ɺ6*σβΠϯΛ1IPUPTIPQ ͰɺϓϩτλΠϐϯάπʔϧ͸*O7JTJPOͰɺͱ͍͏Α͏ʹ ผʑͳπʔϧΛར༻ͯ͠Φʔόʔϔου͕ൃੜ͍ͯͨ͠
    w 7VFUJGZͷ6*ίϯϙʔωϯτͷར༻
22. ิ଍ɿ7VFUJGZͱ͸ w 7VFKT༻ͷ6*ϑϨʔϜϫʔΫ
    w ϚςϦΞϧσβΠϯʹଇͬͨσβΠϯ͕ࢪ͞Ε͍ͯΔ
    w ؆୯ʹʮ͍͍ײ͡ʯͷσβΠϯ͕࡞ΕΔ
    w ͨͩ͠ɺ޲͖ෆ޲͖΋͋Δ
    w Ξοϓσʔτ͕׆ൃ
23. ޻෉ͨ͠఺ w 'JHNBͰͷ$44ϓϩύ ςΟ֬ೝ
    w /VYUKTΛར༻࣮ͨ͠૷
    w "UPNJD
    %FTJHOΛར༻ ͨ͠ίϯϙʔωϯτ෼ ׂϙϦγʔͷࡦఆ
24. ޻෉ͨ͠఺ w 'JHNBͰͷ$44ϓϩύ ςΟ֬ೝ
    w /VYUKTΛར༻࣮ͨ͠૷
    w "UPNJD
    %FTJHOΛར༻ ͨ͠ίϯϙʔωϯτ෼ ׂϙϦγʔͷࡦఆ
25. ޻෉ͨ͠఺ɿ/VYUKTΛར༻࣮ͨ͠૷ w 7VFKTϕʔεͷϑϨʔϜϫʔΫ
    w σΟϨΫτϦߏ੒͕جຊతʹܾ·͍ͬͯΔͷͰ໎͍ʹ ͍͘
    w Ξοϓσʔτ͕׆ൃ
26. ޻෉ͨ͠఺ w 'JHNBͰͷ$44ϓϩύ ςΟ֬ೝ
    w /VYUKTΛར༻࣮ͨ͠૷
    w "UPNJD
    %FTJHOΛར༻ ͨ͠ίϯϙʔωϯτ෼ ׂϙϦγʔͷࡦఆ https://bradfrost.com/blog/post/atomic-web-design/
27. ޻෉ͨ͠఺ɿ"UPNJD
    %FTJHOΛར༻ͨ͠ίϯϙʔωϯτ෼ׂϙϦγʔͷࡦఆ w 6*ઃܭͷํ๏࿦
    w ϞδϡʔϧԽͷߟ͑ํΛ νʔϜͰἧ͑Δͷʹศར
    w νʔϜʹ߹Θͤͨ࢖͍ํ Λߟ͑Δඞཁ͕͋Δ (https://atomicdesign.bradfrost.com/chapter-2/ ΑΓҾ༻)
28. ۤ࿑ͨ͠఺
29. 7VFUJGZͷ6*ίϯϙʔωϯτͷݸผΧελϚΠζ w ΧελϚΠζΛ͢Δຖʹίʔυ ͕૿͑Δ
    w σϑΥϧτͷελΠϧ΍Πϯλ ϥΫγϣϯʹؾ͖ͮʹ͍͘৔߹ ͕͋Δ
    ˠదٓɺམͱ͠ॴΛͪΌΜͱٞ࿦ ΧελϚΠζͨ͠෦෼
30. ίϯϙʔωϯτͷ෼͚ํ w ʢ"UPNJD
    %FTJHOΛϕʔεʹ͍ͯ͠Δͱ͸ ͍͑ʣϞδϡʔϧͷ෼͚ํʹ໎͏
    w ྫ͑͹ɺPSHBOJTNTɺNPMFDVMFTͷͲͪΒʹೖͬ ͯ΋͓͔͘͠ͳ͍Α͏ͳϞδϡʔϧ͕͋ͬͨΓ͢ Δͱ͔ɺ݁ہ෼͚ΒΕͣʹPSHBOJTNT͚͕ͩංେ Խͯ͠͠·͏ͱ͔ɾɾɻ
    w ॊೈͳ෼ɺϓϩδΣΫτͰʮܾΊʯΛ࡞ͬͨΓׂ Γ੾Δέʔε͸ੜ͡Δ
    ˠҰ౓ج४Λ໌จԽͯ͠Έ্ͨͰɺϨϏϡʔ࣌΍࣮ ૷લʹٞ࿦͢ΔͳͲͯ͠མͱ͠ॴΛܾΊΔ
31. ΦϯϘʔσΟϯά w ίϯϙʔωϯτԽ͕ਐΉʹͭΕͯɺٯʹϞδϡʔϧಉ ࢜ͷؔ܎ੑ͕ॴݟͰ೺Ѳͮ͠Β͍
    ˠ࠷ॳ͔Β͢΂ͯΛ೺Ѳ͓ͯ͜͠͏ͱ͠ͳ͍
    ˠະܦݧͷՕॴ͸ܦݧऀͱϖΞϓϩͰॿ૸Λ͚ͭΔ
    
32. ࠓޙͷ՝୊ײ
33. σβΠϯͷࠩผ఺͕ग़͠ʹ͍͘ w ౷Ұײ͕͋Δ6*ͱͳΔ޻෉Λ͖ͯͨ͜͠ͱͰɺٯʹಠ ࣗੑ͕ੜ·Εʹ͘͘ɺࠩผ఺͕ग़͠ʹ͍͘ͱ͍͏໘͕ ͋Δ
    ˠશମͷόϥϯεΛߟ͑ͭͭɺ7VFUJGZ౳ͷ6*ϑϨʔϜ ϫʔΫͷ੍ݶʹनΘΕ͗͢ͳ͍σβΠϯΛߟ͑Δɻඞཁ ʹԠٕͯ͡ज़తͳνϟϨϯδʹ࣌ؒΛׂ͚ΔΑ͏ʹɺ։ ൃͷޮ཰ԽΛܧଓ͢Δɻ
34. σϦόϦʔͷ༏ઌ౓ͱσβΠϯ࠶ݱ౓ͷόϥϯε w σβΠϯͱ׬શʹ͸Ұக͖͠Εͳ͍Օॴ͕࢒Δ͜ͱ͕ ͋Δ
    ˠεϓϦϯτ಺Ͱ׬ᘳʹ͠Α͏ͱ͠ͳ͍
    ˠҰ୴ه࿥͓͍ͯͯ͠ɺผͳλΠϛϯάͰվળ͢Δʢຖ िͷʮ,"*;&/ΞϫʔʯͳͲʣ
35. ͍͞͝ʹ
36. ͍͞͝ʹ w πʔϧ΍ϑϨʔϜϫʔΫͳͲͷ࢓૊ΈͰղܾͰ͖Δ͜ ͱ͸ͦͪΒʹ೚ͤɺຊ࣭తͳՁ஋Λͭ͘Δ͜ͱʹ࣌ؒ Λ͔͚ΒΕΔΑ͏ʹ͢Δ
    w ܧଓతʹվળΛଓ͚͍ͯ͘
    w ࠓޙͷ1SPqMZʹ΋͝ظ଴͍ͩ͘͞