息の長いサービスのフロントエンドを少し改善する営み/frontend-improvement

3",64$P -UE 3",64.FFUVQ ଉͷ௕͍αʔϏεͷϑϩϯτΤϯυΛ গͣͭ͠վળ͍ͯ͘͠ӦΈ &JJDIJ.JUB

3",64$P -UE 3",64.FFUVQ Eiichi Mita !FJDIJTBOEFO ೥ʹϥΫεʹத్ೖࣾ ϑϩϯτΤϯυɾόοΫΤϯυͲͬͪ ΋΍ΔΤϯδχΞ ೝఆεΫϥϜϚελʔ
ٕज़ௐࠪతͳ࢓ࣄ΋΍͍ͬͯ·͢ ʢఔ౓ͷՔಇʣ ࣗݾ঺հ

3",64$P -UE 3",64.FFUVQ ໨࣍ ͳͥվળ͕ඞཁͳͷ͔ ݱঢ়ͷϑϩϯτΤϯυͷ໰୊఺ ࣮ࡍʹऔΓ૊ΜͰ͍Δ͜ͱͷ͝঺հ
ϞδϡʔϧԽ 5ZQF4DSJQU ςετίʔυ ٕज़બఆ ֶश ૊৫

3",64$P -UE 3",64.FFUVQ ຊ೔͓࿩͠͠ͳ͍͜ͱ 3FBDUಋೖʹ͍ͭͯ͸Ҏલʹ࿩͍ͯ͠ΔͷͰɺຊ೔͸3FBDUҎ֎ͷ͓࿩Λ͠·͢ IUUQTTQFBLFSEFDLDPNFJDIJTBOEFOSFBDUGPSXFCBQQMJDBUJPO

3",64$P -UE 3",64.FFUVQ ָָ໌ࡉͷ։ൃ͕࢝·ͬͨͷ͸೥͝Ζ .7$Ϟσϧͷ8FCΞϓϦέʔγϣϯ +41͕)5.-Λ૊Έཱͯͯ
ϑϩϯτଆ͸K2VFSZͱ͍͏Α͋͘Δߏ੒ ։ൃ౰ॳͷγεςϜߏ੒ +BWB +41 )5.-$44 K2VFSZ

3",64$P -UE 3",64.FFUVQ ͳͥվળ͕ඞཁͳͷ͔ ݱঢ়ͷϑϩϯτΤϯυͷ໰୊఺ վળ׆ಈͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ
ϞδϡʔϧԽ 5ZQF4DSJQU ςετίʔυ ٕज़બఆʹ͍ͭͯ ֶशʹ͍ͭͯ ૊৫ʹ͍ͭͯ

3",64$P -UE 3",64.FFUVQ ͳͥվળ͕ඞཁͳͷ͔ ˠ ָָ໌ࡉ͸ࠓޙ೥͸ଓ͘αʔϏεͩͱࢥ͍ͬͯΔ ͔Β

3",64$P -UE 3",64.FFUVQ ͳͥվળ͕ඞཁͳͷ͔ ௥Ճ͍ͨ͠ػೳ͸·ͩ·ͩ͋ͬͯɺ։ൃ͸ΞΫςΟϒʹଓ͘༧ఆ ࠓ·ͰόοΫΤϯυΛத৺ʹվળ͖͓ͯͯ͠ΓϑϩϯτΤϯυͷվળ͸͋ ·ΓਐΜͰ͍ͳ͍ঢ়گ
ࠓ͔Β೥ޙ͸ɺ։ൃ։͔࢝Β໿೥ܦͭ͜ͱʹͳΔ࢖༻͍ͯ͠Δ044ͷ อक͸ఀࢭ͍ͯ͠ΔͱࢥΘΕΔ ೥લͷγεςϜΛϝϯς͢ΔΤϯδχΞͷϞνϕʔγϣϯ΋࠾༻໘Ͱ΋ ΩπΠ

