The State of JavaScript in FECF 2018 #fec_fukuoka

Transcript

1. 5IF4UBUFPG+BWB4DSJQU
   JO
   '&$'
   !QJSPTJLJDL
   

   View Slide

2. ࣗݾ঺հ
   w!QJSPTJLJDL
   w݀Ҫ޺޾
   wϠϑʔגࣜձࣾ
   wΤϯδχΞ
   wఱਆͷΦϑΟεʹډ·͢
   

   View Slide

3. 5IF4UBUFPG+4
   w IUUQTTUBUFPGKTDPN
   w 8FCϑϩϯτΤϯυʹؔ͢ΔΞϯέʔτ
   

   View Slide

4. IUUQTTUBUFPGKTDPNGSPOUFOEGSBNFXPSLTPWFSWJFX
   

   View Slide

5. ࢖ͬͨ͜ͱ͕͋Γɺ·ͨ࢖͍͍ͨ
   ࢖ͬͨ͜ͱ͕͋Δ͕ɺ΋͏࢖͍ͨ͘ͳ͍
   ฉ͍ͨ͜ͱ͕͋ΓɺֶΜͰΈ͍ͨ
   ฉ͍ͨ͜ͱ͕͋Δ͕ɺڵຯ͕ͳ͍
   ฉ͍ͨ͜ͱ͕ͳ͍
   

   View Slide

6. ϑϩϯτΤϯυ૯બڍ
   w ϠϑʔͷϒʔεͰ࣮ࢪͨ͠؆қ൛ʮ5IF4UBUFPG+4ʯ
   w ʮฉ͍ͨ͜ͱ͕ͳ͍ʯ͸ແ͠ɺ߲໨͸ݫબ
   w γʔϧͰ౤ථ
   w ݄ʹ։࠵͞Εͨ)5.-ΧϯϑΝϨϯεͰ΋࣮ࢪࡁΈ
   

   View Slide

7. ϑϩϯτΤϯυ૯બڍ
   JO)5.-ΧϯϑΝϨϯε
   wਪఆ౤ථਓ਺ɿਓʂ
   

   View Slide

8. 64%
   58%
   3%
   54% 56%
   19%
   16%
   4%
   33%
   8%
   2%
   2%
   8%
   38%
   5%
   38%
   4%
   35%
   38%
   15%
   50%
   30%
   2%
   4%
   3%
   37%
   6%
   4%
   29%
   6%
   9%
   12%
   26%
   47%
   4%
   29% 27%
   57%
   15%
   ES201X TypeScript Flow React Vue Angular GraphQL gRPC jQuery
   
   
   in HTML5
   
   
   ࢖ͬͨ͜ͱ͕͋Γɺ
   ·ͨ࢖͍͍ͨ
   ࢖ͬͨ͜ͱ͕͋Δ͕ɺ
   ΋͏࢖͍ͨ͘ͳ͍
   ฉ͍ͨ͜ͱ͕͋Γɺ
   ֶΜͰΈ͍ͨ
   ฉ͍ͨ͜ͱ͕͋Δ͕ɺ
   ڵຯ͕ͳ͍
   ແ౤ථ
   

   View Slide

9. ϑϩϯτΤϯυ૯બڍ
   JO'&$'
   wਪఆ౤ථਓ਺ɿਓʂ
   w͝ڠྗ

   ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
   

   View Slide

10. ࢖ͬͨ͜ͱ͕͋Γɺ
    ·ͨ࢖͍͍ͨ
    ࢖ͬͨ͜ͱ͕͋Δ͕ɺ
    ΋͏࢖͍ͨ͘ͳ͍
    ฉ͍ͨ͜ͱ͕͋Γɺ
    ֶΜͰΈ͍ͨ
    ฉ͍ͨ͜ͱ͕͋Δ͕ɺ
    ڵຯ͕ͳ͍
    ແ౤ථ
    ΧϯϑΝϨϯεޙɺूܭ༧ఆ
    68%
    60%
    10%
    50%
    61%
    27%
    32%
    7%
    19%
    5%
    10%
    2%
    7%
    2%
    52%
    8%
    28%
    6%
    32%
    26%
    31%
    45%
    49%
    1%
    38%
    2%
    6%
    25%
    3%
    5%
    19%
    23%
    6%
    36%
    14% 15%
    19%
    40%
    8%
    ES201X TypeScript Flow React Vue Angular GraphQL gRPC jQuery
    in FECF2018
    

    View Slide

11. ൺֱ
    

    View Slide

