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

新しい API

feb19
July 19, 2019

新しい 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

feb19

July 19, 2019
Tweet

More Decks by feb19

Other Decks in Technology

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