なぜその技術を使うのか？ / Connehito marche online 20201112

https://connehito.connpass.com/event/193896/

Transcript

1. ͳͥͦͷٕज़Λ࢖͏ͷ͔ʁ
   @dachi023
   

   View Slide

2. Ξμν Ϧϣ΢

   GitHub: @dachi023
   Twitter: @dachi_023
   Blog: https://dachi.work
   ίωώτגࣜձࣾͷϚϚϦؔ࿈ͷࣄۀͰ

   ϦʔυΤϯδχΞΛ΍͍ͬͯ·͢
   

   View Slide

3. ࠓ೔ͷຊ୊
   

   View Slide

4. ॻ੶͕ൃച͞Εͨ
   • ࢲͷ୲౰͸αϯϓϧίʔυͱͦͷղઆύʔτ
   • ࣥචʹ͋ͨΓɺԿΛॻ͔͘ɾ఻͑Δ͔Λߟ͑ͨ
   • ʮͳͥ࢖͏ͷ͔ʁʯΛେࣄʹ͢Δ͜ͱʹͨ͠
   • ࣅͨΑ͏ͳ಺༰Λϒϩάʹ΋ॻ͍ͨ

   https://dachi.work/posts/2020-10-09_publish-tech-book
   

   View Slide

5. (ͦͷٕज़Λ) ͳͥ࢖͏ͷ͔ʁ
   • ݱ୅ͷϑϩϯτΤϯυʹ͸બ୒ࢶ͕ଟ͘ଘࡏ
   • Angular, React, Vue
   • Parcel, Rollup, webpack
   • Etc …
   • ࣗ਎͕ॴଐ͢Δ૊৫ɺ։ൃ͢ΔϓϩμΫτΛཧղ

   ͦͷ্Ͱద੾ͳٕज़બఆΛ͠ଓ͚͍ͯ͘ඞཁ͕͋Δ
   

   View Slide

6. ద੾ͳٕज़બఆΛ͢Δʹ͸
   • ৄ͘͠͸ॻ੶Λߪೖ̓͠
   • ࣮ࡍʹͲΜͳέʔεͰҙࢥܾఆ͍ͯ͘͠ͷ͔ʁ
   • ຊൃදͰ͸ίωώτͷϓϩμΫτ։ൃͰར༻͖ͯͨ͠

   ٕज़Λʮͳͥ࢖ͬͨͷ͔ʯΛަ͑ͯղઆ
   

   View Slide

7. 2016೥·Ͱ໭Γ·͢
   • ੲ࿩ + ٕज़બఆ࣌ʹߟ͍͑ͯͨ͜ͱ
   • ౰࣌Λ஌Δਓ͸ջ͔͍͠ؾ࣋ͪͰݟΕΔ͔΋
   • ͱ͜ΖͲ͜ΖهԱ͕ᐆດ
   • Ͱ΋͍͍ͩͨ߹ͬͯΔ (͸ͣ)
   

   View Slide

8. 2016ʙ
   

   View Slide

9. • React ΍ Vue ʹਓʑ͕ັྃ͞Ε͍ͯ͘
   • ↑ ʹ࿈ಈͯ͠ jQuery ґଘ͕ঃʑʹݮΔ
   • ES2015 ͕ਁಁ࢝͠ΊΔɺprototype ͳΜͯͳ͔ͬͨ ※
   

   ※ ΄ͱΜͲҙࣝ͠ͳͯ͘Α͘ͳ͚ͬͨͩͰ͢
   • Babel Λ༻͍ͨτϥϯεύΠϧ͕Ұൠతͳख๏ʹ
   • webpack ͷ୆಄ʹΑΓ Grunt, gulp ͕ਰୀ
   2016ʙ มֵظ
   

   View Slide

