JavaScript/CSS 2015 Autumn

14,686 views

Published on

まるでドッグ・イヤーのごとく変化するフロントエンド開発に疲れていませんか?本セッションでは、BabelやPostCSSの導入の仕方や使い方を解説することによって、次世代の標準仕様であるEcmaScript 6やCSS 3を先取りし、長く使える技術を身につけます。流れの速さに惑わされないようにしましょう。

Koji Ishimoto @IWATE HTML5 COMMUNITY #3 on October 14
https://www.facebook.com/events/674956182641567/

Published in: Design
0 Comments
88 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,686
On SlideShare
0
From Embeds
0
Number of Embeds
1,516
Actions
Shares
0
Downloads
70
Comments
0
Likes
88
Embeds 0
No embeds

No notes for slide

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

×