$30 off During Our Annual Pro Sale. View Details »

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

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

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

fand/amagitakayosi

July 12, 2017
Tweet

More Decks by fand/amagitakayosi

Other Decks in Technology

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