3",64$P -UE 3",64.FFUVQ ͪͳΈʹ೥લͬͯ͜ΜͳͰ͢ +BWB 1PTUHSF42- 0SBDMFJ 7# *4%/
ςϨϗʔμΠ $74 5PNDBUY "QBDIF %FCJBO 5VSCP-JOVY QIQ ೥໰୊ Ϋϥαό 744 8JO4FSWFS **4 "41

3",64$P -UE 3",64.FFUVQ ݱࡏͷϑϩϯτΤϯυͷ໰୊఺ %0.ૢ࡞͕ෳࡶͰɺύϑΥʔϚϯε΋ѱ͍ w ը໘ͷཁૉ਺͕ଟ͍ͱ Ͱ%0.ݕࡧ͕ࢮ͵΄Ͳ஗͍
)5.-ͷมߋ͕KT·Ͱ೾ٴ͢Δ w DMBTTଐੑΛมߋ͚ͨͩ͠Ͱಈ͔ͳ͘ͳΔ +TϑΝΠϧؒͷґଘؔ܎͕෼͔Βͳ͍ w มߋͷӨڹՕॴ͕Ͳ͜ʹग़Δͷ͔෼͔Βͳ͍ ܕ΍*%&ͷࢧԉ͕ͳ͘։ൃޮ཰͕ѱ͍

3",64$P -UE 3",64.FFUVQ Ͱ͸ɺͲͷΑ͏ʹվળ͍ͯ͘͠ͷ͔ γεςϜΛ࡞Γ௚ͤ͹࿩͸ૣ͍͕౰વͦ͏͍͏༁ʹ ͸͍͔ͳ͍ ػೳ௥ՃΛ΍Γͳ͕Βɺগͣͭ͠ߦ͏ඞཁ͕͋Δ
৽͍ٕ͠ज़ཁૉ΋গͣͭ͠औΓೖΕ͍͖͍ͯͨ ςετΛॻ͖ͳ͕Β҆શʹߦ͏ඞཁ͕͋Δ

3",64$P -UE 3",64.FFUVQ গͣͭ͠ɺ೔ৗͷ։ൃʹ༹͚ࠐ ·ͤͳ͕Βߦ͍ͬͯ͘

3",64$P -UE 3",64.FFUVQ ϞδϡʔϧԽ &4·Ͱͷ+BWB4DSJQUʹ͸Ϟδϡʔϧͷ֓೦͕ͳ ͍ͷ͕ϑϩϯτΤϯυΛվળ͢Δ্Ͱඇৗʹਏ͍ ݸਓతʹ͸ϑϩϯτΤϯυվળͰ࠷ॳʹ͢΂͖ ͸ɺϞδϡʔϧԽͱࢥ͍ͬͯΔ

3",64$P -UE 3",64.FFUVQ ϞδϡʔϧԽ͍ͯ͠ͳ͍ίʔυ <script src="jquery.js"></script> <script src="common.js"></script>
<script src="app.js"></script> ྫ͑͹ɺDPNNPOKT͸KRVFSZKTʹґଘ͍ͯͯ͠ɺ BQQKT͸DPNNPOKTʹґଘ͍ͯ͠Δͱ͍ͬͨ ஌͕ࣝίʔυͱͯ͠දݱ͞Ε͍ͯͳ͍ͨΊɺ Α͘෼͔Βͣʹॱ൪Λ่͢ͱಈ͔ͳ͘ͳΔɻ ґଘؔ܎Λ໌ࣔ͢Δ ϞδϡʔϧԽ

3",64$P -UE 3",64.FFUVQ Ͳ͜ʹӨڹ͕ग़Δ͔෼͔Βͳ͍ͷͰɺҋӢʹςετ͢ΔΑ͏ʹͳΓ ඇৗʹޮ཰͕ѱ͍ मਖ਼͢Δͷ͕ා͘ͳΔͷͰ৔౰ͨΓతͳରԠΛ͢ΔΑ͏ʹͳΔ ࠷ѱɺίʔυमਖ਼ͤͣʹίʔυ௥Ճͨ͠Γ͢ΔͱΧΦεʹ
ϞδϡʔϧԽ ґଘؔ܎͕෼͔Βͳ͍ͱͲ͏ͳΔ͔