10. 2016ʙ ίωώτ
    • ϑϩϯτΤϯυΤϯδχΞͱͯ͠ೖࣾ

    લCTOʮϑϩϯτΤϯυ͍͍ײ͡ʹ͓ئ͍͠·͢ʂʯ
    • Grunt, gulp Λ΍Ίͯ webpack Λ࢖͍࢝Ίͨ

    ͍ͭͰʹطଘίʔυΛؾ߹Ͱ CommonJS ରԠ
    • ESLint ΛೖΕͯνʔϜ։ൃ͕͠΍͘͢ͳͬͨ
    • ύοέʔδϚωʔδϟΛ npm ͔Β Yarn ʹมߋ
    

    View Slide

11. 2016ʙ ٕज़બఆ࣌ͷ؍఺
    • ES5 ϕʔεͷίʔυͰͷ։ൃͮ͠Β͕͞ݦஶʹ
    • Babel, webpack ʹΑͬͯ ES2015 ه๏Λ֫ಘ
    • require-exports ରԠͰϑΝΠϧؒͷ΍ΓͱΓ͕վળ
    • ίʔσΟϯάʹடংΛ΋ͨΒ͢ ESLint
    • ݸਓʹڧ͘ґଘͨ͠ίʔσΟϯάελΠϧ͔Βͷ୤٫
    • jQuery Λ΍Ίͯ React Λ࢖͍͔͕ͨͬͨ

    νʔϜͱͯ͠४උ͕଍Γͳ͍ͱࢥ͍ཌ೥ʹ࣋ͪӽ͠
    

    View Slide

12. 2017ʙ
    

    View Slide

13. 2017ʙ ઓࠃ࣌୅ ऴྃ
    • React ΍ Vue Λར༻͢ΔνʔϜ͕૿͖͑ͯͨ
    • Flux ͕ΞʔΩςΫνϟબఆͷఆ൪ʹ
    • 2016೥ʹྲྀߦΓ࢝ΊͨϥΠϒϥϦɾπʔϧͷ

    ίϛϡχςΟ͕ൃలɺؔ࿈ϥΠϒϥϦ΋ॆ࣮
    • Flow, TypeScript ʹΑͬͯ JS Ͱ΋ܕΛҙࣝ࢝͠ΊΔ
    

    View Slide

14. 2017ʙ ίωώτ
    • React (Flux) Λಋೖ

    ࣾ಺ͷΤϯδχΞ޲͚ʹษڧձΛ΍ΔͳͲͯ͠෍ڭ
    • ίϯϙʔωϯτࢦ޲ͳ UI ͷߏங
    • Flux ʹΑͬͯෳࡶͳσʔλϑϩʔ͕ղফ
    • Flow Λಋೖ
    • ܕͷૉ੖Β͠͞Λ࠶ೝࣝ
    • ౰࣌ɺPHP Ұ୒ͩͬͨͨΊ͋·ΓೃછΜͰͳ͔͔ͬͨ΋
    

    View Slide

15. 2017ʙ ٕज़બఆ࣌ͷ؍఺
    • jQuery ͔ΒͷύϥμΠϜγϑτ
    • ࢖͑ͳ͍͔Β࢖Θͳ͍ɺͰ͸͍ΒΕͳ͍
    • jQuery ͷਓؾ͕Լ߱ؾຯͰ͋Δ͜ͱ͸໌֬ͩͬͨ͠ɺ

    ࠓͷ··Ͱ͸·͍ͣͩΖ͏ͳͱࢥͬͨ
    • ৽͍͜͠ͱ΁ͷνϟϨϯδ
    • ೖࣾ2೥໨Ͱ༨༟͕ग़͖͔ͯͨ΋͠Εͳ͍
    • ܕΛίωώτʹ࣋ͪࠐΜͰͦͷૉ੖Β͠͞ΛޠΓ͍ͨ
    

    View Slide

16. 2018ʙ
    

    View Slide

