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

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

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

Transcript

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

   View Slide

2. ࣗݾ঺հ
   • id:nanimono_demonai
   
   
   • ͸ͯͳ2020৽ଔ
   
   
   • ϒϩάMediaνʔϜ
   
   
   • ϚϯϋολϯΫϥϜνϟ΢μʔ
   
   
   • tadamono_dehanaiʹͳΓ͍ͨ
   2
   

   View Slide

3. ͸ͯͳϒϩάMediaʹ͍ͭͯ
   3
   ͸ͯͳͷϓϥοτϑΥʔϜͱ͸ͯͳϒϩάͷػೳΛܧঝͨ͠CMSͰ
   
   
   Φ΢ϯυϝσΟΞӡӦΛ࣮ݱʂ
   

   View Slide

4. ͸ͯͳϒϩάΛಈ͔͍ͯ͠Δ΋ͷ
   • Perl + JavaScript + छʑͷϛυϧ΢ΣΞ
   
   
   • Perl: όοΫΤϯυ
   
   
   • JavaScript: ϑϩϯτΤϯυ
   4
   JavaScriptͷ࿩୊Λ͠·͢
   

   View 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 Slide

6. ϑϩϯτΤϯυϞμϯԽͷࢹ఺
   • աڈͱະདྷͷ྆ํ͕ݟΕΔಏ͕ཉ͍͠
   
   
   • ࠓ·ͰͷπʔϧνΣʔϯͷઃఆΛཧղ͢Δ
   
   
   • ๬Ή΂͖πʔϧνΣʔϯΛߟ͑Δ
   
   
   • πʔϧνΣʔϯ͸઴࣍తʹվળͰ͖͏Δ
   
   
   • Ұؾʹ΍Δඞཁ͸ͳ͍
   6
   աڈࢹ఺ͱͯ͠ʮϑϩϯτΤϯυͷடংʯγϦʔζͷνΣοΫ͓קΊ͠·͢ʂ
   

   View Slide

7. ࠓճͷςʔϚ
   7
   ๬·ΕΔடং
   γϯϓϧ
   εϐʔυ
   ͜ͷͨΊʹ΍͖ͬͯͨࣄͱ͸……
   
   
   ࣌୅͸nanimono͕νʔϜʹδϣΠϯͨ࣌͠ʹḪΔ
   

   View Slide

8. δϣΠϯͨ࣌͠ͷҹ৅
   w ͸ͯͳϒϩάͰ࢖ΘΕ͍ͯΔ+4ه๏͕ଟ͍
   • AltJSs
   
   
   • Flow, Typescript, JavaScript
   
   
   • Ϟδϡʔϧղܾ
   
   
   • CJS, ESModule
   
   
   • require()΋import΋͍Ζ͍Ζॻ͍ͯ͋Δ
   8
   ϒϩάͷJSͷॻ͖ํ͍Ζ͍Ζ͋Δʂ
   

   View Slide

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

   View Slide

10. ։ൃ্ͷ໰୊
    • ෳ਺ͷAltJSʹରԠ͍ͯ͠ΔͨΊ
    
    
    • Babelͷઃఆ͕௕͍
    
    
    • Linter͕JS/FlowͱTSͰઃఆ͕ҧ͏
    
    
    • ଞʹ΋
    
    
    • Gulp͕ෳࡶ
    
    
    • WebpackͱBrowserify͕ಉډ͍ͯ͠Δ
    10
    ։ൃ͕஗͘ͳΔ
    

    View Slide

11. ։ൃ͕஗͍
    • BrowserifyͰϏϧυ͢ΔʹTFD͔͔Δ
    
    
    • Karma + PhantomJSͰͷςετ͕TFD͔͔Δ
    
    
    • ͔͠΋୯ମͰςετͰ͖ͳ͍
    
    
    • ͞ΒʹςετΧόϨοδ͕Θ͔Βͳ͍
    
    
    • ςετͱϏϧυΛվળ͍͕ͨ͠ઃఆ͕ෳࡶ
    11
    վमͷͨΊʹϏϧυͱςετΛ܁Γฦ͍͕ͨ͠…
    

    View Slide

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

    View Slide

13. ϥΠϒϥϦߋ৽͕͘͢͝ԯ߷
    • React͕ݹͼ͍ͯΔ
    
    
    • ReactΛલఏͱ͍ͯ͠ΔϥΠϒϥϦ΋ݹͼΔ
    
    
    • FlowͷܕͱTypescriptͷܕ͕ࠞࡏ͍ͯ͠Δ
    
    
    • PhantomJS޲͚ͷShim͕ݱ࣮ͱဃ཭͍ͯ͠Δ
    
    
    • jQueryUIͷఫୀ͕Ͱ͖ͳ͍
    13
    

    View Slide

14. டং΋ͨΒ͢ํ๏
    14
    ๬·ΕΔடং
    γϯϓϧ
    εϐʔυ
    • πʔϧνΣʔϯͷೖޱ͔Β઴࣍త
    ʹஔ͖׵͑Δ
    
    
    • औࣺબ୒͢Δ
    
    
    • ઃఆΛݟ௚ͯ͠γϯϓϧʹ͢Δ
    
    
    • ίπίπ΍Δ
    ͷͨΊʹ
    

    View Slide

15. ৽Ϗϧυߏ੒
    15
    DPSFKT
    

    View Slide

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

    View Slide

