Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Cybozu
PRO
March 12, 2021
30k

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

Cybozu
PRO

March 12, 2021
Tweet

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