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

Transcript

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

2. Ξμν Ϧϣ΢
 GitHub: @dachi023 Twitter: @dachi_023 Blog: https://dachi.work ίωώτגࣜձࣾͷϚϚϦؔ࿈ͷࣄۀͰ
 ϦʔυΤϯδχΞΛ΍͍ͬͯ·͢

3. ࠓ೔ͷຊ୊

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

5. (ͦͷٕज़Λ) ͳͥ࢖͏ͷ͔ʁ • ݱ୅ͷϑϩϯτΤϯυʹ͸બ୒ࢶ͕ଟ͘ଘࡏ • Angular, React, Vue • Parcel,

   Rollup, webpack • Etc … • ࣗ਎͕ॴଐ͢Δ૊৫ɺ։ൃ͢ΔϓϩμΫτΛཧղ
 ͦͷ্Ͱద੾ͳٕज़બఆΛ͠ଓ͚͍ͯ͘ඞཁ͕͋Δ

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

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

   Ͱ΋͍͍ͩͨ߹ͬͯΔ (͸ͣ)

8. 2016ʙ

9. • React ΍ Vue ʹਓʑ͕ັྃ͞Ε͍ͯ͘ • ↑ ʹ࿈ಈͯ͠ jQuery ґଘ͕ঃʑʹݮΔ

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

10. 2016ʙ ίωώτ • ϑϩϯτΤϯυΤϯδχΞͱͯ͠ೖࣾ
 લCTOʮϑϩϯτΤϯυ͍͍ײ͡ʹ͓ئ͍͠·͢ʂʯ • Grunt, gulp Λ΍Ίͯ webpack

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

11. 2016ʙ ٕज़બఆ࣌ͷ؍఺ • ES5 ϕʔεͷίʔυͰͷ։ൃͮ͠Β͕͞ݦஶʹ • Babel, webpack ʹΑͬͯ ES2015

    ه๏Λ֫ಘ • require-exports ରԠͰϑΝΠϧؒͷ΍ΓͱΓ͕վળ • ίʔσΟϯάʹடংΛ΋ͨΒ͢ ESLint • ݸਓʹڧ͘ґଘͨ͠ίʔσΟϯάελΠϧ͔Βͷ୤٫ • jQuery Λ΍Ίͯ React Λ࢖͍͔͕ͨͬͨ
 νʔϜͱͯ͠४උ͕଍Γͳ͍ͱࢥ͍ཌ೥ʹ࣋ͪӽ͠

12. 2017ʙ

13. 2017ʙ ઓࠃ࣌୅ ऴྃ • React ΍ Vue Λར༻͢ΔνʔϜ͕૿͖͑ͯͨ • Flux

    ͕ΞʔΩςΫνϟબఆͷఆ൪ʹ • 2016೥ʹྲྀߦΓ࢝ΊͨϥΠϒϥϦɾπʔϧͷ
 ίϛϡχςΟ͕ൃలɺؔ࿈ϥΠϒϥϦ΋ॆ࣮ • Flow, TypeScript ʹΑͬͯ JS Ͱ΋ܕΛҙࣝ࢝͠ΊΔ

14. 2017ʙ ίωώτ • React (Flux) Λಋೖ
 ࣾ಺ͷΤϯδχΞ޲͚ʹษڧձΛ΍ΔͳͲͯ͠෍ڭ • ίϯϙʔωϯτࢦ޲ͳ UI

    ͷߏங • Flux ʹΑͬͯෳࡶͳσʔλϑϩʔ͕ղফ • Flow Λಋೖ • ܕͷૉ੖Β͠͞Λ࠶ೝࣝ • ౰࣌ɺPHP Ұ୒ͩͬͨͨΊ͋·ΓೃછΜͰͳ͔͔ͬͨ΋

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


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

16. 2018ʙ

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

    SEO ΁ͷݒ೦΋෷১ • Gatsby Λ༻͍ͨ React x GraphQL Ͱ SSG ͢Δख๏
 ओʹίʔϙϨʔταΠτ΍ϒϩάͰ࢖ΘΕ࢝ΊΔ • styled-components, Emotion ͳͲͷྲྀߦ
 CSS-in-JS Λ࠾༻͢Δέʔε͕૿͑ͨ

18. 2018ʙ ίωώτ • ৽نΞϓϦͰͷ React ࠾༻͕ඪ४Խ • ͋Θͤͯशख़౓΋޲্͍ͤͯ͘͞ • @connehito/eslint-config

    Λެ։ • ࣾ಺ඪ४ԽͷऔΓ૊Έͷ1ͭ • Storybook ͷӡ༻Λ։࢝ • Greenkeeper ͰϥΠϒϥϦͷόʔδϣϯΛ௥͍࢝ΊΔ • ׂͱૣ͍ஈ֊Ͱ௥͍͚ͭͳ͘ͳΓஅ೦ (ͦͯ͠ dependabot ΁)

