JavaScript/CSS 2015 Autumn
•
86 j'aime•18,317 vues
まるでドッグ・イヤーのごとく変化するフロントエンド開発に疲れていませんか？本セッションでは、BabelやPostCSSの導入の仕方や使い方を解説することによって、次世代の標準仕様であるEcmaScript 6やCSS 3を先取りし、長く使える技術を身につけます。流れの速さに惑わされないようにしましょう。 Koji Ishimoto @IWATE HTML5 COMMUNITY #3 on October 14 https://www.facebook.com/events/674956182641567/
Recommandé
Contenu connexe
Tendances
Tendances (18)
Similaire à JavaScript/CSS 2015 Autumn
Similaire à JavaScript/CSS 2015 Autumn (20)
Plus de Koji Ishimoto
Plus de Koji Ishimoto (19)
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 継続的改善のためのワークフローの管理 から実際のテストやナレッジ蓄積まで 2000名を超える専門特化された UIデザイナーやコピーライターのネットワーク
- 6. Agenda
- 7. Agenda • フロントエンド開発の現状 • JavaScript 2015 • CSS 2015 • Build Toolsとか • まとめ
- 11. Angular 1 と Angular 2 の連携 シームレスなアップグレードの方法について 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. シンプル複雑 標準 独自
- 22. シンプル複雑 標準 独自 DOM Level 2 Core
- 23. シンプル複雑 標準 独自 DOM Level 2 Core
- 24. シンプル複雑 標準 独自 DOM Level 2 Core Selectors API Level 1
- 25. シンプル複雑 標準 独自 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 ブラウザ別のES 5/6/7の対応状況を確認可能 https://kangax.github.io/compat-table/es6
- 35. 使えないじゃん! ＞m＜
- 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等も トランスパイルできるため現在の名前に落ち着いた .js .js
- 39. Languages that compiles to Javascript
- 40. ES6 You might not need Babel Chrome Extensions v0.12+ .js Future Browsers ??
- 41. アロー関数 Arrows and Lexical This var add = (x, y) => x + y; オススメ var add = function add(x, y) { return x + y; }; ES6
- 42. アロー関数 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 オススメ要: Polyfill
- 54. You must include the Babel polyfill http://babeljs.io/docs/usage/polyfill/ いくつかの機能を利用するには事前にpolyfillをインストールする必要がある
- 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 }); 要: Polyfill 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 自分好みのLint設定が可能 http://eslint.org/
- 65. CSS 2015
- 69. CSS Levels
- 74. Taking a Modular Approach CSS2.1以降はモジュール方式のため、モノリシックなCSSとしてのv3は存在しない
- 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's CSS syntax, today. by MoOx Future Syntaxが使えるPostCSSのプラグインパッケージ http://cssnext.io/
- 79. PostCSS??
- 84. Sassに頼りすぎてないですか？
- 86. cssnext で使える Future Syntax 一覧
- 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状態のボタン用のスタイルを記述 */ } 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); } /* 変換後の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%); } /* 変換後の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 } /* 変換後の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 } /* 変換後の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; } /* 変換後の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); } /* 変換後のCSS */ .blur { filter: url(‘data:image/svg+xml;utf8,<svg xmlns=“...ation=“4” /></filter></svg>#filter’); filter: blur(4px); } WD Spec: Plugin: Filter Effects Module Level 1 iamvdo/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 3 robwierzbowski/node-pixrem CR
- 99. :any-link pseudo-class nav :any-link > span { background-color: yellow; } /* 変換後の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; } /* 変換後の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; } /* 変換後の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; } /* 変換後の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); } /* 変換後の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 Lint設定が可能 http://stylelint.io/
- 106. • Sassばかり書いていて標準仕様のこと忘れていた • 仕様が固まっていないので追随コストがかかる • MoOx氏が頑張りすぎなので個人的に心配
- 107. Build Tools 2015
- 108. JS Build Tools
- 111. えーいままよ！ grunt build！ いっけー…! > Fatal error: Unable to find local grunt.
- 112. m9(^Д^)ﾌﾟｷﾞｬｰ
- 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. m9(^Д^)ﾌﾟｷﾞｬｰ
- 120. すみません すみません すみません
- 122. 更新止まってる…
- 123. package.json { "scripts": { "start": "gulp serve", "publish": "kss-node path/to/stylesheets" }
- 124. プラグインを介さず 直接コマンドを実行
- 125. まとめ
- 126. • ツールはプラグイン提供で細分化 • ある程度の選択眼が必要になってくる • 手あたり次第、触るしかない • 時間ない人は最新仕様でトレンドを掴む
- 128. Let’s enjoy Front-end Dev!
- 130. Be a Growth Hacker! https://kaizenplatform.com/ja/about_growth_hacker.html