はてなにおけるフロントエンド会のとりくみについて

by Amagi

Slide 1

Slide 1 text

͸ͯͳʹ͓͚Δ ϑϩϯτΤϯυձͷ ͱΓ͘Έʹ͍ͭͯ @amagitakayosi Hatena Engineer Seminar #8 վΊ·ͯ͠amagiͰ͢

Slide 2

Slide 2 text

͜Μ͹Μ͸ʂΞϚΪͱਃ͠·͢ վΊ·ͯ͠amagiͰ͢ վΊ·ͯ͠amagiͰ͢ JEBNBHJUBLBZPTJ

Slide 3

Slide 3 text

ͨ·ʹϑϩϯτΤϯυͬΆ͍ൃදͯ͠·͢

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

͸ͯͳʹ͸ ʮϑϩϯτΤϯυΤϯδχΞʯ ͱ͍͏৬छ͸ଘࡏ͠ͳ͍

Slide 6

Slide 6 text

͸ͯͳͷϑϩϯτΤϯυ։ൃ • WebΞϓϦέʔγϣϯΤϯδχΞ͕  ϑϩϯτ͔ΒαʔόʔαΠυ·Ͱ  ԿͰ΋΍Δ • ΋ͪΖΜ֤ʑʹಘखෆಘख͸ଘࡏ͢Δ

Slide 7

Slide 7 text

νʔϜ͋ͨΓͷΤϯδχΞ͕গͳ͍ • ྫ: MackerelνʔϜ • MackerelຊମɺϓϥάΠϯ౳ͷOSS… • ΤϯδχΞ6໊શһ͕શ෦Λ୲౰

Slide 8

Slide 8 text

͜ͷελΠϧͷϝϦοτ • λεΫΛॊೈʹΞαΠϯͰ͖Δ • ଐਓੑΛഉআ͠΍͍͢ • νʔϜؒͰͷϝϯόʔೖΕସ͕͑͠΍͍͢

Slide 9

Slide 9 text

஌ݟڞ༗͕Ή͔ͣ͘͠ͳ͖ͬͯͨ • ϒϥ΢β΍ϥΠϒϥϦʹؔ͢Δ৘ใ • ΫϥΠΞϯτଆͷઃܭ • JS, CSSͷ഑৴ํ๏

Slide 10

Slide 10 text

஌ݟڞ༗͕Ή͔͍ͣ͠ • ϒϥ΢β΍ϥΠϒϥϦʹؔ͢Δ৘ใ • ΫϥΠΞϯτଆͷઃܭ • JS, CSSͷ഑৴ํ๏ νʔϜ͝ͱʹ ํ๏͕όϥόϥ

Slide 11

Slide 11 text

೥ʹ ʮϑϩϯτΤϯυձʯ Λ݁੒

Slide 12

Slide 12 text

͸ͯͳͷٕज़άϧʔϓ • Լ෦૊৫ͱͯ͠ʮαϒձʯ͕ଘࡏ͢Δ • ηΩϡϦςΟձ • εϚʔτձ • ϑϩϯτΤϯυձ ← NEW!

Slide 13

Slide 13 text

ൃ଍ͷૂ͍ • ϕετϓϥΫςΟεΛڞ༗͢Δ • ϑϩϯτΤϯυ΁ͷؔ৺Λ࣋ͬͯ΋Β͏ • ϑϩϯτΤϯυք۾ʹ͓͚Δ  ͸ͯͳͷϓϨθϯεΛߴΊΔ

Slide 14

Slide 14 text

ʮࣾ಺ඪ४ʯ͸ܾΊͳ͍ • ϑϩϯτΤϯυͷ஌ݟ͸  ͙͢ʹ௠෗Խͯ͠͠·͏ • ͋͘·Ͱ஌ݟͷڞ༗ʹͱͲΊΔ

Slide 15

Slide 15 text

׆ಈ಺༰ • ஌ݟڞ༗ձ • ϑϩϯτΤϯυϥϯν • Podcast഑৴ ɹɹɹɹɹɹɹͳͲͳͲ

Slide 16

Slide 16 text

஌ݟڞ༗ձ

Slide 17

Slide 17 text

֤νʔϜͷݱঢ়Λ੔ཧ͍ͨ͠ • ֤νʔϜ͔ΒҰਓͣͭ  ϑϩϯτΤϯυʹৄ͍͠ϝϯόʔΛট଴ • νʔϜͷݱঢ়΍՝୊ͳͲΛൃද͢Δ • ઃܭɺϥΠϒϥϦɺ՝୊ɺetc…

Slide 18

Slide 18 text

౰൪੍Ͱ৘ใަ׵ • ࣄલʹൃදऀΛܾΊͯ  ࣾ಺wikiʹ·ͱΊͯ΋Β͏ • MTGͰൃද & ࣭ٙԠ౴

Slide 19

Slide 19 text

֤νʔϜͷϑϩϯτࣄ৘͕ڞ༗͞Εͨ

Slide 20

Slide 20 text

ࢥͬͨΑΓେมͩͬͨ • ϝϯόʔͷ४උ͕େม • ۀ຿࣌ؒ಺ʹ։࠵͢Δͱ  ·ͱ·͕ͬͨ࣌ؒͱΕͳ͍ • ൃදܗࣜͩͱؾܰʹࡶஊͮ͠Β͍

Slide 21

Slide 21 text

ϑϩϯτΤϯυϥϯν

Slide 22

Slide 22 text

ຖिਫ༵ͷனٳΈʹ։࠵ • ϥϯνΛ৯΂ͭͭɺχϡʔεΛݟͨΓ  ϑϩϯτΤϯυʹؔ͢ΔࡶஊΛ͢Δ • ϝϯόʔ͸୭Ͱ΋΢ΣϧΧϜ