3",64$P -UE 3",64.FFUVQ ϞδϡʔϧԽ // webpack.config.js͔Βൈਮ entry: { 'common.js':‘/src/common.ts’,
‘gamen1.js':‘/src/gamen1.ts', ‘gamen2.js’:‘/src/gamen2.ts', }, output: { libraryTarget: ‘umd', // ݹ͍ϒϥ΢βͰ΋ಈ͘ඞཁ͕͋ΔͷͰumdΛࢦఆ filename: ‘[name]' // distϑΥϧμʹcommmon.js, gamen1.jsɺgamen2.js͕ग़ྗ͞ΕΔ } 8FCQBDLͷઃఆͰෳ਺ΤϯτϦʔϙΠϯτΛࢦఆɺͦ ͷ୯ҐͰόΠϯυͨ͠KTϑΝΠϧΛग़ྗ͍ͯ͠Δ ͻͱ·ͣग़ྗ͢ΔKTϑΝΠϧͷ୯Ґ͸ม͍͑ͯͳ͍ͷͰ Өڹ͸খ࣮͘͞ݱͰ͖Δ

3",64$P -UE 3",64.FFUVQ ϞδϡʔϧԽʹΑΓґଘؔ܎Λ໌ࣔ͢Δ ϞδϡʔϧԽͨ͠ঢ়ଶ // app.js import
{ message } from ‘./common’ // ඞཁͳ֎෦ϞδϡʔϧΛimportͰಡΈࠐΈ message('Hello World'); BQQKT͸DPNNPOKTʹґଘ͍ͯ͠Δ͜ͱ͕Ұ໨ྎવ ·ͨɺඞཁͳ΋ͷ͚ͩJNQPSU͢Δ͜ͱͰΑΓґଘؔ܎͕ΑΓ໌֬ʹͳΔ // common.js export function message(msg) { // ֎෦͔Βࢀর͞ΕΔϝιουΛexportͰ໌ࣔ console.log(msg); } export function add(a, b) { return a + b; }

3",64$P -UE 3",64.FFUVQ ϞδϡʔϧԽ͢Δ͜ͱͰ ίʔυͷ࠶ར༻ੑ͕ߴ·Δ Ϟδϡʔϧʹ෼ׂ͢Δ͜ͱͰίʔυͷڽू౓্͕͛΍͢ ͍
ݱঢ়ͷ+41KTͷΑ͏ͳߏ੒ͩͱɺͬͨࣽ͝ʹͳΓ΍͍͢ ࡞ۀ෼୲͠΍͘͢ͳΔ ύʔπ୯Ґʹ։ൃ͢ΔΑ͏ʹͳΔͷͰ ςετίʔυ͕ॻ͖΍͘͢ͳΔ άϩʔόϧԚછ໰୊͕؇࿨͞ΕΔ

3",64$P -UE 3",64.FFUVQ 5ZQF4DSJQUͱ͸ "MU+4 +BWB4DSJQUͷ୅ସͱͳΔݴޠ ͷҰछ ฏͨ͘ݴ͏ͱܕΛఆٛͰ͖Δ+BWB4DSJQU
࣮ߦ؀ڥ͸͓࣋ͬͯΒͣɺKTʹม׵ʢτϥϯεύ Πϧʣ͢Δ͚ͩʢԼهͷʙʣ 1. TypeScriptιʔε -> ASTม׵ 2. AST͕ܕνΣοΧʔͰνΣοΫ͞ΕΔ 3. AST -> JavaεΫϦϓτιʔεग़ྗ 4. JavaScriptιʔε -> ASTม׵ 5. AST -> όΠτίʔυ 6. όΠτίʔυ͕ϥϯλΠϜͰ࣮ߦ͞ΕΔ

3",64$P -UE 3",64.FFUVQ 5ZQF4DSJQU ೥ݱࡏɺ"MU+4ͷσϑΝΫτͱݴ͑Δ +BWBͷ։ൃऀʹ͸ߏจ͕ͳ͡Έ΍͍͢ ؇͘ಋೖ͠΍͍͢ʢϨΨγʔͷվળʹ޲͍͍ͯ
Δʣ