12. ܏޲͕ࣅ͍ͯΔ΋ͷ
    w ແ౤ථΛআ͘ͱࡉ͔͍ࠩ͸͋ΕͲ܏޲͕ࣅ͍ͯΔ΋ͷ
    w &49
    w 5ZQF4DSJQU
    w 'MPX
    w 3FBDU
    w (SBQI2-
    w K2VFSZ
    

    View Slide

13. 5IF4UBUFPG+4
    
    )5.-ΧϯϑΝϨϯε
    
    '&$'
    
    &49ɿ
    ஌Βͳ͍ਓ͕গͳ͍ɾܧଓͯ͠࢖͍͍ͨਓ͕ଟ͍
    64%
    58%
    3%
    54% 56%
    8%
    2%
    2%
    5%
    38%
    4%
    35%
    38%
    4%
    3%
    37%
    6%
    4%
    26%
    47%
    4%
    0%
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
    ES201X TypeScript Flow React Vue
    
    
    in HTML
    68%
    60%
    5%
    8%
    28%
    1%
    23%
    6%
    0%
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
    ES201X TypeScript
    

    View Slide

14. 64%
    58%
    3%
    54% 56%
    19%
    8%
    2%
    2%
    8%
    5%
    38%
    4%
    35%
    38%
    15%
    4%
    3%
    37%
    6%
    4%
    29%
    26%
    47%
    4%
    29%
    0%
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
    ES201X TypeScript Flow React Vue Angular
    
    
    in HTML5
    
    5IF4UBUFPG+4
    
    )5.-ΧϯϑΝϨϯε
    
    '&$'
    
    5ZQF4DSJQUɿ
    ։ൃݴޠͷελϯμʔυʹͳ͍͖ͬͯͦ͏
    68%
    60%
    10%
    5%
    10%
    8%
    28%
    6%
    1%
    38%
    23%
    6%
    36%
    0%
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
    ES201X TypeScript Flow
    

    View Slide

15. 64%
    58%
    3%
    54% 56%
    19%
    16%
    8%
    2%
    2%
    8%
    5%
    38%
    4%
    35%
    38%
    15%
    50%
    4%
    3%
    37%
    6%
    4%
    29%
    6%
    26%
    47%
    4%
    29% 27%
    0%
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
    ES201X TypeScript Flow React Vue Angular GraphQL
    
    
    in HTML5
    
    
    5IF4UBUFPG+4
    
    )5.-ΧϯϑΝϨϯε
    
    '&$'
    
    'MPXɿ
    ࢖ͬͨ͜ͱ͕͋Δਓ΋গͳ͍͜͠Ε͔Β΋૿͑ͳͦ͏
    68%
    60%
    10%
    50%
    5%
    10%
    2%
    8%
    28%
    6%
    32%
    1%
    38%
    2%
    23%
    6%
    36%
    14%
    0%
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
    ES201X TypeScript Flow React
    
    

    View Slide

16. 64%
    58%
    3%
    54% 56%
    19%
    16%
    4%
    8%
    2%
    2%
    8%
    5%
    38%
    4%
    35%
    38%
    15%
    50%
    30%
    4%
    3%
    37%
    6%
    4%
    29%
    6%
    9%
    26%
    47%
    4%
    29% 27%
    57%
    0%
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
    ES201X TypeScript Flow React Vue Angular GraphQL gRPC
    
    
    in HTML5
    
    
    5IF4UBUFPG+4
    
    )5.-ΧϯϑΝϨϯε
    
    '&$'
    
    3FBDUɿ
    ਓؾɺݏ͍ͳਓ͕গͳ͍
    68%
    60%
    10%
    50%
    61%
    5%
    10%
    2%
    7%
    8%
    28%
    6%
    32%
    26%
    1%
    38%
    2%
    6%
    23%
    6%
    36%
    14%
    0%
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
    ES201X TypeScript Flow React Vue
    
    

    View Slide

