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

2016年JavaScriptに どっぷり浸かって学んだこと

2016年JavaScriptに どっぷり浸かって学んだこと

(あるいはJavaScript怖くなかった話)
#frontkansai 2016.09
TAKUMA Hanatani(Potato4d)

Potato4d(Hanatani Takuma)

September 24, 2016
Tweet

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Technology

Transcript

  1. 2016೥JavaScriptʹ
    Ͳͬ΀Γਁֶ͔ͬͯΜͩ͜ͱ
    #frontkansai 2016.09
    TAKUMA Hanatani(Potato4d)
    ͋Δ͍͸JavaScriptා͘ͳ͔ͬͨ࿩

    View Slide

  2. ࣗݾ঺հ
    Ֆ୩୓ຏ(@potato4d)
    w #frontkansai #wbkyoto ͷਓ
    w SCOUTER inc.ͰVue.jsͰSPAॻ͍ͨΓ΋
    w དྷ೥͔ΒࣾձਓʹͳΔͬΆ͍
    w εϥΠυ͸SpeakerDeckʹ্͛ΔΑ͏ͷ
    ςΩετ͕ଟ͍ͷͰจࣈ͸ಡ·ͳͯ͘ྑ
    ͍λΠϓͷ΍ͭͰ͢

    View Slide

  3. ࠓ೔࿩͢͜ͱ
    • CM
    w ࢲ͕ϑϩϯτΤϯυʹڵຯΛ࣋ͭ·Ͱͷ࿩
    w ࢲ͕ϑϩϯτΤϯυʹڵຯΛ͔࣋ͬͯΒͷ࿩
    w ཁॴཁॴͰͷٕज़ͷมભ
    • CM

    View Slide

  4. Ұ೔ͷӫཆ͕׬શʹऔΕΔʂ
    ׬શ৯COMPൃചதʂ
    https://comp.jp
    גࣜձࣾCOMP

    View Slide

  5. ఻͍͑ͨ͜ͱ
    w ϑϩϯτΤϯυා͘ͳ͔ͬͨ
    w ϑϩϯτΤϯυͷਓ΋৔ॴʹΑͬͯ͸ා͘ͳ͔ͬ
    ͨ

    View Slide

  6. http://nagashi.me

    View Slide

  7. w جຊతʹPHPϕʔεͰશ෦ղܾ
    w JavaScript͸AjaxٴͼDOMૢ࡞ͷΈʹར༻
    w ϚʔΫΞοϓΤϯδχΞ+PHPΈ͍ͨͳঢ়ଶ
    w Node.js͸λεΫϥϯφʔ౳ͷศརπʔϧͷར༻ͷ
    ҝͷར༻͕த৺
    ϑϩϯτΤϯυʹؔΘΔલ
    2015.12

    View Slide

  8. w ͪͳΈʹ
    Onsen UI͕࢖͍ͨͯ͘AngularJSΛར༻͢
    Δ΋͏·͍͜ͱ࢖͍͜ͳͤͣྲྀΕʹ
    w Onsen UIͷαϯϓϧ͔Βࠓͷߏ੒ΛͳΜͱͳ͘͸
    ஌ͬͨͭ΋ΓʹͳΔ
    w ੍࡞ձࣾͷεΩϧϕʔεͰ͸ɺࠓޙͭΒ͍͜ͱΛͳ
    Μͱͳ͘࡯࢝͠ΊΔ
    ϑϩϯτΤϯυʹؔΘΔલ
    2015.12

    View Slide

  9. ׽͸໧ͬͯjQuery

    View Slide

  10. ϑϩϯτΤϯυͱͷग़ձ͍
    w jQueryഉআͷӡಈ͕֤஍ͰਐΜͰ͍ͨͷͰ׶͑ͯ
    jQueryͰ࿩ͨ͢ΊͱϐβΛ৯͍ʹ#frontkansai΁
    w ͜ͷ࣌ʹϑϩϯτΤϯυΊͬͪΌ͓΋͠Ζͦ͏΍Μʂ
    ͱײͯ͡ϑϩϯτ΁ͷҠߦΛܾҙ
    w ಉ࣌ʹJavaScriptΛଘ෼ʹ͔͚Δ؀ڥʹ͍͘͜ͱ΋ܾ
    ҙ
    2015.12

    View Slide

  11. ϞμϯJavaScript΁ͷಓ

    View Slide

  12. w গͣͭ͠ݱ୅తͳJavaScriptΛֶͼͩ͢
    w ͸͡Ί͸Node.jsͰͷQoL޲্ͱɺHTML5ͷ஥ྑ
    ͍ͯ͘͠ΔྖҬ͔Βͷ֎ງຒΊ྆ํͰਐΊͨ
    w ݁Ռతʹ͸͸͡Ί͔ΒϑϩϯτΤϯυͷJS-FWͰ
    ਐΊͨ΄͏͕ྑ͔ͬͨͷͰɺ͕࣍ॏཁ
    ϞμϯJavaScript΁ͷಓ
    ʙ2016.03,04

    View Slide

  13. Vue.jsͱͷग़ձ͍

    View Slide

  14. w ϑϩϯτΤϯυʹؔΘΔલ͔ΒTwitterͷ஌Γ߹͍
    ʹѪ޷Ո͕͍ͯͳΜ͔ੌ͍ͱ͸ࢥ͍ͬͯͨ
    • PHP࣌୅͔Β(SymfonyͳͲ
    େن໛ϑϨʔϜϫʔΫ
    ͕ۤखͩͬͨͷͰஸ౓खࠒͰར༻͢Δ͜ͱʹ
    w Vue.jsʹΑͬͯগͣͭ͠JavaScriptͱ஥ྑ͘ͳΕͨ
    Vue.jsͱͷग़ձ͍
    2016.04ʙ

    View Slide

  15. w ES2015จ๏ ίϯϙʔωϯτࢥߟ webpackͷ
    -loaderͳͲɺϞμϯͳٕज़͸Vue.jsΛ௨͠
    ֶͯΜͩ
    w ࠷௿ݶ࢖͏ʹ͸ϒϥ΢βͰͦͷ··ಡΈࠐΜͰ΋
    Πέͯɺ࢖͍౗͢ʹ͸NodeϕʔεͰ৭ʑग़དྷΔ
    ؒޱ͕޿͘Ԟ͕ਂ͍ͷֶ͕Ϳʹ͸࠷ద
    Vue.jsͱͷग़ձ͍
    2016.04ʙ

    View Slide

  16. w ݱঢ়ɺ།Ұݱ৔Ͱͷಋೖʹઌ೔੒ޭͯͦ͠͏͍
    ͏ҙຯͰ΋ίετ͕௿ͯ͘ྑ͔ͬͨ
    w จ๏ࣗମͷܰ͞ɺ෯޿͞ɺখ೉͍͠ઃܭΛ͠ͳ
    ͯ͘΋ͦΕͳΓʹடং͕ੜ·ΕΔลΓ͔Βɺ
    jQueryͷ࣍ͷҰาʹ͸࠷దͩͱࢥ͍ͬͯΔ
    Vue.jsͱͷग़ձ͍
    2016.04ʙ

    View Slide

  17. ଓɾϞμϯJavaScript΁ͷಓ

    View Slide

  18. w ESͷʮStage 0Ͱ΋ରԠͯ͠Δ͔ΒͦΕͰॻ͍ͯʯͱݴ
    ΘΕͨΓɺReactΛ ୹ظ͚ͩ
    ࣮༻͢Δ͜ͱʹͳͬͨΓ
    w Node.jsͷϞδϡʔϧ͔ΒESͷimport/export΁
    w let/const, Arrow Function, PromiseลΓ͚ͩ͡Όͳ͍ES
    ͷهड़΁
    ଓɾϞμϯJavaScript΁ͷಓ
    2016.07ʙNow

    View Slide

  19. ͜͜·Ͱ͍ͭͯ͜Εͨཧ༝

    View Slide

  20. JavaScriptܥྻͰͷษڧձͰͷొஃ

    View Slide

  21. w ษڧձͰ࿩͢ͱ͍͏͜ͱ͸ɺ1࿮෼ͷՁ஋Λఏڙ͢
    Δͱ͍͏͜ͱ
    w Ͱ͖Δ͔Ͱ͖ͳ͍͔͸ผͱͯ͠ɺͦ͜ͷͨΊʹ࠷େ
    ݶ౒ΊΑ͏ҙࢤ͕Ұ൪੒௕ʹܨ͕ͬͨ
    w ୯ʹϞνϕ্͕͕Βͳͯ͘΋5%% ొஃۦಈ։ൃ
    ͠
    ͩ͢ͱઈର΍Δͱ͍͏͜ͱ΋͋Δ
    ษڧձͰ࿩͢ॏཁੑ

    View Slide

  22. w ొஃ͚ͩͰͳ͘ɺQiitaͰ΋े෼ޮՌ͸͋ͬͯɺͱʹ
    ͔͘Publish͢Δͷ͕ॏཁ͔΋
    w ਓͷ໨ʹͭ͘ͱ͜ΖͰɺ੿ͯ͘΋ɺੌ͘ͳͯ͘΋ɺ
    গͣͭ͠֎ʹ޲͚Δ͜ͱͰɺҙ͕ࣝժੜ͑ͯ͘Δ
    w ͲΜͲΜ֎޲͖ʹൃ৴͍͖͍ͯͨ͠͠ɺͦ͏͠ଓ͚
    Δ͜ͱ͕ࣗ෼ʹͱͬͯͷՁ஋ͱͳΔ
    ษڧձͰ࿩͢ॏཁੑ

    View Slide

  23. 2016೥JavaScriptʹ
    Ͳͬ΀Γਁֶ͔ͬͯΜͩ͜ͱ

    View Slide

  24. Vue.jsͷ༏͠͞

    View Slide

  25. ֎޲͖ͷൃ৴ͷॏཁੑ

    View Slide

  26. ࠷ޙʹ

    View Slide

  27. https://javascript-fes.doorkeeper.jp/events/
    52089

    View Slide

  28. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide