最新フロントエンド事情2016年版

社内LT大会用スライド
※非フロントエンドエンジニア向け

Transcript

1. ࠷৽ϑϩϯτΤϯυࣄ৘ 2016೥൛ 2016-04-27 @maechabin
2. ैདྷͷϑϩϯτΤϯυ
3. ैདྷͷϑϩϯτΤϯυʢʙ2010ʣ HTML CSS JavaScript
4. ैདྷͷϑϩϯτΤϯυʢʙ2010ʣ HTML CSS JavaScript ͱΓ͋͑ͣɺ͜ͷ3ͭͷ஌͕ࣝ͋ Ε͹े෼ͩͬͨ
5. ݱࡏ͸ʁ
6. ݱࡏͷϑϩϯτΤϯυʢʙ2016ʣ HTML CSS JavaScript + Node.js, npm, TypeScript, ES2015, Babel browserify, webpack, gulp, grunt, Jasmin, Mocha, React, Angular, ESLint, Jade, Express, Sass, Less, PostCSS, BEM, cssnext etc..
7. 2010೥୅લ൒ʹԿ͕ى͖ͨʁ
8. ͦͷ̍
9. ͦͷ̍. HTML5ͷొ৔ HTML̑ͷొ৔ʹΑΓɺϒϥ΢βͷੑೳ͕޲্ 㱺 V8Τϯδϯͷ஀ੜ
10. ͦͷ̎
11. ͦͷ2. Node.jsͷීٴ V8ΤϯδϯΛ࢖ͬͨNode.js͕ීٴ 㱺 αʔόʔαΠυͰJavaScript͕ಈ͘Α͏ʹͳͬͨ
12. ͜ΕʹΑΓ
13. αʔόʔαΠυΞϓϦέʔγϣϯ΍SPAʢγϯά ϧϖʔδΞϓϦέʔγϣϯʣͷΑ͏ͳߴ౓Ͱෳࡶ ͳΞϓϦέʔδϣϯΛ։ൃͰ͖ΔΑ͏ʹͳͬͨ ͦΕʹ൐͍ɺେن໛։ൃʹ଱͑ΒΕΔ৽͍͠։ൃ ख๏΍ݴޠ࢓༷͕ٻΊΒΕΔΑ͏ʹͳͬͨ
14. ͭ·Γ
15. ͜ΕΒͷ஌͕ࣝඞཁͱͳͬͨʂ HTML CSS JavaScript + Node.js, npm, TypeScript, ES2015, Babel browserify, webpack, gulp, grunt, Jasmin, Mocha, React, Angular, ESLint, Jade, Express, Sass, Less, PostCSS, BEM, cssnext etc..
16. ੔ཧ͢Δͱ
17. ʻ৽͍͠ݴޠɺ࢓༷ʼ ɾEcmaScript 2015ʢES6ʣ http://www.ecma-international.org/ecma-262/6.0/ ɾTypeScript https://www.typescriptlang.org/ classߏจ, ੩తܕ෇͚, ϒϩοΫείʔϓ, ί ʔϧόοΫ஍ࠈରࡦ, ϞδϡʔϧγεςϜͳͲ େن໛։ൃʹରԠ
18. ʻτϥϯεύΠϥʼ ɾBabel http://babeljs.io/ ઌ΄Ͳͷ৽͍͠ݴޠ͸ϒϥ΢βͰ͸ಈ͔ͳ͍ ͷͰɺϒϥ΢βͰಈ͘JavaScriptʢES5ʣʹม ׵ͯ͘͠ΕΔ
19. ʻϏϧυπʔϧʼ ɾBrowserify http://browserify.org/ ɾWebpack https://webpack.github.io/ Node.js΍ES2015ͷϞδϡʔϧγεςϜͷಋೖʹΑΓɺ Ϟδϡʔϧؒʹґଘؔ܎Λ࣋ͨͤΒΕΔΑ͏ʹͳͬͨ ͕ɺBabelͯ͠΋͜Ε·ͨϒϥ΢βͰ͸ಡΊͳ͍ͷͰɺ ͜ͷґଘؔ܎Λҡ࣋ͨ͠··ɺϒϥ΢βͰಡΊΔJSϑ ΝΠϧʹϏϧυͯ͘͠ΕΔ
20. ʻMV*ϑϨʔϜϫʔΫʼ ɾReact + Flux https://facebook.github.io/react/ http://facebook.github.io/flux/ ɾAngular 1 / Angular 2 https://angularjs.org/ ɾVue.js https://jp.vuejs.org/ JavaScriptͷߴ଎ԽʹΑΔෳࡶͳSPAΛ։ൃ͢ΔͨΊ ͷΞʔΩςΫνϟ
21. ʻഁ୼͠ͳ͍CSSͷϧʔϧʼ ɾBEM https://en.bem.info/ ɾSMACSS https://smacss.com/ja େن໛։ൃʹͳΔͱഁ୼͕ͪ͠ͳCSSΛഁ୼ ͤ͞ͳ͍Α͏ʹ͢ΔͨΊͷCSSઃܭࢥ૝
22. ʻഁ୼͠ͳ͍CSSΛॻͨ͘Ίͷख๏ʼ ɾSass http://sass-lang.com/ ɾLess http://less-ja.studiomohawk.com/ ɾPostCSS http://postcss.org/ BEM΍SMACSSΛॻ͖΍ͯ͘͘͢͠ΕΔ ϑΝΠϧΛ෼ׂͨ͠େن໛։ൃʹ΋ରԠ
23. ʻϢχοτςετϑϨʔϜϫʔΫʼ ɾMocha + Chai or power-assert https://mochajs.org/ http://chaijs.com/ https://github.com/power-assert-js/power-assert ɾJasmin http://jasmine.github.io/ ɾJest https://facebook.github.io/jest/ ΞϓϦέʔγϣϯ͕ෳࡶԽɾେن໛ԽʹΑΓϑϩ ϯτΤϯυͰ΋ςετ͕ඞਢʹͳ͖͍ͬͯͯΔ
24. ʻߏจνΣοΧʔʼ ɾESLint + Airbnb JavaScript Style Guide http://eslint.org/ https://github.com/airbnb/javascript େਓ਺Ͱ΋ಉ͡ίʔυͷॻ͖ํʹͳΔΑ͏ߏจ ͷνΣοΫΛͯ͘͠ΕΔͷͱɺλΠϙ๷͛Δ ࣗ෼ͨͪͰϧʔϧΛ࡞Δ͜ͱ΋Ͱ͖Δ
25. ͜ΕΒΛͲ͏ͨ͠Β͍͍ͷʁʁ
26. ʻλεΫϥϯφʔʼ ɾgulp http://gulpjs.com/ ɾGrunt http://gruntjs.com/ ɾnpm-script https://docs.npmjs.com/misc/scripts ͜Ε·Ͱ঺հͨ͠πʔϧͨͪΛλεΫͱͯ͠· ͱΊͯɺඞཁͳ࣌ʹ࣮ߦͯ͘͠ΕΔ
27. ʻδΣωϨʔλʔʼ ɾYeoman http://yeoman.io/ ͜Ε·Ͱ঺հͨ͠πʔϧͨͪΛɺίϚϯυͻ ͱͭͰ४උͯ͘͠ΕΔ railsͰݴ͏scaffoldͷΑ͏ͳ΋ͷ
28. ؅ཧ͸ʁʁ
29. ʻύοέʔδ؅ཧʼ ɾnpm https://www.npmjs.com/ NodeύοέʔδϚωʔδϟʔɻ͜Ε·Ͱ঺հͨ͠πʔ ϧ͸΄΅npmܦ༝ͰΠϯετʔϧɺ؅ཧͰ͖ΔΑ͏ʹͳ ͍ͬͯΔ Node.jsΛΠϯετʔϧ͢ΔͱࣗಈͰΠϯετʔϧ͞Ε Δ
30. ৄࡉ͸ެࣜυΩϡϝϯτΛݟ·͠ΐ͏