新しい API

1. Lazy Image Loading
2. prefers-color-scheme
3. inverted-colors
4. scroll-snap-type
5. Array.flat()
6. Intl
7. TS Compiler API
8. PointerEvent
9. Web Share
10. Sign in with Apple

Transcript

1. 
   Frontend de KANPAI! #7 Going on
   Design Engineering Group, Design Strategies Dept, Design Unit
   Nobuhiro Takahashi @ 2019.7.19
   

   View Slide

2. 2
   
   
   
   Frontend de KANPAI! #7 Going on
   Design Engineering Group, Design Strategies Dept, Design Unit
   2019.7.19
   

   View Slide

3. 3
   Frontend de KANPAI! #7 Going on
   Design Engineering Group, Design Strategies Dept, Design Unit
   2019.7.19
   
   

   View Slide

4. 4
   Frontend de KANPAI! #7 Going on A
   Design Engineering Group, Design Strategies Dept, Design Unit
   2019.7.19
   

   View Slide

5. 5
   . 2 oRb iD M .
   Frontend de KANPAI! #7 Going on s
   Design Engineering Group, Design Strategies Dept, Design Unit
   2019.7.19
   TW g P jcnRldDP
   3 oRb iD M 3
   3 N 3 VS RdPf e E O
   IP S R a AP
   

   View Slide

6. 6
   
   Frontend de KANPAI! #7 Going on
   Design Engineering Group, Design Strategies Dept, Design Unit
   2019.7.19
   
   
   
   

   View Slide

7. 7
   Frontend de KANPAI! #7 Going on
   Design Engineering Group, Design Strategies Dept, Design Unit
   2019.7.19
   

   View Slide

8. 8
   Frontend de KANPAI! #7 Going on
   Design Engineering Group, Design Strategies Dept, Design Unit
   2019.7.19
   

   View Slide

9. 9
   
   
   
   2019.7.19
   Frontend de KANPAI! #7 Going on
   Design Engineering Group, Design Strategies Dept, Design Unit
   
   

   View Slide

10. 10
    A
    r
    2 0 1
    a cP M
    v C I T
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    S P p H M
    L P Mi a ti JC
    

    View Slide

11. 11
    !
    Frontend de KANPAI! #7 Going on A
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

12. 12
    1
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

13. 13
    I L
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

14. 14
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

15. 15
    /5 ,
    O
    /5 7
    /5 , ,5 , C
    /5 , , ,
    /5 , ? E :
    Frontend de KANPAI! #7 Going on V
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

16. 16
    /
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    - # -
    

    View Slide

17. 17
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

18. 18
    2
    0 0 0
    Frontend de KANPAI! #7 Going on C
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    6
    

    View Slide

19. 19
    ຊ࣮૷ظ଴!
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

20. 20
    
    
    
    
    2
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

21. 21
    . /
    M S
    - :
    / D C
    D
    Frontend de KANPAI! #7 Going on a
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

22. 22
    
    
    
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

23. 23
    -
    @media (prefers-color-scheme: dark) {
    }
    @media (prefers-color-scheme: light) {
    }
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

24. 24
    
    
    
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

25. 25
    I M
    a U
    M D
    MD
    Frontend de KANPAI! #7 Going on a
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

26. 26
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    ࣫ࠇ쏬썗쏓썢썺썪썛썛쎟쎄 !
    

    View Slide

27. 27
    
    
    3
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

28. 28
    e
    i d
    i c -
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

29. 29
    
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

30. 30
    - -
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    @media (inverted-colors: inverted) {
    /*
    */
    }
    @media (inverted-colors: none) {
    }
    

    View Slide

31. 31
    
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

32. 32
    
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

33. 33
    
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    ݟ쎛썰썬ॏࢹ쏃쎮쏍쏋!
    

    View Slide

34. 34
    4
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

35. 35
    C
    C / I
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

36. 36
    -
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    body { scroll-snap-type: y mandatory; }
    section {
    height: 100vh;
    scroll-snap-align: start;
    }
    

    View Slide

37. 37
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

38. 38
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    -1쎅େ࿮
    썪쎣썾썾썤썸쎚썝ʜʁ!
    

    View Slide

39. 39
    5
    Frontend de KANPAI! #7 Going on ()
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

40. 40
    A ( A A
    A )
    ) . )
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