Slide 23

Slide 23 text

ݩωλ͸ͪ͜Β

Slide 24

Slide 24 text

ϥϯνͷ಺༰ • ϑϩϯτΤϯυؔ࿈ͷχϡʔε • JSer.info, JavaScript Weekly, etc… • ϝϯόʔͷۙگ • νʔϜͷϑϩϯτΤϯυʹ͍ͭͯ • झຯͷ։ൃʹ͍ͭͯ

Slide 25

Slide 25 text

୭Ͱ΋ؾܰʹࢀՃͰ͖Δ • ϑϩϯτ΄ͱΜͲ৮Βͳ͍ਓͰ΋ • ࣾ௕Ͱ΋ • ࣾ֎ͷํͰ΋

Slide 26

Slide 26 text

ࣾ֎ͷํΛ͓ট͖ͨ͠ճ

Slide 27

Slide 27 text

΍ͬͯΑ͔ͬͨ • ֤͕ࣗຖि͕Μ͹ͬͯ  χϡʔεಡΉඞཁ͕ͳ͘ͳͬͨ • ϑϩϯτΤϯυͷ࿩୊ʹ͍ͭͯ  ૬ஊͨ͠ΓࣗຫͰ͖Δ৔͕Ͱ͖ͨ

Slide 28

Slide 28 text

ϥϯνλΠϜ։࠵ͷσϝϦοτ • ༧ఆ͕ඃΓ͕ͪ • ன৸Ͱ͖ͳ͍

Slide 29

Slide 29 text

ϑϩϯτΤϯυϥϯνΛ࿥Ի • ձ࿩ͷ಺༰Λ͋ͱ͔ΒࢀরͰ͖ΔΑ͏ʹ • ग़੮Ͱ͖ͳ͍ਓ޲͚ • ͋ͷϥΠϒϥϦɺͳΜ໊ͯલ  ͚ͩͬͨͬ……ʁͱ͔

Slide 30

Slide 30 text

ࣾ಺αʔϏεͰެ։

Slide 31

Slide 31 text

ࣾ಺αʔϏεͰެ։ ࣾ֎ʹެ։ͨ͠Β ͍͍ͷͰ͸ʁ

Slide 32

Slide 32 text

1PEDBTU

Slide 33

Slide 33 text

1PEDBTUͰΞ΢τϓοτ • ϥϯν৯΂ͭͭࣾ֎Ξ΢τϓοτͰ͖ͯ  ҰੴೋௗͰ͸ʁ • ϑϩϯτʹؔ͢ΔPodcast͸গͳ͍

Slide 34

Slide 34 text

ͦΕͳΓʹ࠶ੜ͞ΕͨΓ  1PEDBTUΧςΰϦҐʹͳͬͨΓͨ͠

Slide 35

Slide 35 text

࠷ۙ഑৴ͯ͠ͳ͘ͳ͍ʜʜʁ

Slide 36

Slide 36 text

!!!!!

Slide 37

Slide 37 text

Ұ୴1PEDBTUதஅͯ͠·͢ • ฤूɺϨϏϡʔʹख͕͔͔ؒΔ • ࣾ֎ൿͷ৘ใ͸Χοτͨ͠Γ • ٕज़ʹؔ͢ΔΞ΢τϓοτͳͷͰ  ޿ใɺΤϯδχΞͷνΣοΫ͕ඞཁ

Slide 38

Slide 38 text

ͦͷଞ

Slide 39

Slide 39 text

ࣾ಺4MBDLͰ஌ݟΛڞ༗ • #javascript ʹ JSؔ࿈χϡʔεΛྲྀ͢ • ࢓ࣄͰ͜·ͬͨΒ૬ஊ • TypeScriptͷ৽όʔδϣϯ͕ग़Δͱ  ੝Γ্͕Δ

Slide 40

Slide 40 text

ࣾ಺4MBDLͷΑ͏͢

Slide 41

Slide 41 text

ϑϩϯτΤϯυ#FFS • ϑϩϯτΤϯυϥϯνʹདྷͯͳ͍ਓʹ΋  ༗ӹͳ৘ใΛڞ༗͍ͨ͠ • ࣾ಺ͷٕज़ษڧձ (ʙ19:00) ͷ͋ͱʹ  ϑϩϯτΤϯυͷ࿩୊ΛৼΓฦΔ "

Slide 42

Slide 42 text

;Γ͔͑Γ ͜Ε͔Β

Slide 43

Slide 43 text

ࣾ಺ͷϑϩϯτΤϯυʹߩݙͰ͖ͯΔʁ ✔ ࣾ಺ͷϑϩϯτΤϯυࣄ৘Λ  wikiʹ·ͱΊͨΓ ✔ Slackͷ૬ஊͰ໰୊ղܾͨ͠Γ ✔ ϥϯνͰ঺հ͞ΕͨϥΠϒϥϦΛ  ϓϩμΫγϣϯʹ౤ೖͨ͠Γ

Slide 44

Slide 44 text

՝୊ ✘ ࢀՃϝϯόʔ͕ݻఆ͞Εͯ͠·ͬͨΓ ✘ ޻਺͕͔͔ͬͯ͠·ͬͨΓ

Slide 45

Slide 45 text

ܧଓ͕େࣄʂ • ΍ΔؾυϦϒϯͰ͸ଓ͔ͳ͍ • ͠ΜͲ͔ͬͨΒɺ΍Γํม͑ͯ͜ • ఆظతʹKPTͯ͜͠

Slide 46

Slide 46 text

͋Γ͕ͱ͏͍͟͝·ͨ͠