Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

tonkotsuboy_com

December 08, 2018
Tweet

More Decks by tonkotsuboy_com

Other Decks in Programming

Transcript

  1. 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>
  2. Edge Chrome Firefox Safari Edge Internet Explorer Safari (iOS )

    Chrome (Android ) 
 71 63 12 18 11 12 71 Grid は
  3. 1.

  4. 3.

  5. 3-2. .visual { grid-area: visual; } .number { grid-area: number;

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

    grid-template: "visual visual" 100vw "number expression" 1fr "other other" auto / 120px 1fr } }
  7. 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; }
  8. 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%); } }
  9. mask 
 2018 10 Edge v18 .mask { mask-image: url("../images/mymask.png");

    mask-repeat: no-repeat; mask-position: center; mask-size: contain; } # -Codepen
  10. CSS

  11. ES2015 JavaScript ES2015 2015 6 ES2016 2016 6 ES2017 2017

    6 ES2018 2018 6 http://www.ecma-international.org/ecma-262/
  12. includes() 
 2016 6 ES2016 // ాத͕ଘࡏ͢Δ͔Ͳ͏͔ if (targetArray.includes("ాத")) {

    console.log("ాதؚ͕·Ε͍ͯ·͢"); } else { console.log("ాத͸ଘࡏ͠·ͤΜ"); }
  13. 
 : 00, 01, 02, ..., 12, 13 JS const

    second = new Date().getSeconds();
  14. then() Promise fetch("./myjson.json") .then(response => { return response.json() }) .then(

    json => { const myText = json.myText; console.log(myText); }, error => { console.error(`error : ${error}`) } );
  15. 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();
  16. const myObject = { result: true, members: [ { id:

    1, name: "ླ໦" }, { id: 2, name: "ాத" }, { id: 3, name: "ߴڮ" } ] };
  17. " " user address null null const data = {

    user: { address: { area: "෱Ԭݝ" } } };
  18. 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;
  19. 10% " " : 100 110 function myFunction1(price) { return

    Math.floor(price * 1.1); } function myFunction2(price) { return `${price}ԁ`; }
  20. Pipeline Operator |> const result = 100 |> myFunction1 |>

    myFunction2; tc39/proposal-pipeline-operator
  21. Promise import async function onPage1Loaded() { const { Module1 }

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

    separators 123_456 2 tc39/proposals: Tracking ECMAScript Proposals
  23. 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%
  24. 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; }
  25. 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; }
  26. 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; }
  27. .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
  28. IE 11 gap grid-gap 
 margin padding CSS Grid .number,

    .expression, .other { padding: 10px; }
  29. 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; }
  30. .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
  31. 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 ※ ΞΠςϜ͸શͯಉ͡ҐஔʹॏͳΔ
 ࢹ֮తʹΘ͔Γ΍͘͢͢ΔͨΊʹͣΒͯ͠දࣔͨ͠
  32. Autopre xer IE 11 before /* autoprefixer grid: autoplace */

    .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-gap: 20px; }
  33. 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()ࣗମͷม׵ʹ͸ରԠࡁ
  34. 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
  35. Sass Babel TypeScript Alt TreeShaking 
 2018 1 v1.9 Babel

    7 TypeScript 3 
 2018 9 v1.10 Parcel Parcel TypeScript - Qiita