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

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
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)
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; }
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
36. 800px 3 2 4. @media (max-width: 800px) { .container { grid-template: "visual visual" 100vw "number expression" 1fr "other other" auto / 120px 1fr } }
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%); } }
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
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.
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
135. CSS JavaScript 
 
 

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