JavaScript/CSS 2015 Autumn

JavaScript/CSS 2015 Autumn

1. 1. JavaScript/CSS 2015 Autumn Koji Ishimoto @IWATE HTML5 COMMUNITY #3 on October 14 © 2015 Kaizen Platform, Inc.
2. 2. Koji Ishimoto @t32k Front-End Developer
3. 3. StyleStats CSSを解析するWebサービス http://www.stylestats.org/
4. 4. Creative NetworkUX optimize Platform Search Social Email Site Content Content Creative Conversations + Display About KAIZEN PLATFORM 継続的改善のためのワークフローの管理 から実際のテストやナレッジ蓄積まで 2000名を超える専門特化された UIデザイナーやコピーライターのネットワーク
5. 5. Agenda
6. 6. Agenda • フロントエンド開発の現状 • JavaScript 2015 • CSS 2015 • Build Toolsとか • まとめ
7. 7. Front-end Development
8. 8. JavaScript Frameworks
9. 9. JavaScriptフレームワークの寿命 | POSTD 半年ごとに”今一番ホットな”フレームワークが新たに登場しては、私たちは興奮に沸き返ります http://postd.cc/longevity-or-lack-thereof-in-javascript-frameworks/
10. 10. Angular 1 と Angular 2 の連携 シームレスなアップグレードの方法について http://googledevjp.blogspot.jp/2015/10/angular-1-angular-2.html
11. 11. 次に『何』が来るかなんて
 誰にもわかりません。 あきらめてください！
12. 12. Languages that compiles to Javascript
13. 13. CSS Preprocessors
14. 14. JS Build Tools
15. 15. なんでこんなにあるんや… 安心してください！
 僕もそう思います！
16. 16. 第4章：フロントエンド技術── Web標準を振り返り新技術の潮流に活かす - 石本光司
17. 17. このさき生き残る技術とは？
18. 18. •それは標準技術なのか? •それはシンプルに問題を解決するのか?
19. 19. 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'); 過去を振り返ってみると…
20. 20. シンプル複雑 標準 独自
21. 21. シンプル複雑 標準 独自 DOM Level 2 Core
22. 22. シンプル複雑 標準 独自 DOM Level 2 Core
23. 23. シンプル複雑 標準 独自 DOM Level 2 Core Selectors API Level 1
24. 24. シンプル複雑 標準 独自 DOM Level 2 Core Selectors API Level 1
25. 25. イケてる新しい標準技術 取り込めばいいじゃん！
26. 26. JavaScript 2015
27. 27. Ecma International Technical Committee 39 - ECMAScript https://github.com/tc39
28. 28. ECAMAScript Versions
29. 29. ECAMAScript Versions ES3 1999
30. 30. ECAMAScript Versions ES3 1999 ES4 (Abandoned) 2008
31. 31. ECAMAScript Versions ES3 1999 ES4 (Abandoned) 2008 ES5 2009
32. 32. ECAMAScript Versions ES3 1999 ES4 (Abandoned) 2008 ES5 2009 ES6 2015
33. 33. ECMAScript 6 compatibility table ブラウザ別のES 5/6/7の対応状況を確認可能 https://kangax.github.io/compat-table/es6
34. 34. 使えないじゃん! ＞m＜
35. 35. 安心してください！ バべりますよ！
36. 36. Babel The compiler for writing next generation JavaScript 次世代JavaScriptを今使えるようにするトランスパイラ https://babeljs.io/
37. 37. Babel transpile ES6 to ES5 ES6 ES5 ES3 昔、Babelは6to5という名前だったが、ES7、JSX等も トランスパイルできるため現在の名前に落ち着いた .js .js
38. 38. Languages that compiles to Javascript
39. 39. ES6 You might not need Babel Chrome Extensions v0.12+ .js Future Browsers ??
40. 40. アロー関数 Arrows and Lexical This var add = (x, y) => x + y; オススメ var add = function add(x, y) { return x + y; }; ES6
41. 41. アロー関数 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 オススメ
42. 42. オブジェクトリテラル拡張 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 オススメ
43. 43. ブロックスコープ 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
44. 44. 引数と演算子 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 オススメ
45. 45. 引数と演算子 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 オススメ
46. 46. 引数と演算子 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 オススメ
47. 47. 分割代入 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
48. 48. テンプレート 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 オススメ
49. 49. クラス Classes class Rectangle { constructor(height, width) { this.height = height; this.width = width; } getArea() { return this.calcArea() } calcArea() { return this.height * this.width; } } ES6
50. 50. 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
51. 51. クラス 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; })();
52. 52. プロミス 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
53. 53. You must include the Babel polyfill http://babeljs.io/docs/usage/polyfill/ いくつかの機能を利用するには事前にpolyfillをインストールする必要がある
54. 54. JavaScript Promiseの本 Promiseについて学ぶことを目的とした書籍 http://azu.github.io/promises-book/
55. 55. 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
56. 56. モジュール 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
57. 57. モジュール 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));
58. 58. babelify Browserify transform for Babel https://github.com/babel/babelify
59. 59. Babelで始める!モダンJavaScript開発 https://html5experts.jp/kyo_ago/16979/
60. 60. • 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:
61. 61. ES 2016, 2017… 2016年以降は、年次で小さな変更をこまめにリリース
62. 62. ESLint Pluggable JavaScript linter 自分好みのLint設定が可能 http://eslint.org/
63. 63. • シンプルな文法 • バッドパーツの回避
64. 64. CSS 2015
65. 65. CSSの世界にも
 Babelみたいのないの？
