Downloaded 73 times
![オブジェクトリテラル拡張 Enhanced Object Literalsvar obj = {somethingMethod,hello(message) {console.log(message);},[ 'a' + 'b' ]: 'c'};function _defineProperty(obj, key, value){ …(中略)… }var obj = _defineProperty({somethingMethod: somethingMethod,hello: function hello(message) {console.log(message);}}, 'a' + 'b', 'c');ES6オススメ](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjavascript-css-2015-151015031647-lva1-app6892%2f75%2fJavaScript-CSS-2015-Autumn-43-2048.jpg&f=jpg&w=240)
![引数と演算子 Default + Rest + Spreadfunction add(x, y=2) {return x + y;}add(3) == 5function add(x) {var y = arguments.length <= 1 || arguments[1] ===undefined ? 2 : arguments[1];return x + y;}ES6オススメ](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjavascript-css-2015-151015031647-lva1-app6892%2f75%2fJavaScript-CSS-2015-Autumn-45-2048.jpg&f=jpg&w=240)
![引数と演算子 Default + Rest + Spreadfunction subtract(x, ...y) {return x - y.length;}subtract(10, 't', '3', '2', 'k') == 7function subtract(x) {for (var _len = arguments.length, y = Array(_len > 1 ?_len - 1 : 0), _key = 1; _key < _len; _key++) {y[_key - 1] = arguments[_key];}return x - y.length;}ES6オススメ](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjavascript-css-2015-151015031647-lva1-app6892%2f75%2fJavaScript-CSS-2015-Autumn-46-2048.jpg&f=jpg&w=240)
![引数と演算子 Default + Rest + Spreadfunction multiple(x, y, z) {return x * y * z;}multiple(...[1,2,3]) == 6function multiple(x, y, z) {return x * y * z;}multiple.apply(undefined, [1, 2, 3]) == 6;ES6オススメ](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjavascript-css-2015-151015031647-lva1-app6892%2f75%2fJavaScript-CSS-2015-Autumn-47-2048.jpg&f=jpg&w=240)
![分割代入 Destructuring Assignmentvar [a, , b] = [1,2,3];var {name: c, age: d} = {name: 't32k', age: 32};var _ref = [1, 2, 3];var a = _ref[0];var b = _ref[2];var _name$age = { name: 't32k', age: 32 };var c = _name$age.name;var d = _name$age.age;ES6](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjavascript-css-2015-151015031647-lva1-app6892%2f75%2fJavaScript-CSS-2015-Autumn-48-2048.jpg&f=jpg&w=240)
![クラス Classesvar _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i< props.length; i++) { var descriptor = props[i]; descriptor.enumerable =descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor)descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }return function (Constructor, protoProps, staticProps) { if (protoProps)defineProperties(Constructor.prototype, protoProps); if (staticProps)defineProperties(Constructor, staticProps); return Constructor; }; })();function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)){ throw new TypeError("Cannot call a class as a function"); } }var Rectangle = (function () {function Rectangle(height, width) {_classCallCheck(this, Rectangle);this.height = height;this.width = width;}_createClass(Rectangle, [{key: "calcArea",value: function calcArea() {return this.height * this.width;}}, {key: "area",get: function get() {return this.calcArea();}}]);return Rectangle;})();](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjavascript-css-2015-151015031647-lva1-app6892%2f75%2fJavaScript-CSS-2015-Autumn-52-2048.jpg&f=jpg&w=240)
![モジュール Modules// lib/math.jsObject.defineProperty(exports, "__esModule", {value: true});exports.sum = sum;function _interopRequireWildcard(obj) { if (obj &&obj.__esModule) { return obj; } else { var newObj = {}; if(obj != null) { for (var key in obj) { if(Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] =obj[key]; } } newObj["default"] = obj; return newObj; } }// app.jsvar _libMath = require("lib/math");var math = _interopRequireWildcard(_libMath);function sum(x, y) {return x + y;}var pi = 3.14;exports.pi = pi;alert(math.sum(math.pi, math.pi));](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjavascript-css-2015-151015031647-lva1-app6892%2f75%2fJavaScript-CSS-2015-Autumn-58-2048.jpg&f=jpg&w=240)
![colora {color: color(red alpha(-10%));}a:hover {color: color(red blackness(80%));}ED• [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] )• [red( | green( | blue( | alpha( | a(] '*' <percentage> )• [hue( | h(] ['+' | '-' | '*']? <angle> )• [saturation( | s(] ['+' | '-' | '*']? <percentage> )• [lightness( | l(] ['+' | '-' | '*']? <percentage> )• [whiteness( | w(] ['+' | '-' | '*']? <percentage> )• [blackness( | b(] ['+' | '-' | '*']? <percentage> )• tint( <percentage> )• shade( <percentage> )• blend( <color> <percentage> [rgb | hsl | hwb]? )• contrast( <percentage>? )List of color-adjusterSpec:Plugin:CSS Color Module Level 4 - The color() functionpostcss-color-fucntion](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjavascript-css-2015-151015031647-lva1-app6892%2f75%2fJavaScript-CSS-2015-Autumn-91-2048.jpg&f=jpg&w=240)
Uploaded byKoji Ishimoto
18,333 views
JavaScript/CSS 2015 Autumn
Recommended
More Related Content
What's hot
Similar to JavaScript/CSS 2015 Autumn
More from Koji Ishimoto
JavaScript/CSS 2015 Autumn
- 1.JavaScript/CSS 2015 AutumnKojiIshimoto @IWATE HTML5 COMMUNITY #3 on October 14© 2015 Kaizen Platform, Inc.
- 2.
- 3.
- 5.Creative NetworkUX optimizePlatformSearchSocialEmailSite ContentContentCreativeConversations+DisplayAbout KAIZEN PLATFORM継続的改善のためのワークフローの管理から実際のテストやナレッジ蓄積まで2000名を超える専門特化されたUIデザイナーやコピーライターのネットワーク
- 6.
- 7.Agenda• フロントエンド開発の現状• JavaScript2015• CSS 2015• Build Toolsとか• まとめ
- 8.
- 9.
- 10.
- 11.Angular 1 とAngular 2 の連携シームレスなアップグレードの方法についてhttp://googledevjp.blogspot.jp/2015/10/angular-1-angular-2.html
- 12.
- 13.Languages that compilesto Javascript
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.DOM Selectorの移り変わり// けっこー前- DOM Level 2 Corevar anchors = document.getElementById(‘js-node') .getElementsByTagName('a');// jQueryさまさま∼var anchors = $('#js-node > a');// わりと最近 - Selectors API Level 1var anchors = document.querySelectorAll(‘#js-node > a');過去を振り返ってみると…
- 21.
- 22.
- 23.
- 24.シンプル複雑標準独自DOM Level 2CoreSelectors APILevel 1
- 25.シンプル複雑標準独自DOM Level 2CoreSelectors APILevel 1
- 26.
- 27.
- 28.Ecma InternationalTechnical Committee39 - ECMAScripthttps://github.com/tc39
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.ECMAScript 6 compatibilitytableブラウザ別のES 5/6/7の対応状況を確認可能https://kangax.github.io/compat-table/es6
- 35.
- 36.
- 37.Babel The compilerfor writing next generation JavaScript次世代JavaScriptを今使えるようにするトランスパイラhttps://babeljs.io/
- 38.Babel transpile ES6to ES5ES6 ES5 ES3昔、Babelは6to5という名前だったが、ES7、JSX等もトランスパイルできるため現在の名前に落ち着いた.js .js
- 39.Languages that compilesto Javascript
- 40.ES6You might notneed BabelChrome Extensionsv0.12+.jsFuture Browsers??
- 41.アロー関数 Arrows andLexical Thisvar add = (x, y) =>x + y;オススメvar add = function add(x, y) {return x + y;};ES6
- 42.アロー関数 Arrows andLexical Thisvar obj = {name: 't32k',sayHello: function (friends) {friends.forEach( friend => {console.log(this.name + ' says hello to ' + friend)});}};var obj = {name: 't32k',sayHello: function sayHello(friends) {var _this = this;friends.forEach(function (friend) {console.log(_this.name + ' says hello to ' + friend);});}};ES6オススメ
- 43.オブジェクトリテラル拡張 Enhanced ObjectLiteralsvar obj = {somethingMethod,hello(message) {console.log(message);},[ 'a' + 'b' ]: 'c'};function _defineProperty(obj, key, value){ …(中略)… }var obj = _defineProperty({somethingMethod: somethingMethod,hello: function hello(message) {console.log(message);}}, 'a' + 'b', 'c');ES6オススメ
- 44.ブロックスコープ Let +Constvar x = 'var x';var y = 'var y';{let x = 'let x';const y = 'const x';}var x = 'var x';var y = 'var y';{var _x = 'let x';var _y = 'const x';}ES6
- 45.引数と演算子 Default +Rest + Spreadfunction add(x, y=2) {return x + y;}add(3) == 5function add(x) {var y = arguments.length <= 1 || arguments[1] ===undefined ? 2 : arguments[1];return x + y;}ES6オススメ
- 46.引数と演算子 Default +Rest + Spreadfunction subtract(x, ...y) {return x - y.length;}subtract(10, 't', '3', '2', 'k') == 7function subtract(x) {for (var _len = arguments.length, y = Array(_len > 1 ?_len - 1 : 0), _key = 1; _key < _len; _key++) {y[_key - 1] = arguments[_key];}return x - y.length;}ES6オススメ
- 47.引数と演算子 Default +Rest + Spreadfunction multiple(x, y, z) {return x * y * z;}multiple(...[1,2,3]) == 6function multiple(x, y, z) {return x * y * z;}multiple.apply(undefined, [1, 2, 3]) == 6;ES6オススメ
- 48.分割代入 Destructuring Assignmentvar[a, , b] = [1,2,3];var {name: c, age: d} = {name: 't32k', age: 32};var _ref = [1, 2, 3];var a = _ref[0];var b = _ref[2];var _name$age = { name: 't32k', age: 32 };var c = _name$age.name;var d = _name$age.age;ES6
- 49.テンプレート Template Stringsvarname = 't32k', age = 'today';`Hello ${name}.You are ${time} years old.`var name = 't32k',age = 'today';"Hello " + name + ".n You are " + time + " yearsold.";ES6オススメ
- 50.クラス Classesclass Rectangle{constructor(height, width) {this.height = height;this.width = width;}getArea() {return this.calcArea()}calcArea() {return this.height * this.width;}}ES6
- 51.function Rectangle (height,width) {this.height = height;this.width = width;}Rectangle.prototype.getArea = function () {return this.calcArea();};Rectangle.prototype.calcArea = function () {return this.height * this.width;};ES5クラス Classes
- 52.クラス Classesvar _createClass= (function () { function defineProperties(target, props) { for (var i = 0; i< props.length; i++) { var descriptor = props[i]; descriptor.enumerable =descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor)descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }return function (Constructor, protoProps, staticProps) { if (protoProps)defineProperties(Constructor.prototype, protoProps); if (staticProps)defineProperties(Constructor, staticProps); return Constructor; }; })();function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)){ throw new TypeError("Cannot call a class as a function"); } }var Rectangle = (function () {function Rectangle(height, width) {_classCallCheck(this, Rectangle);this.height = height;this.width = width;}_createClass(Rectangle, [{key: "calcArea",value: function calcArea() {return this.height * this.width;}}, {key: "area",get: function get() {return this.calcArea();}}]);return Rectangle;})();
- 53.プロミス Promisesfunction asyncTaskN(){ return new Promise(); }asyncTask1().then(result => {return asyncTask2();}).then(result => {return asyncTask3();}).catch(error => {});asyncTask1(function(error, result) {asyncTask2(function(error, result) {asyncTask3(function(error, result) {});});});ES6ES5オススメ要: Polyfill
- 54.You must includethe Babel polyfillhttp://babeljs.io/docs/usage/polyfill/いくつかの機能を利用するには事前にpolyfillをインストールする必要がある
- 55.
- 56.Map + Set+ WeakMap + WeakSet// Setsvar s = new Set();s.add("hello").add("goodbye").add("hello");s.size === 2;s.has("hello") === true;// Mapsvar m = new Map();m.set("hello", 42);m.set(s, 34);m.get(s) == 34;// Weak Mapsvar wm = new WeakMap();wm.set(s, { extra: 42 });wm.size === undefined// Weak Setsvar ws = new WeakSet();ws.add({ data: 42 });要: PolyfillES6
- 57.モジュール Modules// lib/math.jsexportfunction sum(x, y) {return x + y;}export var pi = 3.14;// app.jsimport * as math from "lib/math";alert(math.sum(math.pi, math.pi));ES6ES6
- 58.モジュール Modules// lib/math.jsObject.defineProperty(exports,"__esModule", {value: true});exports.sum = sum;function _interopRequireWildcard(obj) { if (obj &&obj.__esModule) { return obj; } else { var newObj = {}; if(obj != null) { for (var key in obj) { if(Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] =obj[key]; } } newObj["default"] = obj; return newObj; } }// app.jsvar _libMath = require("lib/math");var math = _interopRequireWildcard(_libMath);function sum(x, y) {return x + y;}var pi = 3.14;exports.pi = pi;alert(math.sum(math.pi, math.pi));
- 59.babelifyBrowserify transform forBabelhttps://github.com/babel/babelify
- 60.
- 61.• Stage 0- Strawman• es7.comprehensions• es7.classProperties• es7.doExpressions• es7.functionBind• Stage 1 - Proposal• es7.decorators• es7.exportExtensions• es7.trailingFunctionCommas• Stage 2 - Draft (Default Stage)• Stage 3 - Candidate• Stage 4 - FinishedThe TC39 categorises proposals into 4 stages:
- 62.
- 63.ESLint Pluggable JavaScriptlinter自分好みのLint設定が可能http://eslint.org/
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.Taking a ModularApproachCSS2.1以降はモジュール方式のため、モノリシックなCSSとしてのv3は存在しない
- 75.
- 76.
- 77.• 勧告（Recommendation: REC）• 勧告案（Proposed Recommendation: PR）•勧告候補（Candidate Recommendation: CR）• 最終草案（Last Call Working Draft: LCWD）• 草案（Working Draft: WD）• 編集者草案（Editor’s Draft: ED）
- 78.cssnext Use tomorrow'sCSS syntax, today. by MoOxFuture Syntaxが使えるPostCSSのプラグインパッケージhttp://cssnext.io/
- 79.
- 80.
- 81.
- 82.
- 84.
- 85.
- 86.cssnext で使える FutureSyntax 一覧
- 87.custom properties &var():root {--brandColor: green;}strong {color: var(--brandColor);}LCWDSpec:Plugin:See also:CSS Custom Properties for Cascading Variables Module Level 1postcss/postcss-custom-propertiespostcss/postcss-simple-vars
- 88.reduced calc():root {--fontSize:1rem;}h1 {font-size: calc(var(--fontSize) * 2);}CRSpec:Plugin:CSS Values and Units Module Level 3postcss/postcss-calcSee also: MoOx/reduce-css-calc
- 89.custom media queries@custom-media--small-vieport (max-width: 30em);/* media queriesの範囲を分かりやすく指定 */@media (--small-viewport) {/* small viewport用のスタイルを記述 */}FPWDSpec:Plugin:Media Queries Level 4postcss/postcss-custom-media
- 90.custom selectors@custom-selector :--buttonbutton, .button;@custom-selector :--enter :hover, :focus;:--button {/* ボタン用のスタイルを記述 */}:--button:--enter {/* hover/focus状態のボタン用のスタイルを記述 */}EDSpec:Plugin:CSS Extensionspostcss/postcss-custom-selectors
- 91.colora {color: color(redalpha(-10%));}a:hover {color: color(red blackness(80%));}ED• [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] )• [red( | green( | blue( | alpha( | a(] '*' <percentage> )• [hue( | h(] ['+' | '-' | '*']? <angle> )• [saturation( | s(] ['+' | '-' | '*']? <percentage> )• [lightness( | l(] ['+' | '-' | '*']? <percentage> )• [whiteness( | w(] ['+' | '-' | '*']? <percentage> )• [blackness( | b(] ['+' | '-' | '*']? <percentage> )• tint( <percentage> )• shade( <percentage> )• blend( <color> <percentage> [rgb | hsl | hwb]? )• contrast( <percentage>? )List of color-adjusterSpec:Plugin:CSS Color Module Level 4 - The color() functionpostcss-color-fucntion
- 92.hwb()body {color: hwb(90,0%, 0%, 0.5);}/* 変換後のCSS */body {color: rgba(128, 255, 0, 0.5);}EDSpec:Plugin:CSS Color Module Level 4 - HWB Colors: hwb() functionpostcss/postcss-color-hwb
- 93.gray()body {color: gray(255,50%);}/* 変換後のCSS */body {color: rgba(255, 255, 255, 0.5);}EDSpec:Plugin:CSS Color Module Level 4 - The gray() functional notationpostcss/postcss-color-gray
- 94.#rrggbbaabody {background: #99DD99CC}/*変換後のCSS */body {background: rgba(153, 221, 153, 0.8)}EDSpec:Plugin:CSS Color Module Level 4 - The RGB hexadecimal notationspostcss/postcss-color-hex-alpha
- 95.rebeccapurplebody {background: rebeccapurple}/*変換後のCSS */body {background: rgb(102, 51, 153)}EDWhy this plugin?If you did some CSS, I'm sure you know who Eric Meyer is, & what he did for this language.In memory of Eric Meyer’s daughter, W3C added new color rebeccapurple to CSS 4 ColorModule.Spec:Plugin:CSS Color Module Level 4 - Named Colorspostcss/postcss-color-rebeccapurple
- 96.font-varianth2 {font-variant-caps: small-caps;}/*変換後のCSS */h2 {font-feature-settings: "c2sc";font-variant-caps: small-caps;}Spec:Plugin:CSS Fonts Module Level 3postcss/postcss-font-variantCR
- 97.filter.blur {filter: blur(4px);}/*変換後のCSS */.blur {filter: url(‘data:image/svg+xml;utf8,<svgxmlns=“...ation=“4” /></filter></svg>#filter’);filter: blur(4px);}WDSpec:Plugin:Filter Effects Module Level 1iamvdo/pleeease-filters
- 98.rem units.section {margin:2.5rem 2px 3em 100%;}/* 変換後のCSS */.section {margin: 80px 2px 3em 100%;}Spec:Plugin:CSS Values and Units Module Level 3robwierzbowski/node-pixremCR
- 99.:any-link pseudo-classnav :any-link> span {background-color: yellow;}/* 変換後のCSS */nav :link > span,nav :visited > span {background-color: yellow;}EDSpec:Plugin:Selectors Level 4 - The Hyperlink Pseudo-class: :any-linkjonathantneal/postcss-pseudo-class-any-link
- 100.:matches pseudo-classp:matches(:first-child, .special){color: red;}/* 変換後のCSS */p:first-child, p.special {color: red;}EDSpec:Plugin:Selectors Level 4 - The Matches-any Pseudo-class: :matches()postcss/postcss-selector-matches
- 101.:not pseudo-classp:not(:first-child, .special){color: red;}/* 変換後のCSS */p:not(:first-child), p:not(.special) {color: red;}EDSpec:Plugin:Selectors Level 4 - The Negation Pseudo-class: :not()postcss/postcss-selector-not
- 102.pseudo-elementsa::before {color: red;}/*変換後のCSS */a:before {color: red;}RECSpec:Plugin:Selectors Level 3axa-ch/postcss-pseudoelements
- 103.Alpha colorsbody {color:rgba(153, 211, 153, 0.8);}/* 変換後のCSS */body {color: #99DD99;color: rgba(153, 211, 153, 0.8);}RECSpec:Plugin:CSS Color Module Level 3postcss/postcss-color-rgba-fallback
- 104.
- 105.stylelint Modern CSSlinter.自分好みのCSS Lint設定が可能http://stylelint.io/
- 106.• Sassばかり書いていて標準仕様のこと忘れていた• 仕様が固まっていないので追随コストがかかる•MoOx氏が頑張りすぎなので個人的に心配
- 107.
- 108.
- 109.
- 110.
- 111.えーいままよ！grunt build！いっけー…!> Fatalerror: Unable to find local grunt.
- 112.
- 113.
- 114.package.json{"name": "Maple","version": "0.3.0","repository":{"type": "git","url": "git://github.com/t32k/maple.git"},"scripts": {"start": "gulp serve","build": "gulp build"},"engines": {"node": ">=4.0"},"devDependencies": {
- 115.package.json$ npm runbuildGulpだろうがGruntだろうが、package.jsonに記述し、npm runコマンドさえ覚えとけば大丈夫！ひとつ抽象化することで、Buildツールの流行り廃りに対応
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.package.json{"scripts": {"start": "gulpserve","publish": "kss-node path/to/stylesheets"}
- 124.
- 125.
- 126.• ツールはプラグイン提供で細分化• ある程度の選択眼が必要になってくる•手あたり次第、触るしかない• 時間ない人は最新仕様でトレンドを掴む
- 127.
- 128.
- 129.
- 130.Be a GrowthHacker!https://kaizenplatform.com/ja/about_growth_hacker.html
- 131.