17. 2018ʙ ͔Ώ͍ॴʹख͕ಧ͘
    • Next.js ΍ Nuxt.js Ͱ SSR ͢Δख๏͕ྲྀߦΔ

    ͜ΕʹΑͬͯ SEO ΁ͷݒ೦΋෷১
    • Gatsby Λ༻͍ͨ React x GraphQL Ͱ SSG ͢Δख๏

    ओʹίʔϙϨʔταΠτ΍ϒϩάͰ࢖ΘΕ࢝ΊΔ
    • styled-components, Emotion ͳͲͷྲྀߦ

    CSS-in-JS Λ࠾༻͢Δέʔε͕૿͑ͨ
    

    View Slide

18. 2018ʙ ίωώτ
    • ৽نΞϓϦͰͷ React ࠾༻͕ඪ४Խ
    • ͋Θͤͯशख़౓΋޲্͍ͤͯ͘͞
    • @connehito/eslint-config Λެ։
    • ࣾ಺ඪ४ԽͷऔΓ૊Έͷ1ͭ
    • Storybook ͷӡ༻Λ։࢝
    • Greenkeeper ͰϥΠϒϥϦͷόʔδϣϯΛ௥͍࢝ΊΔ
    • ׂͱૣ͍ஈ֊Ͱ௥͍͚ͭͳ͘ͳΓஅ೦ (ͦͯ͠ dependabot ΁)
    

    View Slide

19. 2018ʙ ٕज़બఆ࣌ͷ؍఺
    • React Λ࢖͍ଓ͚͍ͯ͘ɺͱ͍͏൑அ
    • ౰໘͸ഇΕ͍͔ͯͳ͍ͩΖ͏
    • ΑΓ࢖͍͜ͳͯ͠։ൃޮ཰Λ্͍͛ͨ
    • νʔϜͰ҆ఆͨ͠։ൃΛ͢Δ
    • ίʔσΟϯάελΠϧͷࣾ಺౷Ұ
    • ίϯϙʔωϯτͷՄࢹԽɾڞ༗ʹΑͬͯೝࣝΛἧ͑Δ
    • ఆظతͳόʔδϣϯΞοϓ΁ͷ௅ઓ
    

    View Slide

20. 2019ʙ
    

    View Slide

21. 2019ʙ ग़ἧͬͨ
    • TypeScript 3.x ͕ੈʹਁಁ͠͸͡ΊΔ (ϦϦʔε͸ 2018)
    • TS ͸σϑΝΫτελϯμʔυͱ͍͑Δ͘Β͍ʹ
    • React ʹ Hooks ͕΍͖ͬͯͨ
    • ؔ਺ίϯϙʔωϯτͰͷ࣮૷͕౰ͨΓલʹͳΔ
    • େཻͷϑϨʔϜϫʔΫ΍ϥΠϒϥϦͷొ৔ɾ୆಄͸

    ͦ͜·Ͱܹ͘͠ͳ͘ɺ੒ख़ͨ͠งғؾ
    

    View Slide

22. 2019ʙ ίωώτ
    • Hooks Λशಘ͠ Class ϕʔεͷίʔυ͔ΒঃʑʹҠߦ
    • Atomic Design ϕʔεͷσΟϨΫτϦߏ੒Ͱ։ൃ
    • ίϯϙʔωϯτͷαΠζײΛΑΓҙࣝ
    • Greenkeeper ͔Β dependabot ΁ͷҠߦ
    • ͦͯ͠ Renovate ΁ɾɾɾ
    • Next.js Λ࠾༻ɺίωώτࣄۀॳͷ React Ͱ SSR
    

    View Slide

23. 2019ʙ ٕज़બఆ࣌ͷ؍఺
    • ৽͍͠ཁૉΛऔΓೖΕ͍ͯ͘
    • Hooks ศར → ࣾ಺ʹਁಁͤ͞ΔɾྲྀߦΒͤΔ
    • ࠓ͋ΔίʔυΛΑΓྑ͍ํ޲ʹਐΊΔͨΊͷ౒ྗ
    • όʔδϣϯΞοϓӡ༻ʹເΛݟ͗͢Δ
    • Կճ৐Γ׵͑ΔΜͩΖ͏ɾɾɾ
    

    View Slide