3",64$P -UE 3",64.FFUVQ ؇͘ಋೖ͠΍͍͢ طଘίʔυʹ͍ͭͯ͸ɺͱΓ͋͑ͣBOZܕΛڐ༰͢ΔͳͲ؇͘ಋೖͰ͖Δ // common.js export
function add(a : any, b : any) { return a + b; }

3",64$P -UE 3",64.FFUVQ ؇͘ಋೖ͠΍͍͢ ͲΕ͙Β͍ݫີʹνΣοΫ͢Δ͔Λࣗ෼ͨͪͰઃఆͰ͖Δ // tsconfig.json /*
Strict Type-Checking Options */ "strict": false, /* Enable all strict type-checking options. */ "noImplicitAny": false, /* Raise error on expressions and declarations with an implied 'any' type. */ "strictNullChecks": true, /* Enable strict null checks. */ "strictFunctionTypes": true, /* Enable strict checking of function types. */ "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ νΣοΫͰΤϥʔͰ΋τϥϯεύΠϧ͢Δ͜ͱ͸Մೳ ϑΝΠϧͣͭঃʑʹUTϑΝΠϧʹҠߦ͍ͯ͘͜͠ͱ͕Մೳ

3",64$P -UE 3",64.FFUVQ ςετίʔυ ݩʑϑϩϯτΤϯυ͸ςετΛॻ͘श׳͕ͳ͔ͬ ͨ ҆શʹϦϑΝΫλϦϯά͢ΔͨΊʹ͸ςετίʔ υ͕ඞཁ

3",64$P -UE 3",64.FFUVQ +FTU 'BDFCPPL͕ࣾ։ൃ͍ͯ͠ΔϢχοτςετπʔ ϧͷ+FTUΛ࠾༻ +FTU͚ͩೖΕΕ͹ςετͰ͖Δγϯϓϧ͕͞ྑ͍
ςετϥϯφʔɺΞαʔγϣϯɺϞοΫશ෦ೖΓ ͱ͸ݴ͑ɺݱঢ়ϒϥ΢βʹґଘ͢ΔςετΛॻ͚͍ͯͳ ͍ͷͰ΍ΓํΛௐ΂ͳ͍ͱ͍͚ͳ͍ ʮϨΨγʔϑϩϯτΤϯυ҆શվળΨΠυʯʹࡌ͍ͬͯ Δख๏Λࢼͯ͠Έ͍ͨʢΊͪΌͪ͘ΌྑॻͰͨ͠ʣ

3",64$P -UE 3",64.FFUVQ ࣗ෼͸ٕज़બఆΛ͢Δཱ৔ʹ͍Δ͕ɺϛεΔͱຊ౰ʹ௧͍ ͳͷͰ৽͗͢͠Δ΋ͷ͸ආ͚Δ ΞʔϦʔϚδϣϦςΟ͙Β͍Λ໨ࢦ͍ͯ͠Ε͹େ֎͠͸ͳ͍
࣮ࡍ͸ɺ͍͕ͭΞʔϦʔϚδϣϦςΟ͔෼͔Βͳ͍ͷͰৗʹΞϯςφΛுͬͯഽײ֮Λ ஁͓͔͑ͯ͘͠ͳ͍ ٕज़બఆʹ͍ͭͯ Πϊϕʔλ ΞʔϦʔϚδϣϦςΟ ϥΨʔυ ٕज़બఆͷצॴ

3",64$P -UE 3",64.FFUVQ ٕज़બఆʹ͍ͭͯ 8&#%&7&-01&330"%."1 IUUQTHJUIVCDPNLBNSBOBINFETFEFWFMPQFSSPBENBQ ࢀߟʹ͍ͯ͠Δ΋ͷ

