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

by Cybozu

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

νʔϜͷ׆ಈ಺༰ w ࢧԉ   ϓϩμΫτνʔϜ͕ΑΓଟ͘ͷՁ஋ΛϢʔβʔʹૉૣ͘ఏڙग़དྷΔΑ͏ʹɺ   ֤ϓϩμΫτͷϑϩϯτΤϯυ๊͕͑Δ໰୊Λઐ໳ੑΛ΋ͬͯղܾ͢Δ w ൃ৴   8FCϑϩϯτΤϯυʹ͓͚Δ$ZCP[VͷϓϨθϯε޲্ͷͨΊʹɺ   ੵۃతʹ৘ใൃ৴Λߦ͏ w ܒ໤   ࣾ಺ͷ8FCϑϩϯτΤϯυͷٕज़ྗ޲্ͷͨΊͷܒ໤׆ಈΛߦ͏ w ୳ڀ   ϓϩμΫτͷՄೳੑΛ޿͛ΔͨΊʹɺ8FCϑϩϯτΤϯυٕज़ͷௐࠪɾݕূΛߦ͏

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ࢧԉɾ୳ڀ಺༰ʹ͍ͭͯ

Slide 7

Slide 7 text

ࢧԉ׆ಈͷ಺༰ w ࢧԉ׆ಈ͸ଟذʹΘͨΓ·͢ w ϓϩμΫτͷݹ͍044ΛϦχϡʔΞϧ w ϓϩμΫτͷϞμϯԽ w ྫʣ$MPTVSF5PPMT͔Β3FBDUʴ5ZQF4DSJQU؀ڥ΁ w 2"νʔϜͱҰॹʹϞϒϓϩάϥϛϯάͰ   ςετ࡞੒ w 8FCαΠτͷύϑΥʔϚϯεௐࠪ w FUD

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ൃ৴ͱܒ໤׆ಈ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

$ZCP[V'SPOUFOE8FFLMZ w ໨త w ࣾ಺ʹ޲͚ͯ8FCϑϩϯτΤϯυ৘ใΛΩϟονΞοϓͰ͖ΔΑ͏ʹ w ࣾ֎ʹ޲͚ͯϋογϡλάͳͲͰ࣮گ͠ɺ   ͲͷΑ͏ͳ͜ͱΛ΍͍ͬͯΔ͔஌ͬͯ΋Β͏ͨΊʹ w ಺༰ w ༗ࢤ͕ຖिϑϩϯτΤϯυ৘ใΛϐοΫΞοϓ͠ɺ   ࣾ಺ͷࢀՃऀͨͪͰҙݟ΍ྺ࢙తܦҢͳͲΛަ͑ͭͭϫΠϫΠ࿩͠߹͏ w ຖिՐ༵೔࣌d࣌։࠵ ˌαΠϘ΢ζϑϩϯτΤϯυ΢ΟʔΫϦʔ

Slide 20

Slide 20 text

$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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ϒϩάهࣄͷࣥච IUUQTCMPHDZCP[VJP

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

8FBSFIJSJOH🎉