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. ICS
    30 12 8 @ Frontend Conference Fukuoka 2018
    #fec_fukuoka
    2019 

    CSS JavaScript

    View full-size slide

  2. ( )
    @tonkotsuboy_com

    View full-size slide

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

    View full-size slide

  4. CSS JavaScript

    View full-size slide

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

    View full-size slide

  6. 2019 CSS JavaScript
    1. CSS
    Flexbox
    CSS Grid
    CSS
    2. JavaScript
    3.

    View full-size slide

  7. oat
    Flexbox CSS Grid

    View full-size slide

  8. justify-content
    align-items

    View full-size slide

  9. ex-grow
    ex-shrink

    View full-size slide

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

    View full-size slide

  11. justify-content: space-around 

    Flexbox
    ex-start calc()

    View full-size slide

  12. Flexbox

    header

    aside
    main
    nav

    footer

    View full-size slide

  13. 2019 CSS JavaScript
    1. CSS
    Flexbox
    CSS Grid
    CSS
    2. JavaScript
    3.

    View full-size slide

  14. Flexbox
    CSS Grid

    View full-size slide

  15. CSS Grid
    (row)
    (column)
    (row)
    (column) (column)

    View full-size slide

  16. HTML



    今⽇のうに





    header
    aside
    main
    nav
    footer

    View full-size slide

  17. Edge
    Chrome Firefox Safari Edge
    Internet
    Explorer
    Safari
    (iOS )
    Chrome
    (Android )

    71 63 12 18 11 12 71
    Grid

    View full-size slide

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

    View full-size slide

  19. HTML

    ʢϝΠϯϏδϡΞϧʣ
    ʢ਺ࣈʣ
    ʢςΩετʣ
    ʢ̏ຕͷࣸਅʣ

    View full-size slide

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

    View full-size slide

  21. 2.
    (row)
    (column)
    (row)
    (column) (column)

    View full-size slide

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

    View full-size slide

  23. 2-2.
    visual
    visual
    number expression
    other other

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 3-2.
    .visual {
    grid-area: visual;
    }
    .number {
    grid-area: number;
    }
    .expression {
    grid-area: expression;
    }
    .other {
    grid-area: other;
    }
    visual
    visual
    number expression
    other other

    View full-size slide

  28. 800px 3 2
    4.
    @media (max-width: 800px) {
    .container {
    grid-template:
    "visual visual" 100vw
    "number expression" 1fr
    "other other" auto /
    120px 1fr
    }
    }

    View full-size slide

  29. oat
    1 Flexbox
    Grid

    View full-size slide

  30. 2019 CSS JavaScript
    1. CSS
    Flexbox
    CSS Grid
    CSS
    2. JavaScript
    3.

    View full-size slide

  31. Microsoft Edge
    CSS

    View full-size slide

  32. img



    HTMLίʔυ

    View full-size slide

  33. 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;
    }

    View full-size slide

  34. SVG CSS Transform

    View full-size slide

  35. 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%);
    }
    }

    View full-size slide

  36. mask 

    2018 10 Edge v18
    .mask {
    mask-image: url("../images/mymask.png");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    }
    # -Codepen

    View full-size slide

  37. CSS
    Can I use CSS
    ରԠࡁ
    ະରԠ
    Ұ෦ରԠ

    View full-size slide

  38. CSS
    Edge Chromium
    Windows Experience Blog 2018 12

    View full-size slide

  39. Microsoft Edge Chromium 

    - Togetter

    View full-size slide

  40. 2019 CSS JavaScript
    1. CSS
    Flexbox
    CSS Grid
    CSS
    2. JavaScript
    3.

    View full-size slide

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

    View full-size slide

  42. Can I use Compare browsers
    Can I use...

    View full-size slide

  43. 1. CSS
    2. JavaScript
    3.
    2019 CSS JavaScript

    View full-size slide

  44. ES2015 3
    ES2015 = ECMAScript2015

    ECMAScript = JavaScript

    View full-size slide

  45. let const
    String Number Array
    Object API
    Map Set
    Promise
    for of
    ES2015

    View full-size slide

  46. ES2015 JavaScript
    ES2015 2015 6
    ES2016 2016 6
    ES2017 2017 6
    ES2018 2018 6
    http://www.ecma-international.org/ecma-262/

    View full-size slide

  47. 2019 CSS JavaScript
    1. CSS
    2. JavaScript
    1. ES2016 ES2018
    2. 2019
    3.

    View full-size slide

  48. Promise
    ES2016 ES2018

    View full-size slide

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

    View full-size slide

  50. indexOf() 0
    if (targetArray.indexOf("ాத") >= 0) {
    console.log("ాதؚ͕·Ε͍ͯ·͢");
    } else {
    console.log("ాத͸ଘࡏ͠·ͤΜ");
    }

    View full-size slide

  51. includes() 

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

    View full-size slide

  52. Promise
    ES2016 ES2018

    View full-size slide


  53. : 00, 01, 02, ..., 12, 13
    JS
    const second = new Date().getSeconds();

    View full-size slide

  54. 10 "0"
    let paddedSecond = String(second);
    // 10ඵະຬͳΒɺ๯಄ʹ0Λ෇༩͢Δ
    if (second < 10) {
    paddedSecond = "0" + paddedSecond;
    }

    View full-size slide

  55. padStart() 

    (2017 10 ES2017 )
    const paddedSecond = String(second).padStart(2, "0");

    View full-size slide

  56. Promise
    ES2016 ES2018

    View full-size slide

  57. then()
    Promise
    fetch("./myjson.json")
    .then(response => {
    return response.json()
    })
    .then(
    json => {
    const myText = json.myText;
    console.log(myText);
    },
    error => {
    console.error(`error : ${error}`)
    }
    );

    View full-size slide

  58. 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();

    View full-size slide

  59. Promise
    ES2016 ES2018

    View full-size slide

  60. const myObject = {
    result: true,
    members: [
    { id: 1, name: "ླ໦" },
    { id: 2, name: "ాத" },
    { id: 3, name: "ߴڮ" }
    ]
    };

    View full-size slide

  61. Object.assign() 

    (ES2015)
    const copiedObject = Object.assign({}, myObject);

    View full-size slide


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

    View full-size slide

  63. 2019
    JavaScript

    View full-size slide

  64. 2019 CSS JavaScript
    1. CSS
    2. JavaScript
    1. ES2016 ES2018
    2. 2019
    3.

    View full-size slide

  65. null
    import
    2019 JavaScript

    View full-size slide

  66. " "
    user address null
    null
    const data = {
    user: {
    address: {
    area: "෱Ԭݝ"
    }
    }
    };

    View full-size slide

  67. 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;

    View full-size slide

  68. Optional Chaining(? )
    null
    const areaName = data.user?.address?.area;
    tc39/proposal-optional-chaining

    View full-size slide

  69. null
    import
    2019 JavaScript

    View full-size slide

  70. 10% " "
    : 100 110
    function myFunction1(price) {
    return Math.floor(price * 1.1);
    }
    function myFunction2(price) {
    return `${price}ԁ`;
    }

    View full-size slide


  71. let result = myFunction1(100);
    result = myFunction2(result);
    // ·ͨ͸
    const result2 =
    myFunction2(myFunction1(100));

    View full-size slide

  72. Pipeline Operator |>
    const result =
    100
    |> myFunction1
    |> myFunction2;
    tc39/proposal-pipeline-operator

    View full-size slide

  73. null
    import
    2019 JavaScript

    View full-size slide

  74. SPA JS
    1 module1.js
    import
    (main.js)
    1 (module1.js)
    2 (module2.js)
    3 (module3.js)

    View full-size slide

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

    View full-size slide

  76. import()
    import
    function onPage1Loaded() {
    import('./module1.js');
    }
    ※ onPage1Loaded()͸ϖʔδ1͕ಡΈࠐ·Εͨͱ͖

    ࣮ߦ͞ΕΔ૝ఆͷՍۭͷίʔυ

    View full-size slide

  77. Promise
    import
    async function onPage1Loaded() {
    const { Module1 } = await import('./module1.js');
    const module = new Module1();
    module.myMethod();
    }
    Chrome Safari JavaScript dynamic import - Qiita

    View full-size slide

  78. JS
    BigInt 2**53 3
    at(), atMap() 3
    ,
    3
    Numeric separators
    123_456
    2
    tc39/proposals: Tracking ECMAScript Proposals

    View full-size slide

  79. Optional Chaining Pipeline Operator Babel 7 

    (2018 8 )
    TypeScript
    AltJS
    Babel 7 Released

    View full-size slide

  80. GitHub tc39/proposals
    GitHub - tc39/proposals

    View full-size slide

  81. ECMAScript 6 compatibility table
    ECMAScript 6 compatibility table

    View full-size slide

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

    View full-size slide

  83. 1. CSS
    2. JavaScript
    3.
    2019 CSS JavaScript

    View full-size slide

  84. 2019 CSS JavaScript
    1. CSS
    2. JavaScript
    3.
    1. Autopre xer
    2. Prettier
    3. Yarn
    4.

    View full-size slide

  85. IE 11 CSS Grid 


    View full-size slide

  86. 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%

    View full-size slide

  87. 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;
    }

    View full-size slide

  88. gap
    2017 -2018 Autopre xer

    View full-size slide

  89. 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;
    }

    View full-size slide

  90. 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;
    }

    View full-size slide

  91. .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

    View full-size slide

  92. gap
    2017 -2018 Autopre xer

    View full-size slide

  93. IE 11 gap grid-gap 

    margin padding
    CSS Grid
    .number,
    .expression,
    .other {
    padding: 10px;
    }

    View full-size slide

  94. 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;
    }

    View full-size slide

  95. .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

    View full-size slide

  96. gap
    2017 -2018 Autopre xer

    View full-size slide

  97. 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
    ※ ΞΠςϜ͸શͯಉ͡ҐஔʹॏͳΔ

    ࢹ֮తʹΘ͔Γ΍͘͢͢ΔͨΊʹͣΒͯ͠දࣔͨ͠

    View full-size slide

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

    View full-size slide

  99. 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()ࣗମͷม׵ʹ͸ରԠࡁ

    View full-size slide

  100. 2019 CSS JavaScript
    1. CSS
    2. JavaScript
    3.
    1. Autopre xer
    2. Prettier
    3. Yarn
    4.

    View full-size slide

  101. Prettier
    Prettier · Opinionated Code Formatter

    View full-size slide

  102. Prettier
    Prettier · Opinionated Code Formatter

    View full-size slide

  103. Lint Prettier
    Lint
    Google JavaScript Style Guide
    JavaScript Standard Style
    Airbnb
    Prettier JavaScript

    View full-size slide

  104. Prettier v1.5 HTML
    Angular, Vue

    Prettier HTML
    {
    "htmlWhitespaceSensitivity": "strict"
    }
    .prettierrc

    View full-size slide

  105. 2019 CSS JavaScript
    1. CSS
    2. JavaScript
    3.
    1. Autopre xer
    2. Prettier
    3. Yarn
    4.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  108. node_modules 

    node_modules

    View full-size slide

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

    View full-size slide

  110. 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

    View full-size slide

  111. yarn install

    View full-size slide

  112. 2019 CSS JavaScript
    1. CSS
    2. JavaScript
    3.
    1. Autopre xer
    2. Prettier
    3. Yarn
    4.

    View full-size slide

  113. React: Create React App
    vue: Vue CLI
    Angular: Angular CLI
    CLI

    View full-size slide

  114. webpack
    CLI webpack
    CLI

    View full-size slide

  115. Sass Babel TypeScript Alt
    TreeShaking 

    2018 1 v1.9
    Babel 7 TypeScript 3 

    2018 9 v1.10
    Parcel
    Parcel TypeScript - Qiita

    View full-size slide

  116. CSS JavaScript 



    View full-size slide

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

    View full-size slide