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
  2. 2      Frontend de KANPAI! #7

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

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

    Group, Design Strategies Dept, Design Unit 2019.7.19
  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  Frontend de KANPAI! #7 Going on  Design

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

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

    Design Strategies Dept, Design Unit 2019.7.19
  9. 9     2019.7.19 Frontend de KANPAI! #7

    Going on  Design Engineering Group, Design Strategies Dept, Design Unit  
  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 ! Frontend de KANPAI! #7 Going on A Design

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

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

    Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  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 /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 / Frontend de KANPAI! #7 Going on Design Engineering

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

    Design Strategies Dept, Design Unit 2019.7.19
  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 ຊ࣮૷ظ଴! Frontend de KANPAI! #7 Going on Design Engineering

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

    Going on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  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     Frontend de KANPAI! #7 Going

    on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  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     Frontend de KANPAI! #7 Going

    on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  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 Frontend de KANPAI! #7 Going on Design Engineering Group,

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

    on  Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  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    Frontend de KANPAI! #7 Going on

     Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  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    Frontend de KANPAI! #7 Going on

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

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

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

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

    on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19
  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 Frontend de KANPAI! #7 Going on Design Engineering Group,

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

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

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

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

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

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

    Group, Design Strategies Dept, Design Unit 2019.7.19 ˬ ˫
  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  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 - , Frontend de KANPAI! #7 Going on Design

    Engineering Group, Design Strategies Dept, Design Unit 2019.7.19 . 0 5 0
  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 - - - :: / : . : :

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

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

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

    Design Strategies Dept, Design Unit 2019.7.19 Ըܙ쎂त썢쎡썶썛!
  59. 59 - 8 Frontend de KANPAI! #7 Going on Design

    Engineering Group, Design Strategies Dept, Design Unit 2019.7.19 -
  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   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     Frontend de KANPAI! #7 Going

    on Design Engineering Group, Design Strategies Dept, Design Unit 2019.7.19 
  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  Frontend de KANPAI! #7 Going on  Design

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

    Group, Design Strategies Dept, Design Unit 2019.7.19
  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 navigator.share(options) Frontend de KANPAI! #7 Going on Design Engineering

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

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

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

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

    Group, Design Strategies Dept, Design Unit 2019.7.19
  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 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  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 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 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19
  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 Frontend de KANPAI! #7 Going on Design Engineering Group,

    Design Strategies Dept, Design Unit 2019.7.19 쏅쎷쏯쏴쏐쎭쎂סഋ !
  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    Frontend de KANPAI! #7 Going on

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

    Design Strategies Dept, Design Unit 2019.7.19
  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 I P A Frontend de KANPAI! #7 Going on

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

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

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

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

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

    Design Strategies Dept, Design Unit   Nobuhiro Takahashi @ 2019.7.19
  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 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. Frontend de KANPAI! #7 Going on Design Engineering Group, Design

    Strategies Dept, Design Unit    Nobuhiro Takahashi @ 2019.7.19