17. ։ൃ͕ૣ͘ͳͬͨ
    • Ϗϧυ͢Δʹ30sec ໿൒෼
    
    
    • ςετ͕30sec ςετྔ૿͑ͨͷʹ͕࣌ؒ૿͑ͳ͍
    
    
    • ୯ମͰςετͰ͖͍ͯΔ
    
    
    • ςετΧόϨοδ͕Θ͔ΔΑ͏ʹͳͬͨ
    
    
    • ઃఆ͕ݮͬͨ
    
    
    • օ͕ESlintͷϧʔϧ࠷దԽΛ͢ΔΑ͏ʹͳͬͨ
    17
    

    View Slide

18. ͋ͳͨ͸ԿΛ͠·͔ͨ͠ʁ
    • Flowఫୀ
    
    
    • BabelͱESLintͷઃఆ࠷దԽ
    
    
    • Browserify->WebpackҠߦ
    
    
    • Karma+PhatomJS -> JestҠߦ
    
    
    • jQueryUIఫୀ
    18
    

    View Slide

19. Flowఫୀ
    w ߦΛ஍ಓʹ΍ͬͨ
    • δϣΠϯ࣌ͷλεΫͱͯ͠͸ྑ͔ͬͨ
    
    
    • Ұؾჿ੒ʹมߋͤͣࡉ͔͘Commit
    
    
    • FlowͷܕΛTypescriptͷܕʹॻ͖׵͑ͨ
    19
    

    View Slide

20. BabelͱESLint࠷దԽ
    • FlowͷͨΊʹඞཁͳઃఆϑΝΠϧΛݮΒͤͨ
    
    
    • TSLintͱESLintͷಉډΛESLintʹҰຊԽ
    
    
    • ESLintͰPrettierΛॻ͚ΔΑ͏ʹ
    
    
    • Babel-Poly
    f
    i
    ll͔Β
    
    
    babel-preset-env + core-jsʹҠߦ
    20
    γϯϓϧʹͳͬͨ݁ՌνʔϜʹLintΧελϚΠζश׳͕͍ͭͨ
    

    View Slide

21. BrowserifyҠߦ
    • WebpackʹҠߦ
    
    
    • νϟϯΫ෼ׂͱ͍ͬͨ࠷దԽΛߦ͏Α͏ʹ
    
    
    • Ϗϧυͨ͠ίʔυʹIE11ඇରԠίʔυؚ͕·
    Ε͍ͯͳ͍͔੩తղੳ͢ΔCIΛGithubActions
    ʹ௥Ճ
    21
    Ҡߦͷ݁ՌϏϧυ͕࣌ؒ໿൒෼ʹ
    

    View Slide

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

    View Slide

23. JestҠߦ
    • before, afterΛbeforeAll, afterAllʹมߋ͢Δͩ
    ͚Ͱ΄ͱΜͲͷςετ͕ಈ͍ͨ
    
    
    • PhantomJSͱKarmaΛఫୀ
    
    
    • karma-html2js-processorʹ૬౰͢Δॲཧ͸ࣗ࡞
    
    
    • windowʹจࣈྻͰͷhtml͕͋Δ૝ఆͰॻ͔Ε͍ͯΔςετͷέΞ
    23
    ςετͷߏ੒͕γϯϓϧʹͳͬͨ
    

    View Slide

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

    View Slide

25. jQuery-UIఫୀ
    • ͜͜·Ͱ༻ҙ͖ͯͨ͠΋ͷΛ࢖ָͬͯʹ։ൃ
    
    
    • jQueryUIϥΠϒϥϦͷ͓ֆ͔͖ػೳΛߋ৽
    
    
    • ςετʹJest
    
    
    • ίϯϙʔωϯτಈ࡞νΣοΫʹStroybook
    
    
    • νϟϯΫ෼ׂʹWebpackΛ࢖ͬͨ
    25
    

    View Slide

26. ϑϩϯτΤϯυϞμϯԽͷίπ
    • աڈͱະདྷͷ྆ํ͕ݟΕΔಏΛಘΔ
    
    
    • աڈͷൃදͱ͔ಡΈղ͘
    
    
    • ϑϩϯτΤϯυͷϑϩϯτϥϯφʔΛ஌Δ
    
    
    • Ұؾʹม͑ΔͷͰ͸ͳ͘ॱΛ౿·͑ͯਐΊΔ
    
    
    • झຯͰࡉ͔͍ϓϩδΣΫτΛ1͔Β࡞ΔRTA͢Δ
    26
    

    View Slide

27. ͜Ε͔Β΋டংΛҡ࣋͢Δͧ
    27
    ๬·ΕΔடং
    γϯϓϧ
    εϐʔυ
    • Ϗϧυ଎౓޲্
    • ςετ଎౓޲্
    
    
    • LintΧελϚΠζͷश׳ఆண
    ΛٻΊଓ͚ͯ
    

    View Slide

28. ϑϩϯτΤϯυϞμϯԽ͸ࡾํྑ͠
    • νʔϜϝϯόʔྑ͠
    
    
    • ػೳ։ൃͷෛ୲͕ܰݮ͢Δ
    
    
    • ࣗ෼ྑ͠
    
    
    • ϓϩμΫτͷաڈͱະདྷͷཧղ͕ਂ·Δ
    
    
    • ੈؒྑ͠
    
    
    • ΑΓ༏ΕͨϓϩμΫτΛఏڙͰ͖Δ
    28
    

    View Slide

29. ͸ͯͳͰ͸
    ΞʔΩςΫνϟ΁ͷࢹ఺Λશ࣌୅ʹ޿͛ͳ͕Β
    
    
    ࣗ਎,ϝϯόʔ, ੈؒͷ̏ऀΛྑ͍ͯ͘͘͠
    
    
    ໺๬Λ࣋ͬͨΤϯδχΞΛืू͍ͯ͠·͢ʂ
    29
    

    View Slide