17. 3%
    54% 56%
    19%
    16%
    4%
    33%
    8%
    2%
    2%
    8%
    38%
    4%
    35%
    38%
    15%
    50%
    30%
    2%
    37%
    6%
    4%
    29%
    6%
    9%
    12%
    47%
    4%
    29% 27%
    57%
    15%
    Flow React Vue Angular GraphQL gRPC jQuery
    
    
    in HTML5
    
    
    5IF4UBUFPG+4
    
    )5.-ΧϯϑΝϨϯε
    
    '&$'
    
    (SBQI2-ɿ
    ΈΜͳ࢖͍͖͍ͬͯͨɺࠓޙࣄྫ͕૿͑ͦ͏
    68%
    60%
    10%
    50%
    61%
    27%
    32%
    7%
    5%
    10%
    2%
    7%
    2%
    8%
    28%
    6%
    32%
    26%
    31%
    45%
    49%
    1%
    38%
    2%
    6%
    25%
    3%
    5%
    23%
    6%
    36%
    14% 15%
    19%
    40%
    0%
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
    ES201X TypeScript Flow React Vue Angular GraphQL gRPC
    in FECF2018
    

    View Slide

18. %
    16%
    4%
    33%
    %
    38%
    %
    50%
    30%
    2%
    %
    6%
    9%
    12%
    % 27%
    57%
    15%
    ular GraphQL gRPC jQuery
    
    
    10%
    50%
    61%
    27%
    32%
    7%
    19%
    10%
    2%
    7%
    2%
    52%
    6%
    32%
    26%
    31%
    45%
    49%
    38%
    2%
    6%
    25%
    3%
    5%
    19%
    36%
    14% 15%
    19%
    40%
    8%
    low React Vue Angular GraphQL gRPC jQuery
    in FECF2018
    )5.-ΧϯϑΝϨϯε
    
    '&$'
    
    K2VFSZɿ
    ʮ·ͩ࢖͏ͩΖ͏ʯͱ͍͏ਓ͕݁ߏډͨ
    

    View Slide

19. ҧ͍͕͋Δ͔΋
    w "OHVMBS
    w 7VF
    

    View Slide

20. 58%
    3%
    54% 56%
    19%
    16%
    4%
    33%
    8%
    2%
    2%
    8%
    38%
    38%
    4%
    35%
    38%
    15%
    50%
    30%
    2%
    3%
    37%
    6%
    4%
    29%
    6%
    9%
    12%
    47%
    4%
    29% 27%
    57%
    15%
    TypeScript Flow React Vue Angular GraphQL gRPC jQuery
    
    
    in HTML5
    
    
    5IF4UBUFPG+4
    
    )5.-ΧϯϑΝϨϯε
    
    '&$'
    
    "OHVMBSɿ
    ෱Ԭ͸ར༻ऀଟ͍ʁؔ৺౓΋ߴ͍ʁ
    68%
    60%
    10%
    50%
    61%
    27%
    32%
    5%
    10%
    2%
    7%
    2%
    8%
    28%
    6%
    32%
    26%
    31%
    45%
    1%
    38%
    2%
    6%
    25%
    3%
    23%
    6%
    36%
    14% 15%
    19%
    0%
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
    ES201X TypeScript Flow React Vue Angular GraphQL
    in FECF2018
    

    View Slide

21. 64%
    58%
    3%
    54% 56%
    19%
    16%
    4%
    33%
    8%
    2%
    2%
    8%
    38%
    5%
    38%
    4%
    35%
    38%
    15%
    50%
    30%
    2%
    4%
    3%
    37%
    6%
    4%
    29%
    6%
    9%
    12%
    26%
    47%
    4%
    29% 27%
    57%
    15%
    ES201X TypeScript Flow React Vue Angular GraphQL gRPC jQuery
    
    
    in HTML5
    
    
    5IF4UBUFPG+4
    
    )5.-ΧϯϑΝϨϯε
    
    '&$'
    
    7VFɿ
    7VFઌਐࠃɺ೔ຊɻ෱Ԭɺ7VF੎ଟ͍ʁ
    68%
    60%
    10%
    50%
    61%
    27%
    5%
    10%
    2%
    7%
    2%
    8%
    28%
    6%
    32%
    26%
    31%
    1%
    38%
    2%
    6%
    25%
    23%
    6%
    36%
    14% 15%
    0%
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
    ES201X TypeScript Flow React Vue Angular
    in FECF2018
    

    View Slide

22. ·ͱΊ
    w &49͸े෼ਁಁ͍ͯ͠Δ
    w 5ZQF4DSJQU͸ελϯμʔυͬΆ͍
    w ೔ຊˍ෱Ԭͷ7VFͷ੎͍͍͢͝ɻ෱Ԭͷ"OHVMBS੎ଟ͍
    w ίϛϡχςΟͷӨڹ͸େ͖͍ʁ
    w (SBQI2-͸ΈΜͳ࢖ͬͯΈ͍ͨɺ

    ͜Ε͔Βͷࣄྫʹظ଴
    

    View Slide

23. ࠷ޙʹ
    

    View Slide

24. 8FBSFIJSJOH
    w IUUQTBCPVUZBIPPDPKQIS
    

    View Slide

25. ʢਫʣʹ
    NFFUVQ΍Γ·͢
    w Ϡϑʔ෱Ԭ5FDI.FFUVQ
    w IUUQTZBIPPGVLVPLBDPOOQBTTDPNFWFOU
    

    View Slide

26. ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠
    

    View Slide