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

Hatena Engineer Seminar #8で発表したスライドです。

Transcript

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

   View Slide

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

   View Slide

3. ͨ·ʹϑϩϯτΤϯυͬΆ͍ൃදͯ͠·͢
   

   View Slide

4. View Slide

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

   View Slide

6. ͸ͯͳͷϑϩϯτΤϯυ։ൃ
   • WebΞϓϦέʔγϣϯΤϯδχΞ͕

   ϑϩϯτ͔ΒαʔόʔαΠυ·Ͱ

   ԿͰ΋΍Δ
   • ΋ͪΖΜ֤ʑʹಘखෆಘख͸ଘࡏ͢Δ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. ೥ʹ
    ʮϑϩϯτΤϯυձʯ
    Λ݁੒
    

    View Slide

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

    View Slide

13. ൃ଍ͷૂ͍
    • ϕετϓϥΫςΟεΛڞ༗͢Δ
    • ϑϩϯτΤϯυ΁ͷؔ৺Λ࣋ͬͯ΋Β͏
    • ϑϩϯτΤϯυք۾ʹ͓͚Δ

    ͸ͯͳͷϓϨθϯεΛߴΊΔ
    

    View Slide

14. ʮࣾ಺ඪ४ʯ͸ܾΊͳ͍
    • ϑϩϯτΤϯυͷ஌ݟ͸

    ͙͢ʹ௠෗Խͯ͠͠·͏
    • ͋͘·Ͱ஌ݟͷڞ༗ʹͱͲΊΔ
    

    View Slide

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

    View Slide

16. ஌ݟڞ༗ձ
    

    View Slide

17. ֤νʔϜͷݱঢ়Λ੔ཧ͍ͨ͠
    • ֤νʔϜ͔ΒҰਓͣͭ

    ϑϩϯτΤϯυʹৄ͍͠ϝϯόʔΛট଴
    • νʔϜͷݱঢ়΍՝୊ͳͲΛൃද͢Δ
    • ઃܭɺϥΠϒϥϦɺ՝୊ɺetc…
    

    View Slide

18. ౰൪੍Ͱ৘ใަ׵
    • ࣄલʹൃදऀΛܾΊͯ

    ࣾ಺wikiʹ·ͱΊͯ΋Β͏
    • MTGͰൃද & ࣭ٙԠ౴
    

    View Slide

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

    View Slide

20. ࢥͬͨΑΓେมͩͬͨ
    • ϝϯόʔͷ४උ͕େม
    • ۀ຿࣌ؒ಺ʹ։࠵͢Δͱ

    ·ͱ·͕ͬͨ࣌ؒͱΕͳ͍
    • ൃදܗࣜͩͱؾܰʹࡶஊͮ͠Β͍
    

    View Slide

21. ϑϩϯτΤϯυϥϯν
    

    View Slide

22. ຖिਫ༵ͷனٳΈʹ։࠵
    • ϥϯνΛ৯΂ͭͭɺχϡʔεΛݟͨΓ

    ϑϩϯτΤϯυʹؔ͢ΔࡶஊΛ͢Δ
    • ϝϯόʔ͸୭Ͱ΋΢ΣϧΧϜ
    

    View Slide

23. ݩωλ͸ͪ͜Β
    

    View Slide

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

    View Slide

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

    View Slide

26. ࣾ֎ͷํΛ͓ট͖ͨ͠ճ
    

    View Slide

27. ΍ͬͯΑ͔ͬͨ
    • ֤͕ࣗຖि͕Μ͹ͬͯ

    χϡʔεಡΉඞཁ͕ͳ͘ͳͬͨ
    • ϑϩϯτΤϯυͷ࿩୊ʹ͍ͭͯ

    ૬ஊͨ͠ΓࣗຫͰ͖Δ৔͕Ͱ͖ͨ
    

    View Slide

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

    View Slide

29. ϑϩϯτΤϯυϥϯνΛ࿥Ի
    • ձ࿩ͷ಺༰Λ͋ͱ͔ΒࢀরͰ͖ΔΑ͏ʹ
    • ग़੮Ͱ͖ͳ͍ਓ޲͚
    • ͋ͷϥΠϒϥϦɺͳΜ໊ͯલ

    ͚ͩͬͨͬ……ʁͱ͔
    

    View Slide

30. ࣾ಺αʔϏεͰެ։
    

    View Slide

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

    View Slide

32. 1PEDBTU
    

    View Slide

33. 1PEDBTUͰΞ΢τϓοτ
    • ϥϯν৯΂ͭͭࣾ֎Ξ΢τϓοτͰ͖ͯ

    ҰੴೋௗͰ͸ʁ
    • ϑϩϯτʹؔ͢ΔPodcast͸গͳ͍
    

    View Slide

34. ͦΕͳΓʹ࠶ੜ͞ΕͨΓ

    1PEDBTUΧςΰϦҐʹͳͬͨΓͨ͠
    

    View Slide

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

    View Slide

36. !!!!!
    

    View Slide

37. Ұ୴1PEDBTUதஅͯ͠·͢
    • ฤूɺϨϏϡʔʹख͕͔͔ؒΔ
    • ࣾ֎ൿͷ৘ใ͸Χοτͨ͠Γ
    • ٕज़ʹؔ͢ΔΞ΢τϓοτͳͷͰ

    ޿ใɺΤϯδχΞͷνΣοΫ͕ඞཁ
    

    View Slide

38. ͦͷଞ
    

    View Slide

39. ࣾ಺4MBDLͰ஌ݟΛڞ༗
    • #javascript ʹ JSؔ࿈χϡʔεΛྲྀ͢
    • ࢓ࣄͰ͜·ͬͨΒ૬ஊ
    • TypeScriptͷ৽όʔδϣϯ͕ग़Δͱ

    ੝Γ্͕Δ
    

    View Slide

40. ࣾ಺4MBDLͷΑ͏͢
    

    View Slide

41. ϑϩϯτΤϯυ#FFS
    • ϑϩϯτΤϯυϥϯνʹདྷͯͳ͍ਓʹ΋

    ༗ӹͳ৘ใΛڞ༗͍ͨ͠
    • ࣾ಺ͷٕज़ษڧձ (ʙ19:00) ͷ͋ͱʹ

    ϑϩϯτΤϯυͷ࿩୊ΛৼΓฦΔ
    "
    

    View Slide

42. ;Γ͔͑Γ
    
    ͜Ε͔Β
    

    View Slide

43. ࣾ಺ͷϑϩϯτΤϯυʹߩݙͰ͖ͯΔʁ
    ✔ ࣾ಺ͷϑϩϯτΤϯυࣄ৘Λ

    wikiʹ·ͱΊͨΓ
    ✔ Slackͷ૬ஊͰ໰୊ղܾͨ͠Γ
    ✔ ϥϯνͰ঺հ͞ΕͨϥΠϒϥϦΛ

    ϓϩμΫγϣϯʹ౤ೖͨ͠Γ
    

    View Slide

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

    View Slide

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

    View Slide

46. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide