Hatena Engineer Seminar #15 (2020/12/23) での発表資料です。 https://hatena.connpass.com/event/198892/
動画もあります: https://youtu.be/Xb5bPaTO7fs
Hatena Engineer Seminar #15@nanimono_demonai1ϑϩϯτΤϯυʹடংͨΒ͞Εͨͷ͔ʁ2020 12/23
View Slide
ࣗݾհ• id:nanimono_demonai• ͯͳ2020৽ଔ• ϒϩάMediaνʔϜ• ϚϯϋολϯΫϥϜνϟμʔ• tadamono_dehanaiʹͳΓ͍ͨ2
ͯͳϒϩάMediaʹ͍ͭͯ3ͯͳͷϓϥοτϑΥʔϜͱͯͳϒϩάͷػೳΛܧঝͨ͠CMSͰΦϯυϝσΟΞӡӦΛ࣮ݱʂ
ͯͳϒϩάΛಈ͔͍ͯ͠Δͷ• Perl + JavaScript + छʑͷϛυϧΣΞ• Perl: όοΫΤϯυ• JavaScript: ϑϩϯτΤϯυ4JavaScriptͷΛ͠·͢
டংʹ͍ͭͯ5https://speakerdeck.com/fand/hurontoendonizhi-xu-hali-tutakahttps://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-faࠓͷτʔΫࠨܝͷਫ਼ਆతଓฤ• ͯͳϒϩάͷϑϩϯτΤϯυ։ൃͷBehind-the-Sceneʹடংͱͭ͘• ࠨܝ2ฤલᩀ• ຊʮϑϩϯτΤϯυͷϞμϯԽʯΛ࣠ʹൃද
ϑϩϯτΤϯυϞμϯԽͷࢹ• աڈͱະདྷͷ྆ํ͕ݟΕΔಏ͕ཉ͍͠• ࠓ·ͰͷπʔϧνΣʔϯͷઃఆΛཧղ͢Δ• Ή͖πʔϧνΣʔϯΛߟ͑Δ• πʔϧνΣʔϯ࣍తʹվળͰ͖͏Δ• ҰؾʹΔඞཁͳ͍6աڈࢹͱͯ͠ʮϑϩϯτΤϯυͷடংʯγϦʔζͷνΣοΫ͓קΊ͠·͢ʂ
ࠓճͷςʔϚ7·ΕΔடংγϯϓϧεϐʔυ͜ͷͨΊʹ͖ͬͯͨࣄͱ……࣌nanimono͕νʔϜʹδϣΠϯͨ࣌͠ʹḪΔ
δϣΠϯͨ࣌͠ͷҹw ͯͳϒϩάͰΘΕ͍ͯΔ+4ه๏͕ଟ͍• AltJSs• Flow, Typescript, JavaScript• Ϟδϡʔϧղܾ• CJS, ESModule• require()import͍Ζ͍Ζॻ͍ͯ͋Δ8ϒϩάͷJSͷॻ͖ํ͍Ζ͍Ζ͋Δʂ
ϏϧυߏͷΠϥετ9#BCFM1PMZpMM
։ൃ্ͷ• ෳͷAltJSʹରԠ͍ͯ͠ΔͨΊ• Babelͷઃఆ͕͍• Linter͕JS/FlowͱTSͰઃఆ͕ҧ͏• ଞʹ• Gulp͕ෳࡶ• WebpackͱBrowserify͕ಉډ͍ͯ͠Δ10։ൃ͕͘ͳΔ
։ൃ͕͍• BrowserifyͰϏϧυ͢ΔʹTFD͔͔Δ• Karma + PhantomJSͰͷςετ͕TFD͔͔Δ• ͔͠୯ମͰςετͰ͖ͳ͍• ͞ΒʹςετΧόϨοδ͕Θ͔Βͳ͍• ςετͱϏϧυΛվળ͍͕ͨ͠ઃఆ͕ෳࡶ11վमͷͨΊʹϏϧυͱςετΛ܁Γฦ͍͕ͨ͠…
ςετߏͷΠϥετ12#BCFM1PMZpMM݁Ռ࣮ߦ
ϥΠϒϥϦߋ৽͕͘͢͝ԯ߷• React͕ݹͼ͍ͯΔ• ReactΛલఏͱ͍ͯ͠ΔϥΠϒϥϦݹͼΔ• FlowͷܕͱTypescriptͷܕ͕ࠞࡏ͍ͯ͠Δ• PhantomJS͚ͷShim͕ݱ࣮ͱဃ͍ͯ͠Δ• jQueryUIͷఫୀ͕Ͱ͖ͳ͍13
டংͨΒ͢ํ๏14·ΕΔடংγϯϓϧεϐʔυ• πʔϧνΣʔϯͷೖޱ͔Β࣍తʹஔ͖͑Δ• औࣺબ͢Δ• ઃఆΛݟͯ͠γϯϓϧʹ͢Δ• ίπίπΔͷͨΊʹ
৽Ϗϧυߏ15DPSFKT
৽ςετߏ16$PSFKTݸผͷ݁Ռ࣮ߦ
։ൃ͕ૣ͘ͳͬͨ• Ϗϧυ͢Δʹ30sec • ςετ͕30sec ςετྔ૿͑ͨͷʹ͕࣌ؒ૿͑ͳ͍• ୯ମͰςετͰ͖͍ͯΔ• ςετΧόϨοδ͕Θ͔ΔΑ͏ʹͳͬͨ• ઃఆ͕ݮͬͨ• օ͕ESlintͷϧʔϧ࠷దԽΛ͢ΔΑ͏ʹͳͬͨ17
͋ͳͨԿΛ͠·͔ͨ͠ʁ• Flowఫୀ• BabelͱESLintͷઃఆ࠷దԽ• Browserify->WebpackҠߦ• Karma+PhatomJS -> JestҠߦ• jQueryUIఫୀ18
Flowఫୀw ߦΛಓʹͬͨ• δϣΠϯ࣌ͷλεΫͱͯ͠ྑ͔ͬͨ• Ұؾჿʹมߋͤͣࡉ͔͘Commit• FlowͷܕΛTypescriptͷܕʹॻ͖͑ͨ19
BabelͱESLint࠷దԽ• FlowͷͨΊʹඞཁͳઃఆϑΝΠϧΛݮΒͤͨ• TSLintͱESLintͷಉډΛESLintʹҰຊԽ• ESLintͰPrettierΛॻ͚ΔΑ͏ʹ• Babel-Polyfill͔Βbabel-preset-env + core-jsʹҠߦ20γϯϓϧʹͳͬͨ݁ՌνʔϜʹLintΧελϚΠζश׳͕͍ͭͨ
BrowserifyҠߦ• WebpackʹҠߦ• νϟϯΫׂͱ͍ͬͨ࠷దԽΛߦ͏Α͏ʹ• Ϗϧυͨ͠ίʔυʹIE11ඇରԠίʔυؚ͕·Ε͍ͯͳ͍͔੩తղੳ͢ΔCIΛGithubActionsʹՃ21Ҡߦͷ݁ՌϏϧυ͕࣌ؒʹ
IEඇରԠίʔυͷνΣοΫ22DPSFKT͜ͷϑΝΠϧΛ੩తղੳ͢Δ↗https://www.npmjs.com/package/compat-cliΞϩʔԋࢉࢠؚ͕·Ε͍ͯͳ͍͔
JestҠߦ• before, afterΛbeforeAll, afterAllʹมߋ͢Δ͚ͩͰ΄ͱΜͲͷςετ͕ಈ͍ͨ• PhantomJSͱKarmaΛఫୀ• karma-html2js-processorʹ૬͢Δॲཧࣗ࡞• windowʹจࣈྻͰͷhtml͕͋ΔఆͰॻ͔Ε͍ͯΔςετͷέΞ23ςετͷߏ͕γϯϓϧʹͳͬͨ
৽ςετߏͷ͜͜Βล24$PSFKTݸผͷ݁Ռ࣮ߦ
jQuery-UIఫୀ• ͜͜·Ͱ༻ҙ͖ͯͨ͠ͷΛָͬͯʹ։ൃ• jQueryUIϥΠϒϥϦͷ͓ֆ͔͖ػೳΛߋ৽• ςετʹJest• ίϯϙʔωϯτಈ࡞νΣοΫʹStroybook• νϟϯΫׂʹWebpackΛͬͨ25
ϑϩϯτΤϯυϞμϯԽͷίπ• աڈͱະདྷͷ྆ํ͕ݟΕΔಏΛಘΔ• աڈͷൃදͱ͔ಡΈղ͘• ϑϩϯτΤϯυͷϑϩϯτϥϯφʔΛΔ• Ұؾʹม͑ΔͷͰͳ͘ॱΛ౿·͑ͯਐΊΔ• झຯͰࡉ͔͍ϓϩδΣΫτΛ1͔Β࡞ΔRTA͢Δ26
͜Ε͔ΒடংΛҡ࣋͢Δͧ27·ΕΔடংγϯϓϧεϐʔυ• Ϗϧυ্• ςετ্• LintΧελϚΠζͷश׳ఆணΛٻΊଓ͚ͯ
ϑϩϯτΤϯυϞμϯԽࡾํྑ͠• νʔϜϝϯόʔྑ͠• ػೳ։ൃͷෛ୲͕ܰݮ͢Δ• ࣗྑ͠• ϓϩμΫτͷաڈͱະདྷͷཧղ͕ਂ·Δ• ੈؒྑ͠• ΑΓ༏ΕͨϓϩμΫτΛఏڙͰ͖Δ28
ͯͳͰΞʔΩςΫνϟͷࢹΛશ࣌ʹ͛ͳ͕Βࣗ,ϝϯόʔ, ੈؒͷ̏ऀΛྑ͍ͯ͘͘͠Λ࣋ͬͨΤϯδχΞΛืू͍ͯ͠·͢ʂ29