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

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

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