JavaScript/CSS 2015 Autumn
?
86 likes?18,318 views
まるでドッグ?イヤ`のごとく篁するフロントエンド_kに藤れていませんか娠哨札奪轡腑鵑任蓮BabelやPostCSSの秘の碧圭や聞い圭を盾hすることによって、肝弊旗の癖であるEcmaScript 6やCSS 3を枠函りし、Lく聞える室gを附につけます。送れの堀さに雌わされないようにしましょう。 Koji Ishimoto @IWATE HTML5 COMMUNITY #3 on October 14 https://www.facebook.com/events/674956182641567/
![オブジェクトリテラル Enhanced Object Literals
var 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
オススメ](https://image.slidesharecdn.com/javascript-css-2015-151015031647-lva1-app6892/85/JavaScript-CSS-2015-Autumn-43-320.jpg)
![哈方と處麻徨 Default + Rest + Spread
function add(x, y=2) {
return x + y;
}
add(3) == 5
function add(x) {
var y = arguments.length <= 1 || arguments[1] ===
undefined ? 2 : arguments[1];
return x + y;
}
ES6
オススメ](https://image.slidesharecdn.com/javascript-css-2015-151015031647-lva1-app6892/85/JavaScript-CSS-2015-Autumn-45-320.jpg)
![哈方と處麻徨 Default + Rest + Spread
function subtract(x, ...y) {
return x - y.length;
}
subtract(10, 't', '3', '2', 'k') == 7
function 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
オススメ](https://image.slidesharecdn.com/javascript-css-2015-151015031647-lva1-app6892/85/JavaScript-CSS-2015-Autumn-46-320.jpg)
![哈方と處麻徨 Default + Rest + Spread
function multiple(x, y, z) {
return x * y * z;
}
multiple(...[1,2,3]) == 6
function multiple(x, y, z) {
return x * y * z;
}
multiple.apply(undefined, [1, 2, 3]) == 6;
ES6
オススメ](https://image.slidesharecdn.com/javascript-css-2015-151015031647-lva1-app6892/85/JavaScript-CSS-2015-Autumn-47-320.jpg)
![蛍護旗秘 Destructuring Assignment
var [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](https://image.slidesharecdn.com/javascript-css-2015-151015031647-lva1-app6892/85/JavaScript-CSS-2015-Autumn-48-320.jpg)
![クラス Classes
var _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;
})();](https://image.slidesharecdn.com/javascript-css-2015-151015031647-lva1-app6892/85/JavaScript-CSS-2015-Autumn-52-320.jpg)
![モジュ`ル Modules
// lib/math.js
Object.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.js
var _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));](https://image.slidesharecdn.com/javascript-css-2015-151015031647-lva1-app6892/85/JavaScript-CSS-2015-Autumn-58-320.jpg)
![color
a {
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-adjuster
Spec:
Plugin:
CSS Color Module Level 4 - The color() function
postcss-color-fucntion](https://image.slidesharecdn.com/javascript-css-2015-151015031647-lva1-app6892/85/JavaScript-CSS-2015-Autumn-91-320.jpg)
JavaScript/CSS 2015 Autumn
- 1. JavaScript/CSS 2015 Autumn Koji Ishimoto @IWATE HTML5 COMMUNITY #3 on October 14 ? 2015 Kaizen Platform, Inc.
- 5. Creative NetworkUX optimize Platform Search Social Email Site Content Content Creative Conversations + Display About KAIZEN PLATFORM @A議個鋲のためのワ`クフロ`の砿尖 からgHのテストやナレッジ們eまで 2000兆を階えるT蒙晒された UIデザイナ`やコピ`ライタ`のネットワ`ク
- 6. Agenda
- 7. Agenda ? フロントエンド_kのF彜 ? JavaScript 2015 ? CSS 2015 ? Build Toolsとか ? まとめ
- 11. Angular 1 と Angular 2 のB亊 シ`ムレスなアップグレ`ドの圭隈について http://googledevjp.blogspot.jp/2015/10/angular-1-angular-2.html
- 13. Languages that compiles to Javascript
- 15. JS Build Tools
- 18. このさき伏き火る室宝とは
- 20. DOM Selectorの卞り笋錣 // けっこ`念 - DOM Level 2 Core var anchors = document.getElementById(｀js-node') ???????? .getElementsByTagName('a'); // jQueryさまさま゛ var anchors = $('#js-node > a'); // わりと恷除 - Selectors API Level 1 var anchors = document.querySelectorAll(｀#js-node > a'); ^肇を尅り卦ってみると´
- 21. シンプル}j 鏡徭
- 22. シンプル}j 鏡徭 DOM Level 2 Core
- 23. シンプル}j 鏡徭 DOM Level 2 Core
- 24. シンプル}j 鏡徭 DOM Level 2 Core Selectors API Level 1
- 25. シンプル}j 鏡徭 DOM Level 2 Core Selectors API Level 1
- 27. JavaScript 2015
- 28. Ecma International Technical Committee 39 - ECMAScript https://github.com/tc39
- 34. ECMAScript 6 compatibility table ブラウザeのES 5/6/7の鮉rを_J辛嬬 https://kangax.github.io/compat-table/es6
- 35. 聞えないじゃん! m
- 36. 芦伉してください バべりますよ
- 37. Babel The compiler for writing next generation JavaScript 肝弊旗JavaScriptを書聞えるようにするトランスパイラ https://babeljs.io/
- 38. Babel transpile ES6 to ES5 ES6 ES5 ES3 劣、Babelは6to5という兆念だったが、ES7、JSX吉も トランスパイルできるためF壓の兆念に鯛ち彭いた .js .js
- 39. Languages that compiles to Javascript
- 40. ES6 You might not need Babel Chrome Extensions v0.12+ .js Future Browsers ??
- 41. アロ`v方 Arrows and Lexical This var add = (x, y) => x + y; オススメ var add = function add(x, y) { return x + y; }; ES6
- 42. アロ`v方 Arrows and Lexical This var 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 Object Literals var 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 + Const var 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 + Spread function add(x, y=2) { return x + y; } add(3) == 5 function add(x) { var y = arguments.length <= 1 || arguments[1] === undefined ? 2 : arguments[1]; return x + y; } ES6 オススメ
- 46. 哈方と處麻徨 Default + Rest + Spread function subtract(x, ...y) { return x - y.length; } subtract(10, 't', '3', '2', 'k') == 7 function 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 + Spread function multiple(x, y, z) { return x * y * z; } multiple(...[1,2,3]) == 6 function multiple(x, y, z) { return x * y * z; } multiple.apply(undefined, [1, 2, 3]) == 6; ES6 オススメ
- 48. 蛍護旗秘 Destructuring Assignment var [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 Strings var name = 't32k', age = 'today'; `Hello ${name}. You are ${time} years old.` var name = 't32k', age = 'today'; "Hello " + name + ".n You are " + time + " years old."; ES6 オススメ
- 50. クラス Classes class 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. クラス Classes var _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. プロミス Promises function 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) { }); }); }); ES6 ES5 オススメ勣: Poly?ll
- 54. You must include the Babel polyfill http://babeljs.io/docs/usage/polyfill/ いくつかのC嬬を旋喘するには並念にpoly?llをインスト`ルする駅勣がある
- 56. Map + Set + WeakMap + WeakSet // Sets var s = new Set(); s.add("hello").add("goodbye").add("hello"); s.size === 2; s.has("hello") === true; // Maps var m = new Map(); m.set("hello", 42); m.set(s, 34); m.get(s) == 34; // Weak Maps var wm = new WeakMap(); wm.set(s, { extra: 42 }); wm.size === undefined // Weak Sets var ws = new WeakSet(); ws.add({ data: 42 }); 勣: Poly?ll ES6
- 57. モジュ`ル Modules // lib/math.js export function sum(x, y) { return x + y; } export var pi = 3.14; // app.js import * as math from "lib/math"; alert(math.sum(math.pi, math.pi)); ES6 ES6
- 58. モジュ`ル Modules // lib/math.js Object.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.js var _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. babelify Browserify transform for Babel https://github.com/babel/babelify
- 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 - Finished The TC39 categorises proposals into 4 stages:
- 63. ESLint Pluggable JavaScript linter 徭蛍挫みのLintO協が辛嬬 http://eslint.org/
- 65. CSS 2015
- 69. CSS Levels
- 74. Taking a Modular Approach CSS2.1參週はモジュ`ル圭塀のため、モノリシックなCSSとしてのv3は贋壓しない
- 77. ? 畍罍Recommendation:?REC ? 畍羂牽Proposed?Recommendation:?PR ? 畍羣鰕aCandidate?Recommendation:?CR ? 恷K課宛Last?Call?Working?Draft:?LCWD ? 課宛Working?Draft:?WD ? ｼ宀課宛Editor¨s?Draft: ED
- 78. cssnext Use tomorrow's CSS syntax, today. by MoOx Future Syntaxが聞えるPostCSSのプラグインパッケ`ジ http://cssnext.io/
- 79. PostCSS??
- 84. 皆温壊壊にmりすぎてないですか
- 86. cssnext で聞える Future Syntax 匯E
- 87. custom properties & var() :root { --brandColor: green; } strong { color: var(--brandColor); } LCWD Spec: Plugin: See also: CSS Custom Properties for Cascading Variables Module Level 1 postcss/postcss-custom-properties postcss/postcss-simple-vars
- 88. reduced calc() :root { --fontSize: 1rem; } h1 { font-size: calc(var(--fontSize) * 2); } CR Spec: Plugin: CSS Values and Units Module Level 3 postcss/postcss-calc See also: MoOx/reduce-css-calc
- 89. custom media queries @custom-media --small-vieport (max-width: 30em); /* media queriesの譴魴屬りやすく峺協 */ @media (--small-viewport) { /* small viewport喘のスタイルを峰 */ } FPWD Spec: Plugin: Media Queries Level 4 postcss/postcss-custom-media
- 90. custom selectors @custom-selector :--button button, .button; @custom-selector :--enter :hover, :focus; :--button { /* ボタン喘のスタイルを峰 */ } :--button:--enter { /* hover/focus彜Bのボタン喘のスタイルを峰 */ } ED Spec: Plugin: CSS Extensions postcss/postcss-custom-selectors
- 91. color a { 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-adjuster Spec: Plugin: CSS Color Module Level 4 - The color() function postcss-color-fucntion
- 92. hwb() body { color: hwb(90, 0%, 0%, 0.5); } /* Q瘁のCSS */ body { color: rgba(128, 255, 0, 0.5); } ED Spec: Plugin: CSS Color Module Level 4 - HWB Colors: hwb() function postcss/postcss-color-hwb
- 93. gray() body { color: gray(255, 50%); } /* Q瘁のCSS */ body { color: rgba(255, 255, 255, 0.5); } ED Spec: Plugin: CSS Color Module Level 4 - The gray() functional notation postcss/postcss-color-gray
- 94. #rrggbbaa body { background: #99DD99CC } /* Q瘁のCSS */ body { background: rgba(153, 221, 153, 0.8) } ED Spec: Plugin: CSS Color Module Level 4 - The RGB hexadecimal notations postcss/postcss-color-hex-alpha
- 95. rebeccapurple body { background: rebeccapurple } /* Q瘁のCSS */ body { background: rgb(102, 51, 153) } ED Why 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 Color Module. Spec: Plugin: CSS Color Module Level 4 - Named Colors postcss/postcss-color-rebeccapurple
- 96. font-variant h2 { font-variant-caps: small-caps; } /* Q瘁のCSS */ h2 { font-feature-settings: "c2sc"; font-variant-caps: small-caps; } Spec: Plugin: CSS Fonts Module Level 3 postcss/postcss-font-variant CR
- 97. filter .blur { filter: blur(4px); } /* Q瘁のCSS */ .blur { filter: url(/slideshow/javascriptcss-2015-autumn/53954496/｀data:image/svg+xml;utf8,<svg_xmlns=＾...ation=＾4￣ /></filter></svg>); filter: blur(4px); } WD Spec: Plugin: Filter Effects Module Level 1 iamvdo/pleeease-filters
- 98. rem units .section { margin: 2.5rem 2px 3em 100%; } /* Q瘁のCSS */ .section { margin: 80px 2px 3em 100%; } Spec: Plugin: CSS Values and Units Module Level 3 robwierzbowski/node-pixrem CR
- 99. :any-link pseudo-class nav :any-link > span { background-color: yellow; } /* Q瘁のCSS */ nav :link > span, nav :visited > span { background-color: yellow; } ED Spec: Plugin: Selectors Level 4 - The Hyperlink Pseudo-class: :any-link jonathantneal/postcss-pseudo-class-any-link
- 100. :matches pseudo-class p:matches(:first-child, .special) { color: red; } /* Q瘁のCSS */ p:first-child, p.special { color: red; } ED Spec: Plugin: Selectors Level 4 - The Matches-any Pseudo-class: :matches() postcss/postcss-selector-matches
- 101. :not pseudo-class p:not(:first-child, .special) { color: red; } /* Q瘁のCSS */ p:not(:first-child), p:not(.special) { color: red; } ED Spec: Plugin: Selectors Level 4 - The Negation Pseudo-class: :not() postcss/postcss-selector-not
- 102. pseudo-elements a::before { color: red; } /* Q瘁のCSS */ a:before { color: red; } REC Spec: Plugin: Selectors Level 3 axa-ch/postcss-pseudoelements
- 103. Alpha colors body { color: rgba(153, 211, 153, 0.8); } /* Q瘁のCSS */ body { color: #99DD99; color: rgba(153, 211, 153, 0.8); } REC Spec: Plugin: CSS Color Module Level 3 postcss/postcss-color-rgba-fallback
- 105. stylelint Modern CSS linter. 徭蛍挫みのCSS LintO協が辛嬬 http://stylelint.io/
- 106. ? Sassばかりいていて癖のこと梨れていた ? 碧が耕まっていないので弖昧コストがかかる ? 珂看或恰箆が裸嫖りすぎなので倖繁議に伉塘
- 107. Build Tools 2015
- 108. JS Build Tools
- 111. え`いままよ grunt build いっけ`´! > Fatal error: Unable to ?nd local grunt.
- 112. 馨9(員Д員)??????
- 113. npm run-scripts
- 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 run build GulpだろうがGruntだろうが、package.jsonに峰し、 npm runコマンドさええとけば寄嬋健 ひとつ渇鷸することで、Buildツ`ルの送佩りりに
- 118. 厚仟峭まってる´
- 119. 馨9(員Д員)??????
- 120. すみません すみません すみません
- 122. 厚仟峭まってる´
- 123. package.json { "scripts": { "start": "gulp serve", "publish": "kss-node path/to/stylesheets" }
- 124. プラグインを初さず 岷俊コマンドをg佩
- 125. まとめ
- 126. ? ツ`ルはプラグイン戻工で蛍晒 ? ある殻業のxk凛が駅勣になってくる ? 返あたり肝及、乾るしかない ? rgない繁は恷仟碧でトレンドを游む
- 128. Let¨s enjoy Front-end Dev!
- 130. Be a Growth Hacker! https://kaizenplatform.com/ja/about_growth_hacker.html