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

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