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