3",64$P -UE 3",64.FFUVQ ٕज़બఆʹ͍ͭͯ 5IPVHIU8PSLT5&$)/0-0(:3"%"3 IUUQTXXXUIPVHIUXPSLTDPNSBEBSMBOHVBHFTBOEGSBNFXPSLT ࢀߟʹ͍ͯ͠Δ΋ͷ ͭલͷαΠτ΋ͦ͏͕ͩɺ೔ຊͷτϨϯυ͸গ͠ҧͬͯͨΓ͢ΔͷͰࢀߟ·Ͱʹɻ

3",64$P -UE 3",64.FFUVQ ٕज़બఆʹ͍ͭͯ ։ൃ૊৫ͱͯ͠ݱࡏอ༗͍ͯ͠Δٕज़ͱɺ ࠓޙ೥Ͱ਎ʹ͚ͭΔඞཁ͕͋Δٕज़ʹ͍ͭͯϩʔυϚοϓΛ ࡞੒͍ͯ͠Δɻ ˠٕज़બఆ͢Δ࣌ʹ͸جຊతʹ͜ͷํ਑ʹै͏ ࣾ಺ͷٕज़ϩʔυϚοϓ

3",64$P -UE 3",64.FFUVQ ֶशʹ͍ͭͯ ৽͍ٕ͠ज़ཁૉΛऔΓೖΕΔͨΊʹ͸ɺ࣮ࡍʹ։ ൃ͢Δϝϯόʔʹͦͷٕज़Λ֮͑ͯ΋Β͏ඞཁ͕ ͋Δ ҰؾʹਐΊ͍ͨ࣌΋͋Δ͕ɺ୭΋͍ͭͯ͜ͳ͍ͱҙຯ͕
ͳ͍ͷͰগͣͭ͠ ೥ʹݸͰ΋ݸͰ΋৽͍͠ཁૉΛऔΓೖΕͨΒ0,ͱ͢Δ ৽͍͠΋ͷΛऔΓೖΕΔϖʔε

3",64$P -UE 3",64.FFUVQ ֶशʹ͍ͭͯ ͲΜͳϝϦοτ͕͋Δ͔஌ͬͯ΋Β͏ ಋೖऀͱϝϯόʔͷԹ౓͕ࠩ͋Δͱ͏·͍͔͘ͳ͍ ಋೖ͢ΔͱͲΜͳϝϦοτ͕͋Δͷ͔ϓϨθϯ͢Δ
ϝϯόʔʹͲ͏ͤͳΒྑ͍ܦݧΛͯ͠΋Β͍͍ͨ ৽͘͠ಋೖ͢Δٕज़ͷྑ͞Λ஌ͬͯ΋Β͏

3",64$P -UE 3",64.FFUVQ ֶशʹ͍ͭͯ ϝϯόʔͷεΩϧϨϕϧ͸·ͪ·ͪ ৽͍ٕ͠ज़ཁૉΛ΢Υον͍ͯ͠Δ͔΋·ͪ·ͪ ڵຯ͕͋ΔྖҬ΋·ͪ·ͪ
ͳͷͰೖ໳Ϩϕϧ·Ͱ͸αϙʔτͯ͋͛͠Δ ཁ఺Λ·ͱΊͯ͋͛Δ ษڧձΛ։࠵͢Δ ֶशΛαϙʔτ͢Δ

3",64$P -UE 3",64.FFUVQ ֶशʹ͍ͭͯ αϯϓϧίʔυΛෳ਺ਓͰϓϩάϥϛϯά͢Δ ਓ͕λΠϓͯ͠ɺपΓͷਓ͸αϙʔτ໾ େ఍͸εϥεϥͱίʔσΟϯάͰ͖ͳ͍ͷͰɺपΓ͕ؒ
ҧͬͯΔՕॴΛڭ͑ͯ͋͛Δ खΛಈ͔͢ͷͰ࠲ֶΑΓ΋ཧղ͕ਐΉ͠ίϛϡχ έʔγϣϯ໘Ͱ΋͓קΊ Ϟϒࣸܦ

3",64$P -UE 3",64.FFUVQ ֶशʹ͍ͭͯ ࠷ऴతʹ͸࢖֮ͬͯ͑ͯ΋Β͏͔͠ͳ͍ ॳΊͯ୲౰͢Δ࣌͸ɺ஌͍ͬͯΔਓͱϖΞͰ࡞ۀ ͨ͠Γֶश࣌ؒΛεϓϦϯτϓϥϯχϯά࣌ʹߟ ྀ͍ͯ͠Δ
࣮ࡍʹ։ൃ֮ͯ͑ͯ͠΋Β͏

3",64$P -UE 3",64.FFUVQ ୭͕ಘҙͳͷ͔ɺ୭ʹฉ͚͹ྑ͍ͷ͔৽نࢀՃϝϯόʔʹ΋෼͔Δ ܭըతͳεΩϧΞοϓʹͭͳ͛Δ ʮʓʓʹҹ͕ͳ͍͚Ͳ΍ͬͯΈ͍ͨʯͱ͍͏ձ࿩͕ൃੜ͢Δ
৺ཧతʹҹΛຒΊͨ͘ͳΔޮՌ΋ظ଴ ֶशʹ͍ͭͯ εΩϧ੕औදʹΑΔεΩϧͷݟ͑ΔԽ "͞Μ #͞Μ $͞Μ +BWB4DSJQU ˕ ˕ $44 ˚ ˓ ˓ )5.- ˚ ˓ ˕ 3FBDU ˕

3",64$P -UE 3",64.FFUVQ ૊৫ʹ͍ͭͯ ݱঢ়ɺϑϩϯτɾόοΫͱ͍͏෼͚͸ͳ͘Ұਓͷ ΤϯδχΞ͕୲౰͍ͯ͠Δ $44)5.-͕ۤखͳΤϯδχΞ͕ଟ͍
྆ํͷϋΠϨϕϧͳεΩϧΛ࣋ͭͷ͸೉͍͠ͱ ࢥ͍ͬͯΔ ݱঢ়ͷ՝୊ײ

