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
   

   View Slide

2. ( )
   @tonkotsuboy_com
   

   View Slide

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

   View Slide

4. CSS JavaScript
   

   View Slide

5. View Slide

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

   View Slide

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

   View Slide

8. oat
   Flexbox CSS Grid
   

   View Slide

9. justify-content
   align-items
   

   View Slide

10. ex-grow
    ex-shrink
    

    View Slide

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

    View Slide

12. justify-content: space-around 

    Flexbox
    ex-start calc()
    

    View Slide

13. Flexbox
    
    header
    
    aside
    main
    nav
    
    footer
    
    

    View Slide

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

    View Slide

15. Flexbox
    CSS Grid
    

    View Slide

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

    View Slide

17. View Slide

18. HTML
    
    
    
    今⽇のうに
    
    
    
    
    
    header
    aside
    main
    nav
    footer
    
    

    View Slide

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

    71 63 12 18 11 12 71
    Grid
    は
    

    View Slide

20. CSS Grid
    

    View Slide

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

    View Slide

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

    View Slide

23. 1.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. 3.
    

    View Slide

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

    View Slide

32. View Slide

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
    

    View Slide

34. View Slide

35. View Slide

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

    View Slide

37. View Slide

38. oat
    1 Flexbox
    Grid
    

    View Slide

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

    View Slide

40. Microsoft Edge
    CSS
    

    View Slide

41. img
    
    
    
    HTMLίʔυ
    

    View Slide

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

    View Slide

43. SVG CSS Transform
    

    View Slide

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

    View Slide

45. View Slide

46. mask 

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

    View Slide

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

    View Slide

48. CSS
    Edge Chromium
    Windows Experience Blog 2018 12
    

    View Slide

49. Microsoft Edge Chromium 

    - Togetter
    

    View Slide

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

    View Slide

51. CSS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. ES2015 3
    ES2015 = ECMAScript2015

    ECMAScript = JavaScript
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

59. Promise
    ES2016 ES2018
    

    View Slide

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

    View Slide

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

    View Slide

62. includes() 

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

    View Slide

63. Promise
    ES2016 ES2018
    

    View Slide

64. 

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

    View Slide

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

    View Slide

66. padStart() 

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

    View Slide

67. Promise
    ES2016 ES2018
    

    View Slide

68. JSON
    Promise
    

    View Slide

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}`)
    }
    );
    

    View Slide

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

    View Slide

71. Promise
    ES2016 ES2018
    

    View Slide

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

    View Slide

73. Object.assign() 

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

    View Slide

74. 

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

    View Slide

75. 2019
    JavaScript
    

    View Slide

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

    View Slide

77. null
    import
    2019 JavaScript
    

    View Slide

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

    View Slide

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;
    

    View Slide

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

    View Slide

81. null
    import
    2019 JavaScript
    

    View Slide

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

    View Slide

83. 

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

    View Slide

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

    View Slide

85. null
    import
    2019 JavaScript
    

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

90. View Slide

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

    View Slide

92. Optional Chaining Pipeline Operator Babel 7 

    (2018 8 )
    TypeScript
    AltJS
    Babel 7 Released
    

    View Slide

93. JavaScript
    

    View Slide

94. GitHub tc39/proposals
    GitHub - tc39/proposals
    

    View Slide

95. ECMAScript 6 compatibility table
    ECMAScript 6 compatibility table
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

99. IE 11 CSS Grid 

    

    View Slide

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%
     

     View Slide

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

     View Slide

102. gap
     2017 -2018 Autopre xer
     

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

106. gap
     2017 -2018 Autopre xer
     

     View Slide

107. IE 11 gap grid-gap 

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

     View Slide

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

     View Slide

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
     

     View Slide

110. gap
     2017 -2018 Autopre xer
     

     View Slide

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

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

115. Prettier
     

     View Slide

116. Prettier
     Prettier · Opinionated Code Formatter
     

     View Slide

117. Prettier
     Prettier · Opinionated Code Formatter
     

     View Slide

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

     View Slide

119. Prettier v1.5 HTML
     Angular, Vue
     

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

     View Slide

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

     View Slide

121. Yarn
     

     View Slide

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

     View Slide

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

     View Slide

124. node_modules 

     node_modules
     

     View Slide

125. Yarn Yarn
     

     View Slide

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

     View Slide

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
     

     View Slide

128. yarn install
     

     View Slide

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

     View Slide

130. View Slide

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

     View Slide

132. webpack
     CLI webpack
     CLI
     

     View Slide

133. Sass Babel TypeScript Alt
     TreeShaking 

     2018 1 v1.9
     Babel 7 TypeScript 3 

     2018 9 v1.10
     Parcel
     Parcel TypeScript - Qiita
     

     View Slide

134. View Slide

135. CSS JavaScript 

     

     

     

     View Slide

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

     View Slide