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

The State of JavaScript in FECF 2018 #fec_fukuoka

The State of JavaScript in FECF 2018 #fec_fukuoka

Hiroyuki ANAI

December 08, 2018
Tweet

More Decks by Hiroyuki ANAI

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. IUUQTTUBUFPGKTDPNGSPOUFOEGSBNFXPSLTPWFSWJFX

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

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

    View full-size 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 full-size slide

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

    View full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. %
    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 full-size slide

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

    View full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

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

    ͜Ε͔Βͷࣄྫʹظ଴

    View full-size slide

  22. 8FBSFIJSJOH
    w IUUQTBCPVUZBIPPDPKQIS

    View full-size slide

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

    View full-size slide

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

    View full-size slide