24. 2020ʙ
    

    View Slide

25. 2020ʙ ੔͑Δ೥
    • ϢʔβʔϓϥΠόγʔɾηΩϡϦςΟͷॏཁࢹ
    • User-Agent, 3rd Party Cookie ͷ੍ݶͷܭը
    • Next.js ʹ໨ۄػೳ͕౥ࡌ͞ΕΔ
    • Fast Refresh, Incremental Static Regeneration
    • Node.js όοΫΤϯυ΋ॆ࣮
    • Prisma 2.x, Blitz
    • αʔϏεશମΛ JS ͚ͩͰߏஙͯ͠΋ҧ࿨ײͷͳ͍࣌୅
    

    View Slide

26. 2020ʙ ίωώτ
    • ಓ۩͕ग़ἧͬͨͷͰͲ͏ӡ༻͢Δ͔Λߟ͑ΔϑΣʔζ
    • lighthouse-ci Λར༻ͨ͠ύϑΥʔϚϯεܭଌ
    • Renovate, Sentry Λܧଓతʹӡ༻͢ΔͨΊʹͲ͏͢Δ͔
    • ෷১͖͠Ε͍ͯͳ͍՝୊Λղܾ
    • ϑϩϯτΤϯυ͕ಘҙͳϝϯόʔ͕૿͑ͨ
    • ஌ܙΛग़͠߹ͬͯ՝୊Λ1ͭ1ͭย෇͚͍͖͍ͯͨ
    

    View Slide

27. 2020ʙ ٕज़બఆ࣌ͷ؍఺
    • ։ൃϝϯόʔ૿Ճʹӡ༻͕଱͖͑ΕΔ͔
    • ஥͕ؒ૿͑ͯΊͰ͍ͨҰํɺӡ༻໘Ͱͷݟ௚͕͠ඞཁ
    • গਓ਺ͰΑ͠ͳʹ΍͍ͬͯͨ͜ͱ͕ճΒͳ͘ͳΔ
    • ͍Α͍Α JS = ϑϩϯτΤϯυͷ΋ͷɺͰ͸ͳ͍
    • ݁ߏલ͔Βͦ͏͚ͩͲࠓճͷ͸Ϗοά΢ΣʔϒΆ͋͞Δ
    • ٕज़બఆͷ෯͕޿͕Δνϟϯε
    

    View Slide

28. Ҏ্ɺ5೥෼ͷ
    ৼΓฦΓͰͨ͠
    

    View Slide

29. ࠷ޙʹݴ͍͍ͨ͜ͱ
    

    View Slide

30. ͳͥ࢖͏ͷ͔ʁ͸ৗʹߟ͑Δ
    • 4೥΋ϚϚϦͷ Web ৮ͬͯΔͷʹ՝୊͕ਚ͖ͳ͍
    • ٕज़͸ਐา͢Δ͠զʑͷ஌ࣝ΋ߋ৽͞ΕΔ
    • ͱͬͯ΋ָ͍͠ʂ
    • ٕज़બఆ͢Δͱ͖ʹҙ͍ࣝͨ͜͠ͱ
    • ڵຯຊҐɾ୹ظ໨ઢͰͷҙࢥܾఆ͸Ͳ͔͜Ͱޙչ͢Δ
    • ͜ͷϥΠϒϥϦΛೖΕΔͱࠓޙͲ͏ϓϩμΫτ͕ྑ͘ͳͬͯ
    ͍͘ΜͩΖ͏ʁΛߟ͔͑ͯΒೖΕΔ͔൑அ
    

    View Slide

31. ʲPRʳϑϩϯτΤϯυ։ൃೖ໳
    ϓϩϑΣογϣφϧͳ
    ։ൃπʔϧͱઃܭɾ࣮૷
    https://www.shuwasystem.co.jp/book/
    9784798061771.html
    

    View Slide