3",64$P -UE 3",64.FFUVQ ૊৫ʹ͍ͭͯ ϑϩϯτΤϯυબ೚ͷϝϯόʔΛ࡞Δ ṷ͸ṷ԰ʹ೚ͤɺͦΕͧΕ͕ઐ໳ੑΛߴΊΔ ࡞ۀ෼୲ͯ͠ฏߦ࡞ۀ΋͠΍͘͢ͳΔ͸ͣ
কདྷతʹ͸ϑϩϯτબ೚ͷνʔϜΛ࡞Δܭը ͦ͜·Ͱ΍ΔͨΊʹ͸41"΍#''ͳͲɺϑϩϯτɾόοΫ ෼཭͍͔ͯ͠Ͷ͹ͳΒͳ͍ ৽͍͠ࢼΈ

ϞδϡʔϧԽ 5ZQF4DSJQU ςετίʔυ ٕज़બఆʹ͍ͭͯ ֶशʹ͍ͭͯ ૊৫ʹ͍ͭͯ ·ͱΊ

3",64$P -UE 3",64.FFUVQ ࠓճͰϑϩϯτଆΛվળ͢Δجૅ͸Ͱ͖͖ͯͨ ৽ػೳ͸4QSJOH 3FBDUͷߏ੒Ͱ࡞ΓͭͭɺϨΨγʔͳ ίʔυͷϝϯς΋҆৺ͯ͠ߦ͑Δঢ়ଶʹ͍ͯ͘͠ ݱࡏͷγεςϜߏ੒
+BWB +41 )5.-$44 K2VFSZ 5ZQFTDSJQU 4QSJOH 3FBDU

3",64$P -UE 3",64.FFUVQ ۜͷ஄ؙ͸ͳ͍ͷͰɺগͣͭ͠ վળΛଓ͚͍͖ͯ·͢

3",64$P -UE 3",64.FFUVQ ϨΨγʔͳϑϩϯτΤϯυ͸վ ળͰ͖Δ

3",64$P -UE 3",64.FFUVQ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

息の長いサービスのフロントエンドを少し改善する営み/frontend-improvement

息の長いサービスのフロントエンドを少し改善する営み/frontend-improvement

More Decks by A1

Featured

Transcript