サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team

Transcript

1. ϑϩϯτΤϯυΤΩεύʔτνʔϜʹ͍ͭͯ
   ߋ৽೥݄೔
   

   View Slide

2. νʔϜͷଘࡏҙٛ
   αΠϘ΢ζͷϑϩϯτΤϯυΛ࠷ߴʹ͢Δ
   

   View Slide

3. νʔϜͷ׆ಈ಺༰
   w ࢧԉ
   

   ϓϩμΫτνʔϜ͕ΑΓଟ͘ͷՁ஋ΛϢʔβʔʹૉૣ͘ఏڙग़དྷΔΑ͏ʹɺ
   

   ֤ϓϩμΫτͷϑϩϯτΤϯυ๊͕͑Δ໰୊Λઐ໳ੑΛ΋ͬͯղܾ͢Δ
   w ൃ৴
   

   8FCϑϩϯτΤϯυʹ͓͚Δ$ZCP[VͷϓϨθϯε޲্ͷͨΊʹɺ
   

   ੵۃతʹ৘ใൃ৴Λߦ͏
   w ܒ໤
   

   ࣾ಺ͷ8FCϑϩϯτΤϯυͷٕज़ྗ޲্ͷͨΊͷܒ໤׆ಈΛߦ͏
   w ୳ڀ
   

   ϓϩμΫτͷՄೳੑΛ޿͛ΔͨΊʹɺ8FCϑϩϯτΤϯυٕज़ͷௐࠪɾݕূΛߦ͏
   

   View Slide

4. νʔϜͷ׆ಈ
   w ϲ݄୯ҐͰϓϩμΫτࢧԉͱͯ͠ϑΥʔΧε͢Δ͜ͱΛઃఆ
   ͠ɺओ୲౰Λஔ͍ͯ׆ಈ͍ͯ͠·͢
   w νʔϜͷ݈શੑΛਤΔͨΊͷࢦඪͱͯ͠ɺνʔϜͷ׆ಈͷׂ߹͕
   ʮࢧԉ ൃ৴ͱܒ໤ ୳ڀʯͰ͋Δ͜ͱΛ֬ೝ͍ͯ͠·͢
   w िʹ౓ͷৼΓฦΓͰɺϓϩμΫτࢧԉ΍୳ڀ಺༰ͷڞ༗ɺ׆ಈ
   ͷׂ߹ͷ֬ೝΛߦͳ͍ͬͯ·͢
   

   View Slide

5. νʔϜͷཱͪҐஔ
   ϑϩϯτΤϯυͷԣஅతͳ։ൃࢧԉνʔϜͰ͢
   

   View Slide

6. ࢧԉɾ୳ڀ಺༰ʹ͍ͭͯ
   

   View Slide

7. ࢧԉ׆ಈͷ಺༰
   w ࢧԉ׆ಈ͸ଟذʹΘͨΓ·͢
   w ϓϩμΫτͷݹ͍044ΛϦχϡʔΞϧ
   w ϓϩμΫτͷϞμϯԽ
   w ྫʣ$MPTVSF5PPMT͔Β3FBDUʴ5ZQF4DSJQU؀ڥ΁
   w 2"νʔϜͱҰॹʹϞϒϓϩάϥϛϯάͰ
   

   ςετ࡞੒
   w 8FCαΠτͷύϑΥʔϚϯεௐࠪ
   w FUD
   

   View Slide

8. 1VQQFUFFSͰෆཁͳ$44Λ੔ཧ
   1VQQFUFFSͰෆཁͳ$44Λফ͢
   IUUQTCMPHDZCP[VJPFOUSZ
   

   View Slide

9. 4BTT͔ΒTUZMFEDPNQPOFOUT΁ͷҠߦ
   TUZMFEDPNQPOFOUTͷ࠾༻ͱطଘࢿ࢈Λࣺͯͨཧ༝
   IUUQTCMPHDZCP[VJPFOUSZ
   

   View Slide

10. LJOUPOFͷϑϩϯτΤϯυ࡮৽ʹ޲͚ͨऔΓ૊Έͷࢧԉ
    LJOUPOFͷϑϩϯτΤϯυ࡮৽ʹ޲͚ͨऔΓ૊Έ
    IUUQTCMPHDZCP[VJPFOUSZ
    

    View Slide

11. ϑϩϯτΤϯυ࡮৽ͷͨΊͷ%FW5PPMTͷ࡞੒
    ϑϩϯτΤϯυ࡮৽ͷͨΊʹ DevTools Λ࡞ͬͯ։ൃΛḿΒͤΔ
    IUUQTCMPHDZCP[VJPFOUSZ
    

    View Slide

12. ୳ڀ׆ಈʹ͍ͭͯ
    w ֤ʑ͕ςʔϚΛ࣋ͬͯ୳ڀ͍ͯ͠·͢
    w ྫ
    w ϦονςΩετΤσΟλʔͷ୳ڀ
    w ϓϥάΠϯγεςϜͷ୳ڀ
    w 044΁ͷίϯτϦϏϡʔγϣϯFUD
    w ۀ຿ͷҰ؀ͱͯ͠୳ڀͷͨΊͷ࣌ؒΛ֬อ͍ͯ͠·͢
    w ՔಇͷҰఆׂ߹Λ୳ڀ࣌ؒʹॆͯΔ
    w ݄ʹҰ౓ͷ΋͘΋͘ձ
    

    View Slide

13. ΋͘΋͘ձ
    w Ұ೔தɺ୳ڀ׆ಈΛߦ͏
    w ͦͷ೔ͷऴΘΓʹ੒ՌΛൃද
    w Ұ೔Λ֬อ͢Δ͜ͱͰɺΑΓ౿ΈࠐΜͩ୳ڀ͕Մೳ
    w ଞνʔϜͱڞಉͰ։࠵͢Δ͜ͱ΋͋Γ·͢
    

    View Slide

14. ൃ৴ͱܒ໤׆ಈ
    

    View Slide

15. ൃ৴ͱܒ໤ͷ໨త
    w ࣾ಺ͷ8FCϑϩϯτΤϯυͷٕज़ྗ޲্ͷͨΊ
    w $ZCP[VͷϓϨθϯε޲্ͷͨΊ
    

    View Slide

16. ࣾ֎ɾࣾ಺׆ಈ
    w ΧϯϑΝϨϯεɾษڧձͰͷεϙϯαʔ
    w ΧϯϑΝϨϯεɾษڧձ΁ͷࢀՃɾొஃ
    w $ZCP[V'SPOUFOE8FFLMZ
    w αΠϘ΢ζϑϩϯτΤϯυ΢ΟʔΫϦʔ
    w ϒϩά
    w 044ίϯτϦϏϡʔγϣϯ
    w ॻ੶ͷࣥච
    

    View Slide

17. ΧϯϑΝϨϯεɾษڧձ΁ͷొஃ
    

    View Slide

18. ॻ੶ͷࣥච
    ϑϩϯτΤϯυΤΩεύʔτνʔϜͰ
    8%#13&447PMͷಛूهࣄΛࣥච͠·ͨ͠
    IUUQTCMPHDZCP[VJPFOUSZ
    

    View Slide

19. $ZCP[V'SPOUFOE8FFLMZ
    w ໨త
    w ࣾ಺ʹ޲͚ͯ8FCϑϩϯτΤϯυ৘ใΛΩϟονΞοϓͰ͖ΔΑ͏ʹ
    w ࣾ֎ʹ޲͚ͯϋογϡλάͳͲͰ࣮گ͠ɺ
    

    ͲͷΑ͏ͳ͜ͱΛ΍͍ͬͯΔ͔஌ͬͯ΋Β͏ͨΊʹ
    w ಺༰
    w ༗ࢤ͕ຖिϑϩϯτΤϯυ৘ใΛϐοΫΞοϓ͠ɺ
    

    ࣾ಺ͷࢀՃऀͨͪͰҙݟ΍ྺ࢙తܦҢͳͲΛަ͑ͭͭϫΠϫΠ࿩͠߹͏
    w ຖिՐ༵೔࣌d࣌։࠵
    ˌαΠϘ΢ζϑϩϯτΤϯυ΢ΟʔΫϦʔ
    

    View Slide

20. $ZCP[V'SPOUFOE.POUIMZ
    w ໨త
    w ࣾ֎ʹ޲͚ͯ8FCϑϩϯτΤϯυ৘ใΛൃ৴
    w ಺༰
    w $ZCP[V'SPOUFOE8FFLMZͷҰൠެ։൛
    w ຖ݄࠷ऴिͷՐ༵೔࣌d࣌ʹ
    

    :PV5VCF-JWFͰ։࠵
    w աڈͷ։࠵಺༰ಈը
    

    IUUQTXXXZPVUVCFDPNQMBZMJTU
    MJTU1-15OEZO2,EY-;'&;H0;KU@[,(+8P8Z
    ˌαΠϘ΢ζϑϩϯτΤϯυϚϯεϦʔ
    IUUQTDZCP[VHJUIVCJPGSPOUFOENPOUIMZ
    

    View Slide

21. 'SPOUFOE#BS
    w ࣾ಺޲͚ษڧձΛϑϩϯτΤϯυΤΩεύʔτνʔ
    Ϝ͕։࠵͍ͯ͠·͢
    w ೥͔Β೥·Ͱʹճ։࠵͓ͯ͠Γɺ
    ʮ8FCϖʔδͷύϑΥʔϚϯεʯɺʮ3FBDUͷࠓͱ
    ͜Ε͔Βʯɺʮ(PPHMF*0ηογϣϯ·ͱΊʯɺ
    ʮXFCEFW-JWF·ͱΊʯͳͲϑϩϯτΤϯυ
    ʹؔ͢Δ৘ใΛࣾ಺ʹڞ༗͖ͯ͠·ͨ͠ɻ
    

    View Slide

22. ϒϩάهࣄͷࣥච
    IUUQTCMPHDZCP[VJP
    

    View Slide

23. 044ίϯτϦϏϡʔγϣϯ
    044ʹJTTVF΍13Λૹ͍ͬͯ·͢
    ݅
    ೥
    ίϯτϦϏϡʔγϣϯ਺
    ݅
    ೥݄d݄
    ίϯτϦϏϡʔγϣϯ਺
    

    View Slide

24. د෇
    (JU)VC4QPOTPST΍0QFO$PMMFDUJWFΛ௨ͯ͠
    044΍ஂମʹد෇Λߦ͍ͬͯ·͢
    IUUQTPQFODPMMFDUJWFDPNDZCP[V
    IUUQTHJUIVCDPNDZCP[V
    

    View Slide

25. @nus3_ (Tokyo)
    νʔϜϝϯόʔҰཡ
    @__sakito__ (Tokyo) @shisama_ (Osaka) @nakajmg (Ibaraki) @b4h0_c4t (Tokyo)
    @__sosukesuzuki(Ibaraki) @mugi_uno (Toyama) @sajikix (Tokyo)
    

    View Slide

26. 8FBSFIJSJOH🎉
    

    View Slide