新しい API

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

F7e037740c16b5f67925bf11c080ed85?s=128

feb19

July 19, 2019
Tweet

Transcript

  1. 1.

      Frontend de KANPAI! #7 Going on  Design

    Engineering Group, Design Strategies Dept, Design Unit Nobuhiro Takahashi @ 2019.7.19
  2. 2.

    2      Frontend de KANPAI! #7

    Going on  Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  3. 3.

    3 Frontend de KANPAI! #7 Going on  Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19  
  4. 4.

    4 Frontend de KANPAI! #7 Going on A Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19
  5. 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
  6. 6.

    6  Frontend de KANPAI! #7 Going on  Design

    Engineering Group, Design Strategies Dept, Design Unit 2019.7.19        
  7. 7.

    7 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  8. 8.

    8 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  9. 9.

    9     2019.7.19 Frontend de KANPAI! #7

    Going on  Design Engineering Group, Design Strategies Dept, Design Unit  
  10. 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
  11. 11.

    11 ! Frontend de KANPAI! #7 Going on A Design

    Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  12. 12.

    12 1 Frontend de KANPAI! #7 Going on Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19
  13. 13.

    13 I L Frontend de KANPAI! #7 Going on Design

    Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  14. 14.

    14 <img loading="lazy" src="hoge.jpg"> Frontend de KANPAI! #7 Going on

    Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  15. 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
  16. 16.

    16 / Frontend de KANPAI! #7 Going on Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19 - # -
  17. 17.

    17 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  18. 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
  19. 19.

    19 ຊ࣮૷ظ଴! Frontend de KANPAI! #7 Going on Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19
  20. 20.

    20     2 Frontend de KANPAI! #7

    Going on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  21. 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
  22. 22.

    22     Frontend de KANPAI! #7 Going

    on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  23. 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
  24. 24.

    24     Frontend de KANPAI! #7 Going

    on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  25. 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
  26. 26.

    26 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19 ࣫ࠇ쏬썗쏓썢썺썪썛썛쎟쎄 !
  27. 27.

    27    3 Frontend de KANPAI! #7 Going

    on  Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  28. 28.

    28 e i d i c - Frontend de KANPAI!

    #7 Going on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  29. 29.

    29    Frontend de KANPAI! #7 Going on

     Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  30. 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) { }
  31. 31.

    31    Frontend de KANPAI! #7 Going on

     Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  32. 32.

    32    Frontend de KANPAI! #7 Going on

     Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  33. 33.

    33    Frontend de KANPAI! #7 Going on

     Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19 ݟ쎛썰썬ॏࢹ쏃쎮쏍쏋!
  34. 34.

    34 4 Frontend de KANPAI! #7 Going on Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19
  35. 35.

    35 C C / I Frontend de KANPAI! #7 Going

    on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  36. 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; }
  37. 37.

    37 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  38. 38.

    38 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19 -1쎅େ࿮ 썪쎣썾썾썤썸쎚썝ʜʁ!
  39. 39.

    39 5 Frontend de KANPAI! #7 Going on () Design

    Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  40. 40.

    40 A ( A A A ) ) . )

    Frontend de KANPAI! #7 Going on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  41. 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 ] ( . )
  42. 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)
  43. 43.

    43 Frontend de KANPAI! #7 Going on () Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19 ߏ଄ૢ࡞쎂େ׆༂!
  44. 44.

    44  6 Frontend de KANPAI! #7 Going on 

    Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  45. 45.

    45 8 1 Frontend de KANPAI! #7 Going on Design

    Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  46. 46.

    46 , Frontend de KANPAI! #7 Going on Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19 ˬ ˫
  47. 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' ]))
  48. 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' ]))
  49. 49.

    49 - , Frontend de KANPAI! #7 Going on Design

    Engineering Group, Design Strategies Dept, Design Unit 2019.7.19 . 0 5 0
  50. 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))
  51. 51.

    51 - - - :: / : . : :

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

    52  Frontend de KANPAI! #7 Going on  Design

    Engineering Group, Design Strategies Dept, Design Unit 2019.7.19 ม쎁 JO쎂쎁썺썽쎁썛썢ཁ஫ҙ!
  53. 53.

    53 7 Frontend de KANPAI! #7 Going on Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19
  54. 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
  55. 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));
  56. 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
  57. 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
  58. 58.

    58 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19 Ըܙ쎂त썢쎡썶썛!
  59. 59.

    59 - 8 Frontend de KANPAI! #7 Going on Design

    Engineering Group, Design Strategies Dept, Design Unit 2019.7.19 -
  60. 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
  61. 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!"); } }
  62. 62.

    62     Frontend de KANPAI! #7 Going

    on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19 
  63. 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
  64. 64.

    64  Frontend de KANPAI! #7 Going on  Design

    Engineering Group, Design Strategies Dept, Design Unit 2019.7.19 ࡞쎡썶썛쎙쎅썣૿썟썶!
  65. 65.

    65 9 Frontend de KANPAI! #7 Going on Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19
  66. 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
  67. 67.

    67 navigator.share(options) Frontend de KANPAI! #7 Going on Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19
  68. 68.

    68 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  69. 69.

    69 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  70. 70.

    70 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19 ʮ쏁쎱쎬ʯ쎩ද썰쎬쎮쎽쏽쎙 ඪ४Խ썬쎣쎁썛썢쎁ʜ!
  71. 71.

    71 10 Frontend de KANPAI! #7 Going on Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19
  72. 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
  73. 73.

    73 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  74. 74.

    74 <script src="https://appleid.cdn-apple.com/.../appleid.auth.js"></script> 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()
  75. 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
  76. 76.

    76 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  77. 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
  78. 78.

    78 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19 쏅쎷쏯쏴쏐쎭쎂סഋ !
  79. 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
  80. 80.

    80    Frontend de KANPAI! #7 Going on

     Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  81. 81.

    81 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  82. 82.

    82 I A A A A Frontend de KANPAI! #7

    Going on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  83. 83.

    83 I P A Frontend de KANPAI! #7 Going on

    Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  84. 84.

    84 A Frontend de KANPAI! #7 Going on Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19
  85. 85.

    85 A Frontend de KANPAI! #7 Going on Design Engineering

    Group, Design Strategies Dept, Design Unit 2019.7.19
  86. 86.

    86 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  87. 87.

    87 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  88. 88.

    Frontend de KANPAI! #7 Going on  Design Engineering Group,

    Design Strategies Dept, Design Unit   Nobuhiro Takahashi @ 2019.7.19
  89. 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
  90. 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
  91. 91.

    Frontend de KANPAI! #7 Going on Design Engineering Group, Design

    Strategies Dept, Design Unit    Nobuhiro Takahashi @ 2019.7.19