19. 2018ʙ ٕज़બఆ࣌ͷ؍఺ • React Λ࢖͍ଓ͚͍ͯ͘ɺͱ͍͏൑அ • ౰໘͸ഇΕ͍͔ͯͳ͍ͩΖ͏ • ΑΓ࢖͍͜ͳͯ͠։ൃޮ཰Λ্͍͛ͨ •

    νʔϜͰ҆ఆͨ͠։ൃΛ͢Δ • ίʔσΟϯάελΠϧͷࣾ಺౷Ұ • ίϯϙʔωϯτͷՄࢹԽɾڞ༗ʹΑͬͯೝࣝΛἧ͑Δ • ఆظతͳόʔδϣϯΞοϓ΁ͷ௅ઓ

20. 2019ʙ

21. 2019ʙ ग़ἧͬͨ • TypeScript 3.x ͕ੈʹਁಁ͠͸͡ΊΔ (ϦϦʔε͸ 2018) • TS

    ͸σϑΝΫτελϯμʔυͱ͍͑Δ͘Β͍ʹ • React ʹ Hooks ͕΍͖ͬͯͨ • ؔ਺ίϯϙʔωϯτͰͷ࣮૷͕౰ͨΓલʹͳΔ • େཻͷϑϨʔϜϫʔΫ΍ϥΠϒϥϦͷొ৔ɾ୆಄͸
 ͦ͜·Ͱܹ͘͠ͳ͘ɺ੒ख़ͨ͠งғؾ

22. 2019ʙ ίωώτ • Hooks Λशಘ͠ Class ϕʔεͷίʔυ͔ΒঃʑʹҠߦ • Atomic Design

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

23. 2019ʙ ٕज़બఆ࣌ͷ؍఺ • ৽͍͠ཁૉΛऔΓೖΕ͍ͯ͘ • Hooks ศར → ࣾ಺ʹਁಁͤ͞ΔɾྲྀߦΒͤΔ •

    ࠓ͋ΔίʔυΛΑΓྑ͍ํ޲ʹਐΊΔͨΊͷ౒ྗ • όʔδϣϯΞοϓӡ༻ʹເΛݟ͗͢Δ • Կճ৐Γ׵͑ΔΜͩΖ͏ɾɾɾ

24. 2020ʙ

25. 2020ʙ ੔͑Δ೥ • ϢʔβʔϓϥΠόγʔɾηΩϡϦςΟͷॏཁࢹ • User-Agent, 3rd Party Cookie ͷ੍ݶͷܭը

    • Next.js ʹ໨ۄػೳ͕౥ࡌ͞ΕΔ • Fast Refresh, Incremental Static Regeneration • Node.js όοΫΤϯυ΋ॆ࣮ • Prisma 2.x, Blitz • αʔϏεશମΛ JS ͚ͩͰߏஙͯ͠΋ҧ࿨ײͷͳ͍࣌୅

26. 2020ʙ ίωώτ • ಓ۩͕ग़ἧͬͨͷͰͲ͏ӡ༻͢Δ͔Λߟ͑ΔϑΣʔζ • lighthouse-ci Λར༻ͨ͠ύϑΥʔϚϯεܭଌ • Renovate, Sentry

    Λܧଓతʹӡ༻͢ΔͨΊʹͲ͏͢Δ͔ • ෷১͖͠Ε͍ͯͳ͍՝୊Λղܾ • ϑϩϯτΤϯυ͕ಘҙͳϝϯόʔ͕૿͑ͨ • ஌ܙΛग़͠߹ͬͯ՝୊Λ1ͭ1ͭย෇͚͍͖͍ͯͨ

27. 2020ʙ ٕज़બఆ࣌ͷ؍఺ • ։ൃϝϯόʔ૿Ճʹӡ༻͕଱͖͑ΕΔ͔ • ஥͕ؒ૿͑ͯΊͰ͍ͨҰํɺӡ༻໘Ͱͷݟ௚͕͠ඞཁ • গਓ਺ͰΑ͠ͳʹ΍͍ͬͯͨ͜ͱ͕ճΒͳ͘ͳΔ • ͍Α͍Α

    JS = ϑϩϯτΤϯυͷ΋ͷɺͰ͸ͳ͍ • ݁ߏલ͔Βͦ͏͚ͩͲࠓճͷ͸Ϗοά΢ΣʔϒΆ͋͞Δ • ٕज़બఆͷ෯͕޿͕Δνϟϯε

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

29. ࠷ޙʹݴ͍͍ͨ͜ͱ

30. ͳͥ࢖͏ͷ͔ʁ͸ৗʹߟ͑Δ • 4೥΋ϚϚϦͷ Web ৮ͬͯΔͷʹ՝୊͕ਚ͖ͳ͍ • ٕज़͸ਐา͢Δ͠զʑͷ஌ࣝ΋ߋ৽͞ΕΔ • ͱͬͯ΋ָ͍͠ʂ •

    ٕज़બఆ͢Δͱ͖ʹҙ͍ࣝͨ͜͠ͱ • ڵຯຊҐɾ୹ظ໨ઢͰͷҙࢥܾఆ͸Ͳ͔͜Ͱޙչ͢Δ • ͜ͷϥΠϒϥϦΛೖΕΔͱࠓޙͲ͏ϓϩμΫτ͕ྑ͘ͳͬͯ ͍͘ΜͩΖ͏ʁΛߟ͔͑ͯΒೖΕΔ͔൑அ

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