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

027cabf82b6860498e5107f500bed48f?s=128

NanimonoDemonai

December 23, 2020
Tweet

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