Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

A1
October 28, 2020
2.8k

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

2020/10/28 Rakus Meetup資料

A1

October 28, 2020
Tweet

More Decks by A1

Transcript

  1. ˜3",64$P -UE 3",64.FFUVQ  ͳͥվળ͕ඞཁͳͷ͔  ݱঢ়ͷϑϩϯτΤϯυͷ໰୊఺  վળ׆ಈͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ 

    ϞδϡʔϧԽ  5ZQF4DSJQU  ςετίʔυ  ٕज़બఆʹ͍ͭͯ  ֶशʹ͍ͭͯ  ૊৫ʹ͍ͭͯ 
  2. ˜3",64$P -UE 3",64.FFUVQ ͳͥվળ͕ඞཁͳͷ͔  ௥Ճ͍ͨ͠ػೳ͸·ͩ·ͩ͋ͬͯɺ։ൃ͸ΞΫςΟϒʹଓ͘༧ఆ  ࠓ·ͰόοΫΤϯυΛத৺ʹվળ͖͓ͯͯ͠ΓϑϩϯτΤϯυͷվળ͸͋ ·ΓਐΜͰ͍ͳ͍ঢ়گ 

    ࠓ͔Β೥ޙ͸ɺ։ൃ։͔࢝Β໿೥ܦͭ͜ͱʹͳΔ࢖༻͍ͯ͠Δ044ͷ อक͸ఀࢭ͍ͯ͠ΔͱࢥΘΕΔ  ೥લͷγεςϜΛϝϯς͢ΔΤϯδχΞͷϞνϕʔγϣϯ΋࠾༻໘Ͱ΋ ΩπΠ 
  3. ˜3",64$P -UE 3",64.FFUVQ ͪͳΈʹ೥લͬͯ͜ΜͳͰ͢  +BWB 1PTUHSF42- 0SBDMFJ 7# *4%/

    ςϨϗʔμΠ $74 5PNDBUY "QBDIF %FCJBO 5VSCP-JOVY QIQ ೥໰୊ Ϋϥαό 744 8JO4FSWFS **4 "41
  4. ˜3",64$P -UE 3",64.FFUVQ  ͳͥվળ͕ඞཁͳͷ͔  ݱঢ়ͷϑϩϯτΤϯυͷ໰୊఺  վળ׆ಈͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ 

    ϞδϡʔϧԽ  5ZQF4DSJQU  ςετίʔυ  ٕज़બఆʹ͍ͭͯ  ֶशʹ͍ͭͯ  ૊৫ʹ͍ͭͯ 
  5. ˜3",64$P -UE 3",64.FFUVQ ݱࡏͷϑϩϯτΤϯυͷ໰୊఺  %0.ૢ࡞͕ෳࡶͰɺύϑΥʔϚϯε΋ѱ͍ w ը໘ͷཁૉ਺͕ଟ͍ͱ Ͱ%0.ݕࡧ͕ࢮ͵΄Ͳ஗͍ 

    )5.-ͷมߋ͕KT·Ͱ೾ٴ͢Δ w DMBTTଐੑΛมߋ͚ͨͩ͠Ͱಈ͔ͳ͘ͳΔ  +TϑΝΠϧؒͷґଘؔ܎͕෼͔Βͳ͍ w มߋͷӨڹՕॴ͕Ͳ͜ʹग़Δͷ͔෼͔Βͳ͍  ܕ΍*%&ͷࢧԉ͕ͳ͘։ൃޮ཰͕ѱ͍ 
  6. ˜3",64$P -UE 3",64.FFUVQ  ͳͥվળ͕ඞཁͳͷ͔  ݱঢ়ͷϑϩϯτΤϯυͷ໰୊఺  վળ׆ಈͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ 

    ϞδϡʔϧԽ  5ZQF4DSJQU  ςετίʔυ  ٕज़બఆʹ͍ͭͯ  ֶशʹ͍ͭͯ  ૊৫ʹ͍ͭͯ 
  7. ˜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ʹґଘ͍ͯ͠Δͱ͍ͬͨ ஌͕ࣝίʔυͱͯ͠දݱ͞Ε͍ͯͳ͍ͨΊɺ Α͘෼͔Βͣʹॱ൪Λ่͢ͱಈ͔ͳ͘ͳΔɻ ґଘؔ܎Λ໌ࣔ͢Δ ϞδϡʔϧԽ
  8. ˜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ϑΝΠϧͷ୯Ґ͸ม͍͑ͯͳ͍ͷͰ Өڹ͸খ࣮͘͞ݱͰ͖Δ
  9. ˜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; }
  10. ˜3",64$P -UE 3",64.FFUVQ ϞδϡʔϧԽ͢Δ͜ͱͰ  ίʔυͷ࠶ར༻ੑ͕ߴ·Δ  Ϟδϡʔϧʹ෼ׂ͢Δ͜ͱͰίʔυͷڽू౓্͕͛΍͢ ͍ 

    ݱঢ়ͷ+41KTͷΑ͏ͳߏ੒ͩͱɺͬͨࣽ͝ʹͳΓ΍͍͢  ࡞ۀ෼୲͠΍͘͢ͳΔ  ύʔπ୯Ґʹ։ൃ͢ΔΑ͏ʹͳΔͷͰ  ςετίʔυ͕ॻ͖΍͘͢ͳΔ  άϩʔόϧԚછ໰୊͕؇࿨͞ΕΔ 
  11. ˜3",64$P -UE 3",64.FFUVQ  ͳͥվળ͕ඞཁͳͷ͔  ݱঢ়ͷϑϩϯτΤϯυͷ໰୊఺  վળ׆ಈͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ 

    ϞδϡʔϧԽ  5ZQF4DSJQU  ςετίʔυ  ٕज़બఆʹ͍ͭͯ  ֶशʹ͍ͭͯ  ૊৫ʹ͍ͭͯ 
  12. ˜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. όΠτίʔυ͕ϥϯλΠϜͰ࣮ߦ͞ΕΔ
  13. ˜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ϑΝΠϧʹҠߦ͍ͯ͘͜͠ͱ͕Մೳ
  14. ˜3",64$P -UE 3",64.FFUVQ  ͳͥվળ͕ඞཁͳͷ͔  ݱঢ়ͷϑϩϯτΤϯυͷ໰୊఺  վળ׆ಈͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ 

    ϞδϡʔϧԽ  5ZQF4DSJQU  ςετίʔυ  ٕज़બఆʹ͍ͭͯ  ֶशʹ͍ͭͯ  ૊৫ʹ͍ͭͯ 
  15. ˜3",64$P -UE 3",64.FFUVQ +FTU  'BDFCPPL͕ࣾ։ൃ͍ͯ͠ΔϢχοτςετπʔ ϧͷ+FTUΛ࠾༻  +FTU͚ͩೖΕΕ͹ςετͰ͖Δγϯϓϧ͕͞ྑ͍ 

    ςετϥϯφʔɺΞαʔγϣϯɺϞοΫશ෦ೖΓ  ͱ͸ݴ͑ɺݱঢ়ϒϥ΢βʹґଘ͢ΔςετΛॻ͚͍ͯͳ ͍ͷͰ΍ΓํΛௐ΂ͳ͍ͱ͍͚ͳ͍  ʮϨΨγʔϑϩϯτΤϯυ҆શվળΨΠυʯʹࡌ͍ͬͯ Δख๏Λࢼͯ͠Έ͍ͨʢΊͪΌͪ͘ΌྑॻͰͨ͠ʣ 
  16. ˜3",64$P -UE 3",64.FFUVQ  ͳͥվળ͕ඞཁͳͷ͔  ݱঢ়ͷϑϩϯτΤϯυͷ໰୊఺  վળ׆ಈͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ 

    ϞδϡʔϧԽ  5ZQF4DSJQU  ςετίʔυ  ٕज़બఆʹ͍ͭͯ  ֶशʹ͍ͭͯ  ૊৫ʹ͍ͭͯ 
  17. ˜3",64$P -UE 3",64.FFUVQ  ࣗ෼͸ٕज़બఆΛ͢Δཱ৔ʹ͍Δ͕ɺϛεΔͱຊ౰ʹ௧͍  ͳͷͰ৽͗͢͠Δ΋ͷ͸ආ͚Δ  ΞʔϦʔϚδϣϦςΟ͙Β͍Λ໨ࢦ͍ͯ͠Ε͹େ֎͠͸ͳ͍ 

    ࣮ࡍ͸ɺ͍͕ͭΞʔϦʔϚδϣϦςΟ͔෼͔Βͳ͍ͷͰৗʹΞϯςφΛுͬͯഽײ֮Λ ஁͓͔͑ͯ͘͠ͳ͍ ٕज़બఆʹ͍ͭͯ       Πϊϕʔλ ΞʔϦʔϚδϣϦςΟ ϥΨʔυ ٕज़બఆͷצॴ
  18. ˜3",64$P -UE 3",64.FFUVQ  ͳͥվળ͕ඞཁͳͷ͔  ݱঢ়ͷϑϩϯτΤϯυͷ໰୊఺  վળ׆ಈͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ 

    ϞδϡʔϧԽ  5ZQF4DSJQU  ςετίʔυ  ٕज़બఆʹ͍ͭͯ  ֶशʹ͍ͭͯ  ૊৫ʹ͍ͭͯ 
  19. ˜3",64$P -UE 3",64.FFUVQ ֶशʹ͍ͭͯ  ϝϯόʔͷεΩϧϨϕϧ͸·ͪ·ͪ  ৽͍ٕ͠ज़ཁૉΛ΢Υον͍ͯ͠Δ͔΋·ͪ·ͪ  ڵຯ͕͋ΔྖҬ΋·ͪ·ͪ

     ͳͷͰೖ໳Ϩϕϧ·Ͱ͸αϙʔτͯ͋͛͠Δ  ཁ఺Λ·ͱΊͯ͋͛Δ  ษڧձΛ։࠵͢Δ  ֶशΛαϙʔτ͢Δ
  20. ˜3",64$P -UE 3",64.FFUVQ  ୭͕ಘҙͳͷ͔ɺ୭ʹฉ͚͹ྑ͍ͷ͔৽نࢀՃϝϯόʔʹ΋෼͔Δ  ܭըతͳεΩϧΞοϓʹͭͳ͛Δ  ʮʓʓʹҹ͕ͳ͍͚Ͳ΍ͬͯΈ͍ͨʯͱ͍͏ձ࿩͕ൃੜ͢Δ 

    ৺ཧతʹҹΛຒΊͨ͘ͳΔޮՌ΋ظ଴ ֶशʹ͍ͭͯ  εΩϧ੕औදʹΑΔεΩϧͷݟ͑ΔԽ "͞Μ #͞Μ $͞Μ +BWB4DSJQU ˕ ˕ $44 ˚ ˓ ˓ )5.- ˚ ˓ ˕ 3FBDU ˕
  21. ˜3",64$P -UE 3",64.FFUVQ  ͳͥվળ͕ඞཁͳͷ͔  ݱঢ়ͷϑϩϯτΤϯυͷ໰୊఺  վળ׆ಈͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ 

    ϞδϡʔϧԽ  5ZQF4DSJQU  ςετίʔυ  ٕज़બఆʹ͍ͭͯ  ֶशʹ͍ͭͯ  ૊৫ʹ͍ͭͯ 
  22. ˜3",64$P -UE 3",64.FFUVQ ૊৫ʹ͍ͭͯ  ϑϩϯτΤϯυબ೚ͷϝϯόʔΛ࡞Δ  ṷ͸ṷ԰ʹ೚ͤɺͦΕͧΕ͕ઐ໳ੑΛߴΊΔ  ࡞ۀ෼୲ͯ͠ฏߦ࡞ۀ΋͠΍͘͢ͳΔ͸ͣ

     কདྷతʹ͸ϑϩϯτબ೚ͷνʔϜΛ࡞Δܭը  ͦ͜·Ͱ΍ΔͨΊʹ͸41"΍#''ͳͲɺϑϩϯτɾόοΫ ෼཭͍͔ͯ͠Ͷ͹ͳΒͳ͍  ৽͍͠ࢼΈ
  23. ˜3",64$P -UE 3",64.FFUVQ  ͳͥվળ͕ඞཁͳͷ͔  ݱঢ়ͷϑϩϯτΤϯυͷ໰୊఺  վળ׆ಈͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ 

    ϞδϡʔϧԽ  5ZQF4DSJQU  ςετίʔυ  ٕज़બఆʹ͍ͭͯ  ֶशʹ͍ͭͯ  ૊৫ʹ͍ͭͯ  ·ͱΊ