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

Transcript

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

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

   tadamono_dehanaiʹͳΓ͍ͨ 2

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

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

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

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

   • ຊ೔͸ʮϑϩϯτΤϯυͷϞμϯԽʯ Λ࣠ʹൃද

6. ϑϩϯτΤϯυϞμϯԽͷࢹ఺ • աڈͱະདྷͷ྆ํ͕ݟΕΔಏ͕ཉ͍͠ • ࠓ·ͰͷπʔϧνΣʔϯͷઃఆΛཧղ͢Δ • ๬Ή΂͖πʔϧνΣʔϯΛߟ͑Δ • πʔϧνΣʔϯ͸઴࣍తʹվળͰ͖͏Δ •

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

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

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

   Ϟδϡʔϧղܾ • CJS, ESModule • require()΋import΋͍Ζ͍Ζॻ͍ͯ͋Δ 8 ϒϩάͷJSͷॻ͖ํ͍Ζ͍Ζ͋Δʂ

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

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

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

11. ։ൃ͕஗͍ • BrowserifyͰϏϧυ͢ΔʹTFD͔͔Δ • Karma + PhantomJSͰͷςετ͕TFD͔͔Δ • ͔͠΋୯ମͰςετͰ͖ͳ͍ •

    ͞ΒʹςετΧόϨοδ͕Θ͔Βͳ͍ • ςετͱϏϧυΛվળ͍͕ͨ͠ઃఆ͕ෳࡶ 11 վमͷͨΊʹϏϧυͱςετΛ܁Γฦ͍͕ͨ͠…

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

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

    jQueryUIͷఫୀ͕Ͱ͖ͳ͍ 13

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

    • ઃఆΛݟ௚ͯ͠γϯϓϧʹ͢Δ • ίπίπ΍Δ ͷͨΊʹ

15. ৽Ϗϧυߏ੒ 15
    DPSFKT

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

17. ։ൃ͕ૣ͘ͳͬͨ • Ϗϧυ͢Δʹ30sec ໿൒෼ • ςετ͕30sec ςετྔ૿͑ͨͷʹ͕࣌ؒ૿͑ͳ͍ • ୯ମͰςετͰ͖͍ͯΔ •

    ςετΧόϨοδ͕Θ͔ΔΑ͏ʹͳͬͨ • ઃఆ͕ݮͬͨ • օ͕ESlintͷϧʔϧ࠷దԽΛ͢ΔΑ͏ʹͳͬͨ 17

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

    JestҠߦ • jQueryUIఫୀ 18

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

20. BabelͱESLint࠷దԽ • FlowͷͨΊʹඞཁͳઃఆϑΝΠϧΛݮΒͤͨ • TSLintͱESLintͷಉډΛESLintʹҰຊԽ • ESLintͰPrettierΛॻ͚ΔΑ͏ʹ • Babel-Poly f

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

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

    Ҡߦͷ݁ՌϏϧυ͕࣌ؒ໿൒෼ʹ

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

23. JestҠߦ • before, afterΛbeforeAll, afterAllʹมߋ͢Δͩ ͚Ͱ΄ͱΜͲͷςετ͕ಈ͍ͨ • PhantomJSͱKarmaΛఫୀ • karma-html2js-processorʹ૬౰͢Δॲཧ͸ࣗ࡞

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

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

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

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

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

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

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

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

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

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

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