66. 66. 安心してください！ cssnext がありますよ!
67. 67. 嘘！ごめん！ ES6のように固まっていない
68. 68. CSS Levels
69. 69. CSS Levels CSS1 1996
70. 70. CSS Levels CSS1 1996 CSS2 1998
71. 71. CSS Levels CSS1 1996 CSS2 1998 CSS2.1 2011
72. 72. CSS Levels CSS1 1996 CSS3 20xx? CSS2 1998 CSS2.1 2011
73. 73. Taking a Modular Approach CSS2.1以降はモジュール方式のため、モノリシックなCSSとしてのv3は存在しない
74. 74. CSS Snapshot 2015 2015年現在、仕様的に安定しているものをまとめたもの http://momdo.github.io/css-2015/
75. 75. CSS current work 各モジュールの現在のステータスが確認できる http://www.w3.org/Style/CSS/current-work
76. 76. • 勧告（Recommendation: REC） • 勧告案（Proposed Recommendation: PR） • 勧告候補（Candidate Recommendation: CR） • 最終草案（Last Call Working Draft: LCWD） • 草案（Working Draft: WD） • 編集者草案（Editor’s Draft: ED）
77. 77. cssnext Use tomorrow's CSS syntax, today. by MoOx Future Syntaxが使えるPostCSSのプラグインパッケージ http://cssnext.io/
78. 78. PostCSS??
79. 79. PostCSSとcssnextで最新CSS仕様を先取り！ https://html5experts.jp/t32k/17235/
80. 80. PostCSSとは何か by @jimbo https://speakerdeck.com/jmblog/postcss-tohahe-ka
81. 81. PostCSS自体はCSSパーサーで、それによって生成 されるAST(抽象構文木)を扱うAPIを提供するのみ。 それを利用した数多くのプラグインによってCSSス タイル変更等がされる。
82. 82. Sassに頼りすぎてないですか？
83. 83. それcssnextでもできますよ！ （たぶん…だいたい...）
84. 84. cssnext で使える Future Syntax 一覧
85. 85. 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
86. 86. 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
87. 87. 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
88. 88. 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
89. 89. 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
90. 90. 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
91. 91. 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
92. 92. #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
93. 93. 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
94. 94. 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
95. 95. 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
96. 96. 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
97. 97. :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
98. 98. :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
99. 99. :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
100. 100. pseudo-elements a::before { color: red; } /* 変換後のCSS */ a:before { color: red; } REC Spec: Plugin: Selectors Level 3 axa-ch/postcss-pseudoelements
101. 101. 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
102. 102. cssnextで利用するのではなく その中から個別にプラグインを選択
103. 103. stylelint Modern CSS linter. 自分好みのCSS Lint設定が可能 http://stylelint.io/
104. 104. • Sassばかり書いていて標準仕様のこと忘れていた • 仕様が固まっていないので追随コストがかかる • MoOx氏が頑張りすぎなので個人的に心配
105. 105. Build Tools 2015
106. 106. JS Build Tools
107. 107. Grunt/Gulpで憔悴したおっさんの話 npm run-scriptでまとめようぜって話 http://t32k.me/mol/log/npm-run-script/
108. 108. このプロジェクト… Gruntだっけ？ Gulpだっけ？
109. 109. えーいままよ！ grunt build！ いっけー…! > Fatal error: Unable to find local grunt.
110. 110. m9(^Д^)ﾌﾟｷﾞｬｰ
111. 111. npm run-scripts
112. 112. 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": {
113. 113. package.json $ npm run build GulpだろうがGruntだろうが、package.jsonに記述し、 npm runコマンドさえ覚えとけば大丈夫！ ひとつ抽象化することで、Buildツールの流行り廃りに対応
114. 114. kss-node node.js製のKSS（スタイルガイドジェネレーター） https://github.com/kss-node/kss-node
115. 115. grunt-kss by t32k! kss-nodeのGruntプラグイン https://github.com/t32k/grunt-kss
116. 116. 更新止まってる…
117. 117. m9(^Д^)ﾌﾟｷﾞｬｰ
118. 118. すみません すみません すみません
119. 119. gulp-kss kss-nodeのGulpプラグイン https://github.com/philj/gulp-kss
120. 120. 更新止まってる…
121. 121. package.json { "scripts": { "start": "gulp serve", "publish": "kss-node path/to/stylesheets" }
122. 122. プラグインを介さず 直接コマンドを実行
123. 123. まとめ
124. 124. • ツールはプラグイン提供で細分化 • ある程度の選択眼が必要になってくる • 手あたり次第、触るしかない • 時間ない人は最新仕様でトレンドを掴む
125. 125. t32k/maple 今回紹介したBabel/cssnextのサンプルプロジェクト https://github.com/t32k/maple
126. 126. Let’s enjoy Front-end Dev!
127. 127. Work with us! KAIZEN https://www.wantedly.com/companies/kaizenplatform
128. 128. Be a Growth Hacker! https://kaizenplatform.com/ja/about_growth_hacker.html
129. 129. Thanks! http://t32k.me