一休.comにおけるfrontend開発

Transcript

1. Ұٳ.comʹ͓͚Δϑϩϯ τΤϯυ։ൃʢϞμϯฤʣ גࣜձࣾҰٳ ࡫ౡ༞հ @zimathon
2. ΞδΣϯμ • WebForms => .NET MVC΁ͷҠߦ • ϑϩϯτΤϯυपΓͷٕज़ͷಋೖʹ͍ͭͯ • TypescriptΛ࠾༻ͨ͠ཧ༝ • ͦͷޙͲ͏ͳ͔ͬͨ • ৽͍ٕ͠ज़ΛεϜʔζʹಋೖ͢Δʹ͸
3. ࣗݾ঺հ • ࡫ౡ ༞հ (@zimathon) • ॓ധࣄۀຊ෦ɹγεςϜ։ൃ෦ • Engineering Manager
4. WebForms => .NET MVC
5. ෦෼తʹϦχϡʔΞϧ • ೝূαʔϏε • ձһೝূपΓ͚ͩΛ੾Γग़ͯ͠ɺMVCԽ • Outboundʢւ֎ϗςϧ༧໿αΠτʣ • ৽αʔϏεʢ͜͏͍͏ͷ͸ద༻͠΍͍͢ʣ
6. ৽͘͠࠾༻ٕͨ͠ज़ • Typescript • ࠷ۙ1.8.7ʹ͋͛·ͨ͠ • Sass/Compass • bower • gulp
7. ΫϥΠΞϯτ؀ڥߏஙํ๏ • batϑΝΠϧͰߏங • Ұٳͷ։ൃ؀ڥ࡞੒࣌ʹɺ୭͠΋͕Ұ౓͸࣮ ߦ͢ΔbatϑΝΠϧ • choco, npm ʹΑΓΠϯετʔϧ͞Ε·͢ • node.js, gulp, Typescript, sass, etc…
8. ࣮ࡍͷbatϑΝΠϧʢҰ෦ʣ @call npm -g list | findstr /I "typescript@1.8.7" > nul 2>&1 @if errorlevel 1 ( %LOGGER% "### Installing TypeScript with npm." @call npm install -g typescript@1.8.7 >> %LOGFILE% 2>&1 ) else ( %LOGGER% "### typescript is installed." ) @call npm -g list | findstr /I "gulp" > nul 2>&1 @if errorlevel 1 ( %LOGGER% "### Installing gulp with npm." @call npm install -g gulp >> %LOGFILE% 2>&1 ) else ( %LOGGER% "### gulp is installed." ) @call npm -g list | findstr /I "bower@1.5.3" > nul 2>&1 @if errorlevel 1 ( %LOGGER% "### Installing bower with npm." @call npm install -g bower@1.5.3 >> %LOGFILE% 2>&1 ) else ( %LOGGER% "### bower is installed." )
9. Lint΋ಋೖ • TypeScript Lint • Scss Lint • ΄΅σϑΥϧτͷઃఆͰӡ༻͍ͯ͠·͢
10. bower.json { "name": "Ikyu", "dependencies": { "jquery": "~1.11.3", "underscore": "~1.8.3", "js-sha256" : "~0.3.0" } }
11. TypeScriptͷϏϧυʢൈਮʣ var gulp = require('gulp'); var typescript = require('gulp-typescript'); var uglify = require('gulp-uglify'); var sourcemaps = require('gulp-sourcemaps'); var plumber = require('gulp-plumber'); var notify = require('gulp-notify'); exports.createGulpTask = function (subDir, taskName) { return function () { gulp.src([INPUT_ROOT_DIR + subDir + taskName + '.ts']) .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) .pipe(sourcemaps.init()) .pipe(typescript(createTypeScriptConfig(taskName + '.js'))) .js .pipe(uglify()) .pipe(sourcemaps.write('.', { sourceRoot: INPUT_ROOT_DIR })) .pipe(gulp.dest(OUTPUT_ROOT_DIR + subDir)); } }
12. SassͷϏϧυʢൈਮʣ var gulp = require('gulp'); var compass = require('gulp-compass'); var plumber = require('gulp-plumber'); var notify = require('gulp-notify'); exports.createGulpTask = function (subDir, taskName) { return function(){ gulp.src(INPUT_ROOT_DIR + subDir + taskName + '.scss') .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) .pipe(compass({ config_file: INPUT_ROOT_DIR + 'config.rb', comments: false, css: OUTPUT_ROOT_DIR, sass: INPUT_ROOT_DIR })); } }
13. ࠷ۙͷํ޲ੑ • bowerΛ֎͍ͨ͠ • ຊ౰ʹඞཁͳந৅ԽϨΠϠʔͳͷ͔ • ϑϩϯτͷϥΠϒϥϦ΋npmʹἧ͖ͬͯͨ • TypescriptΛطଘͷαʔϏεʹల։͍͖ͯͨ͠ ͍
14. ϑϩϯτΤϯυपΓͷٕज़ͷ ಋೖʹ͍ͭͯ
16. ΍Γ͍ͨ΍͕ͭҾͬுΔελΠϧ • ͋Ε͍Ε͍ͨɺ͜Ε΍Γ͍ͨΛ࣮ݱ͢Δҝʹ ओಋతʹಈ͘ • νʔϜͱͯ͠։ൃΛਐΊΔҎ্ɺ఻ಓࢣͱ͠ ͯ΋ؤுΔ • શମͷҙࢥܾఆʹؔͯ͠΋੹೚Λ࣋ͭ
17. TypescriptΛ࠾༻ͨ͠ཧ༝
18. Google TrendsΑΓ
19. ݱঢ়ͷ՝୊ • ॓ധαΠτ͸ϦϓϨΠεͯ͠ɺ6೥͕ܦա • ൃੜͨ͠՝୊ • ࠶ར༻͞Εͳ͍ؔ਺ʢྨࣅؔ਺͕ଟ͍ʣ • Ͳ͔͜Βࢀর͞Ε͍ͯΔ͔Θ͔Βͳ͍jsϑΝΠϧ • 1ϖʔδͰࢀর͢ΔjsϑΝΠϧ͕ଟ͗͢Δ • jqueryґଘʢjqueryϥΠϒϥϦଟਿʣ • ΈΜͳ޷͖উखʹೖΕͯ͠·ͬͯɺ΋͸΍Կ͕ਖ਼͍͠ͷ͔Θ͔Βͳ͍ • ࠞࡏ͢Δjqueryͷόʔδϣϯ • ΋͸΍lint͕ྲྀͤͳ͍ɻɻɻ
20. ۩ମతͳΞΫγϣϯΛͯ͜͠ ͳ͔ͬͨ
21. ࣮ࡍͷϖʔδͰࢀর͢Δjs
22. ࣮ࡍͷϖʔδͰࢀর͢Δjs
23. ʊਓਓਓʊ ʼɹ27%ɹʻ ʉY^Yʉ
24. Α͋͘Δձ࿩ ৽ਓʮ͜ͷjsͬͯͳΜͰ͜͜ͰಡΈࠐ·ΕͯΔΜ Ͱ͚ͨͬ͠ʁʯ ϕςϥϯʮͦΕͲ͔͜Β΋Α͹Εͯͳ͍Αʯ ৽ਓʮͳΔ΄Ͳɻ(͡Ό͋ফͯ͘͠ΕΑʂʣʯ
25. ͳͥTypescript͔ʁ • ࣾ಺ͷϑϩϯτΤϯυྗͷ࣮৘ • ͦΕ΄Ͳߴ͍΋ͷͰ͸ͳ͍ • babelͳͲΛಋೖͯ͠΋ɺՌ͖ͨͯͬͪ͠Γӡ༻Ͱ͖Δ͔Ͳ ͏͔ • ݴޠʹΑΔ੍໿Λ΋ͨͤΔ΂͖ • ܕʹΑΔνΣοΫ • ׳Ε͍ͯΔΫϥεϕʔεͰॻ͚Δ
26. • Visual Studioͱͷ૬ੑ • VisualStudioCode΋͍͍͘͢͝Ͱ͢ΑͶʂ • Ϟδϡʔϧ࠶ར༻͠΍͍͢ • ES6ޓ׵ͷॻ͖ํʹͳΔ ͳͥTypescript͔ʁ
27. TypeScriptΛಋೖͯ͠ى͖ͨ ͜ͱ
28. ೝূαʔϏε
29. TypeScript͕ͦ΋ͦ΋ਁಁ͠ͳ͍ • letͱvar ͷ࢖͍෼͚ • functionΩʔϫʔυͱΞϩʔγϯλοΫεʹΑΔڍ ಈͷҧ͍ • ܧঝ͢΂͖෦෼Ͱܧঝ͠ͳ͍ • Ͳ͏ͯ͠΋ݱঢ়ͷjavascriptʹҾͬுΒΕͯ͠·͏
30. lintͰൃੜͨ͠Τϥʔ͕Θ͔Γͮ Β͍ Error: public\ts\member\xxx.ts(42,56): error TS2345: Argument of type 'JQuery' is not assignable to parameter of type '(index: number, value: number) => string[]'. toString()ͷఆٛ࿙Ε
31. ES5ʹݶఆͰ͖Δ؀ڥͰ͸ແ͔ͬͨ • ϦϦʔε౰࣌ͷIEͷαϙʔτόʔδϣϯ • 8Ҏ߱ • ೝূαʔϏεͷϦϦʔεʹΑͬͯαϙʔτ͕ଧͪফ͞Ε ͕ͨɺप஌͞Εͣ • ϦϦʔεޙɺࠞཚ • Ϣʔβʔ͔Βͷ໰͍߹Θͤ΋͋Γ
32. গͣͭ͠શମʹਁಁ • ͩΜͩΜ׳Ε͖ͯͨ • ઌۦऀ͕1ਓ͍ͨͷͰɺͦͷϝϯόʔ͕νʔ ϜΛϦʔυ • ࠓ·Ͱͷjavascriptͷ՝୊ղܾΛ࣮ײ • ϞδϡʔϧԽɺܧঝ etc
33. Outbound ʢւ֎༧໿αʔϏεʣ
34. .tsͷத਎͕ੜjs • TypeScriptΛಋೖͨ͠ཧ༝͕ɺɺɺ • σβΠφʔ͕.tsϑΝΠϧΛ࡞੒ • αʔϏεͷϩʔϯνΛ༏ઌͯ͠ɺٕज़తͳڭ ҭΛߦ͏͕࣌ؒແ͔ͬͨ
35. Ϧʔυ͢Δਓେࣄʂ • ͲΜͳٕज़Ͱ΋ಋೖ͢Δ͚ͩͰ͸͏·͍͔͘ ͳ͍ • ઌۦऀ͕νʔϜશମʹ޿͛ΔΑ͏ʹಈ͘͜ͱ • ࢖͍ํΛ఻͑Δ • ࢥ૝Λ఻͑Δ
36. ࠓޙͷΞΫγϣϯ
37. ໨ࢦ͍ͯ͠Δํ޲
38. TypescriptΛಋೖ͢Δ • طଘγεςϜʢ॓ധɺϨετϥϯʣͰTypescriptΛ࢖͏ • .jsΛ.tsʹมߋ͢Δ • ·ͣ͸Typescript Λར༻Ͱ͖Δ؀ڥΛ੔͑Δ • গͣͭ͠಺෦ॲཧΛTypescriptʹஔ͖׵͍͑ͯ͘ • ཧ۶ΑΓ΋ʮྑ͘ͳͬͨʯͱ͍͏࣮ײ
39. jslintΛ࣮ߦ͢Δ function checkOffCoupon(msg) { var input = document.getElementById("<%= x.ClientID %>").value; var apply = window.document.aspnetForm.elements["<%= Me.b.CdName %>"].value; if (input != '') { if (apply == '') { if (window.document.aspnetForm.elements["<%= Me.b.StatusName %>"].value == "<%= CodeMasterFlg.False %>") { msg = msg + \n"; } else { msg = msg + \n"; } } else if (input != apply) { msg = msg + \n"; } } return msg; }
40. jslintΛ࣮ߦ͢Δ function checkOffCoupon(msg) { var input = document.getElementById("<%= x.ClientID %>").value; var apply = window.document.aspnetForm.elements["<%= Me.b.CdName %>"].value; if (input != '') { if (apply == '') { if (window.document.aspnetForm.elements["<%= Me.b.StatusName %>"].value == "<%= CodeMasterFlg.False %>") { msg = msg + \n"; } else { msg = msg + \n"; } } else if (input != apply) { msg = msg + \n"; } } return msg; } ୯७ʹͦͷ··Ͱͷ࣮ߦ͸೉͍͠
41. jslintΛ࣮ߦ͢Δ • ݱঢ়Ͱ͖Δ͜ͱ • αʔόαΠυίϯτϩʔϧͷ෦෼͸จࣈྻʹஔ׵ • কདྷతʹ • ม਺ͱϩδοΫΛ෼཭͢Δ • jsϩδοΫ͚ͩ lint Ͱ͖ΔΑ͏ʹ͢Δ
42. ·ͱΊ • ٕज़తͳղܾΛߦ͏ʹ͸ • Ϧʔυ͢Δਓ͕େࣄ • ୈೋɺୈࡾͷαϙʔτ͕ग़ͯ͘Ε͹গͣͭ͠νʔ Ϝʹ޿͕Δ • ໰୊Λ์ஔ͠ͳ͍ • ͙ͬͱࣃΛ৯͍റͬͯɺ໨ͷલͷ໰୊Λղܾ͢Δ
44. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