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

by NanimonoDemonai

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

டংʹ͍ͭͯ 5 https://speakerdeck.com/fand/hurontoendonizhi-xu-hali-tutaka https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa ࠓ໷ͷτʔΫ͸ࠨܝͷਫ਼ਆతଓฤ • ͸ͯͳϒϩάͷϑϩϯτΤϯυ։ൃ ͷBehind-the-Sceneʹ͸டংͱͭ͘ • ࠨܝ2ฤ͸લ೔ᩀ • ຊ೔͸ʮϑϩϯτΤϯυͷϞμϯԽʯ Λ࣠ʹൃද

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

৽Ϗϧυߏ੒ 15 DPSFKT

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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