2019年までに見直しておきたい
CSS・JavaScriptの手法

 2019年までに見直しておきたい
CSS・JavaScriptの手法

Frontend Conference Fukuoka 2018で発表した資料です。
https://frontend-conf.fukuoka.jp/

各リンク先を確認する場合は、以下のpdfを参照ください
http://tonkotsuboy.github.io/slides/181204_frontend_fukuoka/181208_frontendconffukuoka.pdf

はてなブックマーク
http://b.hatena.ne.jp/entry/s/speakerdeck.com/tonkotsuboy_com/2019nian-madenijian-zhi-siteokitai-cssjavascriptfalseshou-fa

ご意見やご感想はTwitter ( https://twitter.com/tonkotsuboy_com ) までお寄せください。

#fec_fukuoka

Ffb0af5bf5cb5a0b728ed94418a096f5?s=128

tonkotsuboy_com

December 08, 2018
Tweet

Transcript

  1. ICS 30 12 8 @ Frontend Conference Fukuoka 2018 #fec_fukuoka

    2019 
 CSS JavaScript
  2. ( ) @tonkotsuboy_com

  3. ICS MEDIA - Web / https://ics.media/

  4. CSS JavaScript

  5. None
  6. 1. CSS 2. JavaScript 3. 2019 CSS JavaScript

  7. 2019 CSS JavaScript 1. CSS Flexbox CSS Grid CSS 2.

    JavaScript 3.
  8. oat Flexbox CSS Grid

  9. justify-content align-items

  10. ex-grow ex-shrink

  11. CSS Flexbox 3 .container { display: flex; justify-content: center; align-items:

    center; }
  12. justify-content: space-around 
 Flexbox ex-start calc()

  13. Flexbox <div class="container"> <header>header</header> <div class="middle"> <aside>aside</aside> <main>main</main> <nav>nav</nav> </div>

    <footer>footer</footer> </div>
  14. 2019 CSS JavaScript 1. CSS Flexbox CSS Grid CSS 2.

    JavaScript 3.
  15. Flexbox CSS Grid

  16. CSS Grid (row) (column) (row) (column) (column)

  17. None
  18. HTML <table> <tr> <td> <h2>今⽇のうに</h2> <img src="" alt=""> </td> </tr>

    </table> <div class="container"> <header>header</header> <aside>aside</aside> <main>main</main> <nav>nav</nav> <footer>footer</footer> </div>
  19. Edge Chrome Firefox Safari Edge Internet Explorer Safari (iOS )

    Chrome (Android ) 
 71 63 12 18 11 12 71 Grid は
  20. CSS Grid

  21. CSS Grid 1. display: grid 2. grid-template 3. grid-area

  22. HTML <section class="container"> <div class="visual">ʢϝΠϯϏδϡΞϧʣ</div> <div class="number">ʢ਺ࣈʣ</div> <div class="expression">ʢςΩετʣ</div> <div

    class="other">ʢ̏ຕͷࣸਅʣ</div> </section>
  23. 1.

  24. .container { display: grid; } 1.

  25. 2. (row) (column) (row) (column) (column)

  26. 2-1. 40% 1fr 120px 1fr 220px

  27. 2-2. visual visual number expression other other

  28. 2-3. grid-template .container { grid-template: "visual number expression" 1fr "visual

    other other" 220px / 40% 120px 1fr; }
  29. 2-3. grid-template .container { grid-template: "visual number expression" 1fr "visual

    other other" 220px / 40% 120px 1fr; }
  30. 3.

  31. 3-1. grid-area visual visual number other .visual { grid-area: visual;

    }
  32. None
  33. 3-2. .visual { grid-area: visual; } .number { grid-area: number;

    } .expression { grid-area: expression; } .other { grid-area: other; } visual visual number expression other other
  34. None
  35. None
  36. 800px 3 2 4. @media (max-width: 800px) { .container {

    grid-template: "visual visual" 100vw "number expression" 1fr "other other" auto / 120px 1fr } }
  37. None
  38. oat 1 Flexbox Grid

  39. 2019 CSS JavaScript 1. CSS Flexbox CSS Grid CSS 2.

    JavaScript 3.
  40. Microsoft Edge CSS

  41. img <img class="image1" src="cat_1.png" alt=""> <img class="image2" src="cat_2.png" alt=""> <img

    class="image3" src="cat_3.png" alt=""> HTMLίʔυ
  42. object- t 
 2017 10 Edge v16 img object- t

    for Edge (tonkotsuboy.github.io) img { object-fit: cover; } .image1 { object-position: 30% 50%; } .image2 { object-position: 0 0; }
  43. SVG CSS Transform

  44. SVG transform 
 (2018 4 Edge v17 ) SVG CSS

    Transform UI SVG - ICS MEDIA /* SVGͷϋʔτਤܗͷΞχϝʔγϣϯʢൈਮʣ */ @keyframes heartAnime { 0% { transform: scale(0); } 60% { transform: scale(1.2, 1.2); } 80% { transform: scale(0.95, 1.05) translate(0%, -3%); } 100% { transform: scale(1.0, 1.0) translate(0%, 0%); } }
  45. None
  46. mask 
 2018 10 Edge v18 .mask { mask-image: url("../images/mymask.png");

    mask-repeat: no-repeat; mask-position: center; mask-size: contain; } # -Codepen
  47. CSS Can I use CSS ରԠࡁ ະରԠ Ұ෦ରԠ

  48. CSS Edge Chromium Windows Experience Blog 2018 12

  49. Microsoft Edge Chromium 
 - Togetter

  50. 2019 CSS JavaScript 1. CSS Flexbox CSS Grid CSS 2.

    JavaScript 3.
  51. CSS

  52. Chromium Blog Chrome Releases WebKit The Mozilla Blog Microsoft Edge

    Blog
  53. Can I use Compare browsers Can I use...

  54. 1. CSS 2. JavaScript 3. 2019 CSS JavaScript

  55. ES2015 3 ES2015 = ECMAScript2015
 ECMAScript = JavaScript

  56. let const String Number Array Object API Map Set Promise

    for of ES2015
  57. ES2015 JavaScript ES2015 2015 6 ES2016 2016 6 ES2017 2017

    6 ES2018 2018 6 http://www.ecma-international.org/ecma-262/
  58. 2019 CSS JavaScript 1. CSS 2. JavaScript 1. ES2016 ES2018

    2. 2019 3.
  59. Promise ES2016 ES2018

  60. " " const targetArray = ["ླ໦", "ాத", "ߴڮ"];

  61. indexOf() 0 if (targetArray.indexOf("ాத") >= 0) { console.log("ాதؚ͕·Ε͍ͯ·͢"); } else

    { console.log("ాத͸ଘࡏ͠·ͤΜ"); }
  62. includes() 
 2016 6 ES2016 // ాத͕ଘࡏ͢Δ͔Ͳ͏͔ if (targetArray.includes("ాத")) {

    console.log("ాதؚ͕·Ε͍ͯ·͢"); } else { console.log("ాத͸ଘࡏ͠·ͤΜ"); }
  63. Promise ES2016 ES2018

  64. 
 : 00, 01, 02, ..., 12, 13 JS const

    second = new Date().getSeconds();
  65. 10 "0" let paddedSecond = String(second); // 10ඵະຬͳΒɺ๯಄ʹ0Λ෇༩͢Δ if (second

    < 10) { paddedSecond = "0" + paddedSecond; }
  66. padStart() 
 (2017 10 ES2017 ) const paddedSecond = String(second).padStart(2,

    "0");
  67. Promise ES2016 ES2018

  68. JSON Promise

  69. then() Promise fetch("./myjson.json") .then(response => { return response.json() }) .then(

    json => { const myText = json.myText; console.log(myText); }, error => { console.error(`error : ${error}`) } );
  70. async/await 
 2017 6 ES2017 Promise async/await async function main()

    { try { const json = await (await fetch("./myjson.json")).json(); console.log(Reflect.get(json, "mytext")); } catch (error) { console.log(`error : ${error}`); } } main();
  71. Promise ES2016 ES2018

  72. const myObject = { result: true, members: [ { id:

    1, name: "ླ໦" }, { id: 2, name: "ాத" }, { id: 3, name: "ߴڮ" } ] };
  73. Object.assign() 
 (ES2015) const copiedObject = Object.assign({}, myObject);

  74. 
 2018 6 ES2018 const copiedObject = {...myObject};

  75. 2019 JavaScript

  76. 2019 CSS JavaScript 1. CSS 2. JavaScript 1. ES2016 ES2018

    2. 2019 3.
  77. null import 2019 JavaScript

  78. " " user address null null const data = {

    user: { address: { area: "෱Ԭݝ" } } };
  79. null let areaName; if (data.user && data.user.address) { areaName =

    data.user.address.area; } // ·ͨ͸ let areaName2 = data.user && data.user.address && data.user.address.area;
  80. Optional Chaining(? ) null const areaName = data.user?.address?.area; tc39/proposal-optional-chaining

  81. null import 2019 JavaScript

  82. 10% " " : 100 110 function myFunction1(price) { return

    Math.floor(price * 1.1); } function myFunction2(price) { return `${price}ԁ`; }
  83. 
 let result = myFunction1(100); result = myFunction2(result); // ·ͨ͸

    const result2 = myFunction2(myFunction1(100));
  84. Pipeline Operator |> const result = 100 |> myFunction1 |>

    myFunction2; tc39/proposal-pipeline-operator
  85. null import 2019 JavaScript

  86. SPA JS 1 module1.js import (main.js) 1 (module1.js) 2 (module2.js)

    3 (module3.js)
  87. import export class Module1 { myMethod() { alert("Ϟδϡʔϧ1ͷϝιου"); } }

    module1.js
  88. import() import function onPage1Loaded() { import('./module1.js'); } ※ onPage1Loaded()͸ϖʔδ1͕ಡΈࠐ·Εͨͱ͖
 ࣮ߦ͞ΕΔ૝ఆͷՍۭͷίʔυ

  89. Promise import async function onPage1Loaded() { const { Module1 }

    = await import('./module1.js'); const module = new Module1(); module.myMethod(); } Chrome Safari JavaScript dynamic import - Qiita
  90. None
  91. JS BigInt 2**53 3 at(), atMap() 3 , 3 Numeric

    separators 123_456 2 tc39/proposals: Tracking ECMAScript Proposals
  92. Optional Chaining Pipeline Operator Babel 7 
 (2018 8 )

    TypeScript AltJS Babel 7 Released
  93. JavaScript

  94. GitHub tc39/proposals GitHub - tc39/proposals

  95. ECMAScript 6 compatibility table ECMAScript 6 compatibility table

  96. Chromium Blog Chrome Releases WebKit The Mozilla Blog Microsoft Edge

    Blog
  97. 1. CSS 2. JavaScript 3. 2019 CSS JavaScript

  98. 2019 CSS JavaScript 1. CSS 2. JavaScript 3. 1. Autopre

    xer 2. Prettier 3. Yarn 4.
  99. IE 11 CSS Grid 


  100. IE 11 IE Windows 10 / IE 11 / 2025

    10 Windows 8.1 / IE 11 / 2023 1 Windows 7 / IE 11 / 2020 1 
 2018 IE 11 statcounter 9% 3%
  101. Autopre xer .container { display: -ms-grid; display: grid; -ms-grid-rows: 1fr

    220px; -ms-grid-columns: 40% 120px 1fr; grid-template: "visual number expression" 1fr "visual other other" 220px / 40% 120px 1fr; } .visual { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 1; grid-area: visual; } .number { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: number; } .expression { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: expression; } .other { -ms-grid-row: 2; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-area: other; } .container { display: grid; grid-template: "visual number expression" 1fr "visual other other" 220px / 40% 120px 1fr; } .visual { grid-area: visual; } .number { grid-area: number; } .expression { grid-area: expression; } .other { grid-area: other; }
  102. gap 2017 -2018 Autopre xer

  103. IE 11 
 CSS Grid .main-visual { grid-row-start: 1; grid-row-end:

    3; grid-column-start: 1; grid-column-end: 2; -ms-grid-row-span: 2; } .container { grid-template-rows: 1fr 220px; grid-template-columns: 40% 120px 1fr; }
  104. Autopre xer IE 11 before .container { display: grid; grid-template:

    "visual number expression" 1fr "visual other other" 220px / 40% 120px 1fr; } .visual { grid-area: visual; }
  105. .container { display: -ms-grid; display: grid; -ms-grid-rows: 1fr 220px; -ms-grid-columns:

    40% 120px 1fr; grid-template: "visual number expression" 1fr "visual other other" 220px / 40% 120px 1fr; } .visual { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 1; grid-area: visual; } Autopre xer IE 11 after
  106. gap 2017 -2018 Autopre xer

  107. IE 11 gap grid-gap 
 margin padding CSS Grid .number,

    .expression, .other { padding: 10px; }
  108. Autopre xer gap IE 11 before .container { display: grid;

    grid-template: "visual number expression" 1fr "visual other other" 220px / 40% 120px 1fr; } .visual { grid-area: visual; }
  109. .container { /* தུ */ gap: 10px; -ms-grid-rows: 1fr 10px

    220px; -ms-grid-columns: 40% 10px 120px 10px 1fr; grid-template: "visual number expression" 1fr "visual other other" 220px / 40% 120px 1fr; } .visual { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; grid-area: visual; } Autopre xer gap IE 11 after
  110. gap 2017 -2018 Autopre xer

  111. IE 11 IE 11 CSS Grid 1 2 3 4

    5 6 7 8 9 1 2 3 4 5 6 7 8 9 IE 11 ※ ΞΠςϜ͸શͯಉ͡ҐஔʹॏͳΔ
 ࢹ֮తʹΘ͔Γ΍͘͢͢ΔͨΊʹͣΒͯ͠දࣔͨ͠
  112. Autopre xer IE 11 before /* autoprefixer grid: autoplace */

    .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-gap: 20px; }
  113. Autopre xer IE 11 after /* autoprefixer grid: autoplace */

    .container { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 20px 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: auto 20px auto; grid-template-rows: auto auto; grid-gap: 20px; } .container > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .container > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } /* লུ */ ※ ࣗಈม׵ͱrepeat()ͷ૊Έ߹Θͤʹ͸ະରԠ
 ͳ͓ɺrepeat()ࣗମͷม׵ʹ͸ରԠࡁ
  114. 2019 CSS JavaScript 1. CSS 2. JavaScript 3. 1. Autopre

    xer 2. Prettier 3. Yarn 4.
  115. Prettier

  116. Prettier Prettier · Opinionated Code Formatter

  117. Prettier Prettier · Opinionated Code Formatter

  118. Lint Prettier Lint Google JavaScript Style Guide JavaScript Standard Style

    Airbnb Prettier JavaScript
  119. Prettier v1.5 HTML Angular, Vue 
 Prettier HTML { "htmlWhitespaceSensitivity":

    "strict" } .prettierrc
  120. 2019 CSS JavaScript 1. CSS 2. JavaScript 3. 1. Autopre

    xer 2. Prettier 3. Yarn 4.
  121. Yarn

  122. npm npm Facebook Yarn npm Yarn 4 - ICS MEDIA

  123. webpack Yarn npm 8.2 Yarn 3.5 npm v6.4.1ɺYarn v1.10.1Ͱݕূ

  124. node_modules 
 node_modules

  125. Yarn Yarn

  126. project/package.json { "private": true, "workspaces": ["workspace-a", "workspace-b"] }

  127. project/workspace-a/package.json { "name": "workspace-a", "dependencies": { "express": "^4.16.4", "node-sass": "^4.10.0",

    "typescript": "^3.2.2" } } { "name": "workspace-b", "dependencies": { "node-sass": "^4.10.0", "typescript": "^3.2.2" } } project/workspace-b/package.json
  128. yarn install

  129. 2019 CSS JavaScript 1. CSS 2. JavaScript 3. 1. Autopre

    xer 2. Prettier 3. Yarn 4.
  130. None
  131. React: Create React App vue: Vue CLI Angular: Angular CLI

    CLI
  132. webpack CLI webpack CLI

  133. Sass Babel TypeScript Alt TreeShaking 
 2018 1 v1.9 Babel

    7 TypeScript 3 
 2018 9 v1.10 Parcel Parcel TypeScript - Qiita
  134. None
  135. CSS JavaScript 
 
 


  136. Copyright 2018 ICS INC. All rights reserved. @tonkotsuboy_com ICS MEDIA

    Twitter ics.media