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

はてなブログのフロントエンドに秩序はもたらされたのか

 はてなブログのフロントエンドに秩序はもたらされたのか

Hatena Engineer Seminar #15 (2020/12/23) での発表資料です。
https://hatena.connpass.com/event/198892/

動画もあります:
https://youtu.be/Xb5bPaTO7fs

NanimonoDemonai

December 23, 2020
Tweet

More Decks by NanimonoDemonai

Other Decks in Programming

Transcript

  1. Hatena Engineer Seminar #15
    @nanimono_demonai
    1
    ϑϩϯτΤϯυʹ
    டং͸΋ͨΒ͞Εͨͷ͔ʁ
    2020 12/23

    View full-size slide

  2. ࣗݾ঺հ
    • id:nanimono_demonai


    • ͸ͯͳ2020৽ଔ


    • ϒϩάMediaνʔϜ


    • ϚϯϋολϯΫϥϜνϟ΢μʔ


    • tadamono_dehanaiʹͳΓ͍ͨ
    2

    View full-size slide

  3. ͸ͯͳϒϩάMediaʹ͍ͭͯ
    3
    ͸ͯͳͷϓϥοτϑΥʔϜͱ͸ͯͳϒϩάͷػೳΛܧঝͨ͠CMSͰ


    Φ΢ϯυϝσΟΞӡӦΛ࣮ݱʂ

    View full-size slide

  4. ͸ͯͳϒϩάΛಈ͔͍ͯ͠Δ΋ͷ
    • Perl + JavaScript + छʑͷϛυϧ΢ΣΞ


    • Perl: όοΫΤϯυ


    • JavaScript: ϑϩϯτΤϯυ
    4
    JavaScriptͷ࿩୊Λ͠·͢

    View full-size slide

  5. டংʹ͍ͭͯ
    5
    https://speakerdeck.com/fand/hurontoendonizhi-xu-hali-tutaka
    https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa
    ࠓ໷ͷτʔΫ͸ࠨܝͷਫ਼ਆతଓฤ
    • ͸ͯͳϒϩάͷϑϩϯτΤϯυ։ൃ


    ͷBehind-the-Sceneʹ͸டংͱͭ͘


    • ࠨܝ2ฤ͸લ೔ᩀ


    • ຊ೔͸ʮϑϩϯτΤϯυͷϞμϯԽʯ


    Λ࣠ʹൃද

    View full-size slide

  6. ϑϩϯτΤϯυϞμϯԽͷࢹ఺
    • աڈͱະདྷͷ྆ํ͕ݟΕΔಏ͕ཉ͍͠


    • ࠓ·ͰͷπʔϧνΣʔϯͷઃఆΛཧղ͢Δ


    • ๬Ή΂͖πʔϧνΣʔϯΛߟ͑Δ


    • πʔϧνΣʔϯ͸઴࣍తʹվળͰ͖͏Δ


    • Ұؾʹ΍Δඞཁ͸ͳ͍
    6
    աڈࢹ఺ͱͯ͠ʮϑϩϯτΤϯυͷடংʯγϦʔζͷνΣοΫ͓קΊ͠·͢ʂ

    View full-size slide

  7. ࠓճͷςʔϚ
    7
    ๬·ΕΔடং
    γϯϓϧ
    εϐʔυ
    ͜ͷͨΊʹ΍͖ͬͯͨࣄͱ͸……


    ࣌୅͸nanimono͕νʔϜʹδϣΠϯͨ࣌͠ʹḪΔ

    View full-size slide

  8. δϣΠϯͨ࣌͠ͷҹ৅
    w ͸ͯͳϒϩάͰ࢖ΘΕ͍ͯΔ+4ه๏͕ଟ͍
    • AltJSs


    • Flow, Typescript, JavaScript


    • Ϟδϡʔϧղܾ


    • CJS, ESModule


    • require()΋import΋͍Ζ͍Ζॻ͍ͯ͋Δ
    8
    ϒϩάͷJSͷॻ͖ํ͍Ζ͍Ζ͋Δʂ

    View full-size slide

  9. Ϗϧυߏ੒ͷΠϥετ
    9
    #BCFM1PMZpMM

    View full-size slide

  10. ։ൃ্ͷ໰୊
    • ෳ਺ͷAltJSʹରԠ͍ͯ͠ΔͨΊ


    • Babelͷઃఆ͕௕͍


    • Linter͕JS/FlowͱTSͰઃఆ͕ҧ͏


    • ଞʹ΋


    • Gulp͕ෳࡶ


    • WebpackͱBrowserify͕ಉډ͍ͯ͠Δ
    10
    ։ൃ͕஗͘ͳΔ

    View full-size slide

  11. ։ൃ͕஗͍
    • BrowserifyͰϏϧυ͢ΔʹTFD͔͔Δ


    • Karma + PhantomJSͰͷςετ͕TFD͔͔Δ


    • ͔͠΋୯ମͰςετͰ͖ͳ͍


    • ͞ΒʹςετΧόϨοδ͕Θ͔Βͳ͍


    • ςετͱϏϧυΛվળ͍͕ͨ͠ઃఆ͕ෳࡶ
    11
    վमͷͨΊʹϏϧυͱςετΛ܁Γฦ͍͕ͨ͠…

    View full-size slide

  12. ςετߏ੒ͷΠϥετ
    12
    #BCFM1PMZpMM
    ݁Ռ
    ࣮ߦ

    View full-size slide

  13. ϥΠϒϥϦߋ৽͕͘͢͝ԯ߷
    • React͕ݹͼ͍ͯΔ


    • ReactΛલఏͱ͍ͯ͠ΔϥΠϒϥϦ΋ݹͼΔ


    • FlowͷܕͱTypescriptͷܕ͕ࠞࡏ͍ͯ͠Δ


    • PhantomJS޲͚ͷShim͕ݱ࣮ͱဃ཭͍ͯ͠Δ


    • jQueryUIͷఫୀ͕Ͱ͖ͳ͍
    13

    View full-size slide

  14. டং΋ͨΒ͢ํ๏
    14
    ๬·ΕΔடং
    γϯϓϧ
    εϐʔυ
    • πʔϧνΣʔϯͷೖޱ͔Β઴࣍త
    ʹஔ͖׵͑Δ


    • औࣺબ୒͢Δ


    • ઃఆΛݟ௚ͯ͠γϯϓϧʹ͢Δ


    • ίπίπ΍Δ
    ͷͨΊʹ

    View full-size slide

  15. ৽Ϗϧυߏ੒
    15
    DPSFKT

    View full-size slide

  16. ৽ςετߏ੒
    16
    $PSFKT
    ݸผͷ݁Ռ
    ࣮ߦ

    View full-size slide

  17. ։ൃ͕ૣ͘ͳͬͨ
    • Ϗϧυ͢Δʹ30sec ໿൒෼


    • ςετ͕30sec ςετྔ૿͑ͨͷʹ͕࣌ؒ૿͑ͳ͍


    • ୯ମͰςετͰ͖͍ͯΔ


    • ςετΧόϨοδ͕Θ͔ΔΑ͏ʹͳͬͨ


    • ઃఆ͕ݮͬͨ


    • օ͕ESlintͷϧʔϧ࠷దԽΛ͢ΔΑ͏ʹͳͬͨ
    17

    View full-size slide

  18. ͋ͳͨ͸ԿΛ͠·͔ͨ͠ʁ
    • Flowఫୀ


    • BabelͱESLintͷઃఆ࠷దԽ


    • Browserify->WebpackҠߦ


    • Karma+PhatomJS -> JestҠߦ


    • jQueryUIఫୀ
    18

    View full-size slide

  19. Flowఫୀ
    w ߦΛ஍ಓʹ΍ͬͨ
    • δϣΠϯ࣌ͷλεΫͱͯ͠͸ྑ͔ͬͨ


    • Ұؾჿ੒ʹมߋͤͣࡉ͔͘Commit


    • FlowͷܕΛTypescriptͷܕʹॻ͖׵͑ͨ
    19

    View full-size slide

  20. BabelͱESLint࠷దԽ
    • FlowͷͨΊʹඞཁͳઃఆϑΝΠϧΛݮΒͤͨ


    • TSLintͱESLintͷಉډΛESLintʹҰຊԽ


    • ESLintͰPrettierΛॻ͚ΔΑ͏ʹ


    • Babel-Poly
    f
    i
    ll͔Β


    babel-preset-env + core-jsʹҠߦ
    20
    γϯϓϧʹͳͬͨ݁ՌνʔϜʹLintΧελϚΠζश׳͕͍ͭͨ

    View full-size slide

  21. BrowserifyҠߦ
    • WebpackʹҠߦ


    • νϟϯΫ෼ׂͱ͍ͬͨ࠷దԽΛߦ͏Α͏ʹ


    • Ϗϧυͨ͠ίʔυʹIE11ඇରԠίʔυؚ͕·
    Ε͍ͯͳ͍͔੩తղੳ͢ΔCIΛGithubActions
    ʹ௥Ճ
    21
    Ҡߦͷ݁ՌϏϧυ͕࣌ؒ໿൒෼ʹ

    View full-size slide

  22. IEඇରԠίʔυͷνΣοΫ
    22
    DPSFKT
    ͜ͷϑΝΠϧΛ੩తղੳ͢Δ↗
    https://www.npmjs.com/package/compat-cli
    Ξϩʔԋࢉࢠؚ͕·Ε͍ͯͳ͍͔౳

    View full-size slide

  23. JestҠߦ
    • before, afterΛbeforeAll, afterAllʹมߋ͢Δͩ
    ͚Ͱ΄ͱΜͲͷςετ͕ಈ͍ͨ


    • PhantomJSͱKarmaΛఫୀ


    • karma-html2js-processorʹ૬౰͢Δॲཧ͸ࣗ࡞


    • windowʹจࣈྻͰͷhtml͕͋Δ૝ఆͰॻ͔Ε͍ͯΔςετͷέΞ
    23
    ςετͷߏ੒͕γϯϓϧʹͳͬͨ

    View full-size slide

  24. ৽ςετߏ੒ͷ͜͜Βล
    24
    $PSFKT
    ݸผͷ݁Ռ
    ࣮ߦ

    View full-size slide

  25. jQuery-UIఫୀ
    • ͜͜·Ͱ༻ҙ͖ͯͨ͠΋ͷΛ࢖ָͬͯʹ։ൃ


    • jQueryUIϥΠϒϥϦͷ͓ֆ͔͖ػೳΛߋ৽


    • ςετʹJest


    • ίϯϙʔωϯτಈ࡞νΣοΫʹStroybook


    • νϟϯΫ෼ׂʹWebpackΛ࢖ͬͨ
    25

    View full-size slide

  26. ϑϩϯτΤϯυϞμϯԽͷίπ
    • աڈͱະདྷͷ྆ํ͕ݟΕΔಏΛಘΔ


    • աڈͷൃදͱ͔ಡΈղ͘


    • ϑϩϯτΤϯυͷϑϩϯτϥϯφʔΛ஌Δ


    • Ұؾʹม͑ΔͷͰ͸ͳ͘ॱΛ౿·͑ͯਐΊΔ


    • झຯͰࡉ͔͍ϓϩδΣΫτΛ1͔Β࡞ΔRTA͢Δ
    26

    View full-size slide

  27. ͜Ε͔Β΋டংΛҡ࣋͢Δͧ
    27
    ๬·ΕΔடং
    γϯϓϧ
    εϐʔυ
    • Ϗϧυ଎౓޲্
    • ςετ଎౓޲্


    • LintΧελϚΠζͷश׳ఆண
    ΛٻΊଓ͚ͯ

    View full-size slide

  28. ϑϩϯτΤϯυϞμϯԽ͸ࡾํྑ͠
    • νʔϜϝϯόʔྑ͠


    • ػೳ։ൃͷෛ୲͕ܰݮ͢Δ


    • ࣗ෼ྑ͠


    • ϓϩμΫτͷաڈͱະདྷͷཧղ͕ਂ·Δ


    • ੈؒྑ͠


    • ΑΓ༏ΕͨϓϩμΫτΛఏڙͰ͖Δ
    28

    View full-size slide

  29. ͸ͯͳͰ͸
    ΞʔΩςΫνϟ΁ͷࢹ఺Λશ࣌୅ʹ޿͛ͳ͕Β


    ࣗ਎,ϝϯόʔ, ੈؒͷ̏ऀΛྑ͍ͯ͘͘͠


    ໺๬Λ࣋ͬͨΤϯδχΞΛืू͍ͯ͠·͢ʂ
    29

    View full-size slide