41. 41
    ) (
    Frontend de KANPAI! #7 Going on A
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    const hoge = [1, [2, [3]]]
    console.log(hoge.flat()) // => [ 1, 2, [ 3 ] ]
    console.log(hoge.flat(Infinity)) // => [ 1, 2, 3 ]
    ( . )
    

    View Slide

42. 42
    (( )
    .
    Frontend de KANPAI! #7 Going on A
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    const waiwai = (x) => [x, x]
    console.log([2, 3, 4].map(waiwai)) // => [ [ 2, 2 ], [ 3, 3 ], [ 4, 4 ] ]
    console.log([2, 3, 4].map(waiwai).flat()) // => [ 2, 2, 3, 3, 4, 4 ] (low speed)
    console.log([2, 3, 4].flatMap(waiwai)) // => [ 2, 2, 3, 3, 4, 4 ] (high speed)
    

    View Slide

43. 43
    Frontend de KANPAI! #7 Going on ()
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    ߏ଄ૢ࡞쎂େ׆༂!
    

    View Slide

44. 44
    
    6
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

45. 45
    8
    1
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

46. 46
    ,
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    ˬ
    ˫
    

    View Slide

47. 47
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    ˬ
    
    const lfConjunction = new Intl.ListFormat('en', {
    type: 'conjunction'
    })
    console.log(lfConjunction.format([
    'A', 'B', 'C'
    ]))
    

    View Slide

48. 48
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    ˫
    
    const lfConjunction = new Intl.ListFormat('en', {
    type: 'disjunction'
    })
    console.log(lfConjunction.format([
    'A', 'B', 'C'
    ]))
    

    View Slide

49. 49
    - ,
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    .
    0 5
    0
    

    View Slide

50. 50
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    const number = 5000000000000000
    const fotmatterJP = new Intl.NumberFormat('ja-JP')
    console.log(fotmatterJP.format(number))
    const fotmatterFR = new Intl.NumberFormat('fr')
    console.log(fotmatterFR.format(number))
    const formatterDE = new Intl.NumberFormat('de')
    console.log(formatterDE.format(number))
    

    View Slide

51. 51
    -
    - -
    :: /
    : . : :
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

52. 52
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    ม쎁 JO쎂쎁썺썽쎁썛썢ཁ஫ҙ!
    

    View Slide

53. 53
    7
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

54. 54
    : / /
    : / S P JI T
    / : / / ar
    H P I g e h lHCL
    / S P I on L cpci m L A
    Frontend de KANPAI! #7 Going on st
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

55. 55
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    import * as ts from 'typescript';
    const printer: ts.Printer = ts.createPrinter();
    const sourceFile: ts.SourceFile =
    ts.createSourceFile(
    'test.ts',
    'const x: number = 42',
    ts.ScriptTarget.ES2015, true, ts.ScriptKind.TS
    );
    console.log(printer.printFile(sourceFile));
    

    View Slide

56. 56
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    SourceFileObject {
    pos: 0,
    end: 23,
    flags: 0,
    modifierFlagsCache: 0,
    transformFlags: 0,
    parent: undefined,
    kind: 285,
    text: 'const x: number = 42',
    bindDiagnostics: [],
    bindSuggestionDiagnostics: undefined,
    languageVersion: 2,
    fileName: 'test.ts',
    languageVariant: 0,
    isDeclarationFile: false,
    scriptKind: 3,
    pragmas: Map {},
    checkJsDirective: undefined,
    referencedFiles: [],
    typeReferenceDirectives: [],
    libReferenceDirectives: [],
    amdDependencies: [],
    hasNoDefaultLib: false,
    statements: [
    NodeObject {
    pos: 0,
    end: 23,
    flags: 0,
    modifierFlagsCache: 536870912,
    transformFlags: 0,
    parent: undefined,
    kind: 220,
    decorators: undefined,
    modifiers: undefined,
    declarationList: [NodeObject]
    },
    pos: 0,
    end: 23
    ],
    endOfFileToken: TokenObject {
    pos: 23,
    end: 23,
    flags: 0,
    modifierFlagsCache: 0,
    transformFlags: 0,
    parent: undefined,
    kind: 1
    },
    externalModuleIndicator: undefined,
    nodeCount: 8,
    identifierCount: 1,
    identifiers: Map { 'x' => 'x' },
    parseDiagnostics: []
    }
    $ ts-node main.ts
    

    View Slide

57. 57
    .A 2 (
    N LMT a
    Frontend de KANPAI! #7 Going on e
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    / / . .
    / - .-
    ) A .A .A 2 #
    @ .A 2 CI D
    Vc MP S @ b
    

    View Slide

58. 58
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    Ըܙ쎂त썢쎡썶썛!
    

    View Slide

59. 59
    -
    8
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    -
    

    View Slide

60. 60
    1/ , ,
    1 3, , 1 ,
    E M
    / / EM
    M
    Frontend de KANPAI! #7 Going on O
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

61. 61
    
    Frontend de KANPAI! #7 Going on
    
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    window.addEventListener("pointerdown", detectInputType, false);
    function detectInputType(event) {
    switch(event.pointerType) {
    case event.POINTER_TYPE_MOUSE: console.log("mouse detected! "); break;
    case event.POINTER_TYPE_PEN: console.log("pen (stylus) detected!"); break;
    case event.POINTER_TYPE_TOUCH: console.log("touch detected!"); break;
    case event.POINTER_TYPE_UNAVAILABLE: console.log("unknown detected!");
    }
    }
    

    View Slide

62. 62
    
    
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    
    

    View Slide

63. 63
    (
    ( M: )
    ( M: / D
    U P ) / D
    OO: TA O M: S
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

64. 64
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    ࡞쎡썶썛쎙쎅썣૿썟썶!
    

    View Slide

65. 65
    9
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

66. 66
    +/ 1 6/
    C N S
    (16 / .6 2. 62
    ) N W a
    SC bA A
    Frontend de KANPAI! #7 Going on d
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

67. 67
    navigator.share(options)
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

68. 68
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

69. 69
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

70. 70
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    ʮ쏁쎱쎬ʯ쎩ද썰쎬쎮쎽쏽쎙
    ඪ४Խ썬쎣쎁썛썢쎁ʜ!
    

    View Slide

71. 71
    10
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

72. 72
    SP
    hn OW T cvEI GK I
    pob i teD FOR
    g i i
    J / / + hlar
    O SP A
    Frontend de KANPAI! #7 Going on w
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

73. 73
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

74. 74
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    AppleID.auth.init({
    clientId: 'com.hogehoge.client', // developer site
    scope: 'name email',
    redirectURI: 'http://localhost:4000/callback'
    })
    AppleID.auth.signIn()
    

    View Slide

75. 75
    S
    )I F M S 2
    ( ( )I A
    D 2 S
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    )I / S
    

    View Slide

76. 76
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

77. 77
    /
    Frontend de KANPAI! #7 Going on T
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    J N S
    A MO
    

    View Slide

78. 78
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    쏅쎷쏯쏴쏐쎭쎂סഋ !
    

    View Slide

79. 16 I 0 6 1 69 A
    C E 8 E8
    A 9 8 E
    E8 EA6C IC
    ( - 6I 6
    79
    S P L -20 !
    Frontend de KANPAI! #7 Going on T
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    ) 0A
    43 . C -20
    2 A A
    5 7 3 6
    3 A A -CC
    

    View Slide

80. 80
    
    
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

81. 81
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

82. 82
    I
    A A A A
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

83. 83
    I P
    A
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

84. 84
    A
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

85. 85
    A
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

86. 86
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

87. 87
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    

    View Slide

88. Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    
    Nobuhiro Takahashi @ 2019.7.19
    

    View Slide

89. 89
    4 /-95 1 /:8
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    3 C A ( ?
    4 1 19 3::371 /:8 5: /410 71 1 19 / 0//. 221 . /
    C 3 3
    4 01 17: 1 - 71 /:8 501: 7- 0/
    IOM D G JN )
    4 01 17: 1 8: 577- : 3 6- 0:/ 1.
    4 : 3
    

    View Slide

90. 90
    N
    ! A P F
    Frontend de KANPAI! #7 Going on
    Design Engineering Group, Design Strategies Dept, Design Unit
    2019.7.19
    F P
    I K O
    

    View Slide

91. Frontend de KANPAI! #7 Going on
    
    Design Engineering Group, Design Strategies Dept, Design Unit
    
    
    Nobuhiro Takahashi @ 2019.7.19
    

    View Slide