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

by dachi023

Slide 1

Slide 1 text

ͳͥͦͷٕज़Λ࢖͏ͷ͔ʁ @dachi023

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ࠓ೔ͷຊ୊

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

(ͦͷٕज़Λ) ͳͥ࢖͏ͷ͔ʁ • ݱ୅ͷϑϩϯτΤϯυʹ͸બ୒ࢶ͕ଟ͘ଘࡏ • Angular, React, Vue • Parcel, Rollup, webpack • Etc … • ࣗ਎͕ॴଐ͢Δ૊৫ɺ։ൃ͢ΔϓϩμΫτΛཧղ  ͦͷ্Ͱద੾ͳٕज़બఆΛ͠ଓ͚͍ͯ͘ඞཁ͕͋Δ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

2016ʙ

Slide 9

Slide 9 text

• React ΍ Vue ʹਓʑ͕ັྃ͞Ε͍ͯ͘ • ↑ ʹ࿈ಈͯ͠ jQuery ґଘ͕ঃʑʹݮΔ • ES2015 ͕ਁಁ࢝͠ΊΔɺprototype ͳΜͯͳ͔ͬͨ ※   ※ ΄ͱΜͲҙࣝ͠ͳͯ͘Α͘ͳ͚ͬͨͩͰ͢ • Babel Λ༻͍ͨτϥϯεύΠϧ͕Ұൠతͳख๏ʹ • webpack ͷ୆಄ʹΑΓ Grunt, gulp ͕ਰୀ 2016ʙ มֵظ

Slide 10

Slide 10 text

2016ʙ ίωώτ • ϑϩϯτΤϯυΤϯδχΞͱͯ͠ೖࣾ  લCTOʮϑϩϯτΤϯυ͍͍ײ͡ʹ͓ئ͍͠·͢ʂʯ • Grunt, gulp Λ΍Ίͯ webpack Λ࢖͍࢝Ίͨ  ͍ͭͰʹطଘίʔυΛؾ߹Ͱ CommonJS ରԠ • ESLint ΛೖΕͯνʔϜ։ൃ͕͠΍͘͢ͳͬͨ • ύοέʔδϚωʔδϟΛ npm ͔Β Yarn ʹมߋ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

2017ʙ

Slide 13

Slide 13 text

2017ʙ ઓࠃ࣌୅ ऴྃ • React ΍ Vue Λར༻͢ΔνʔϜ͕૿͖͑ͯͨ • Flux ͕ΞʔΩςΫνϟબఆͷఆ൪ʹ • 2016೥ʹྲྀߦΓ࢝ΊͨϥΠϒϥϦɾπʔϧͷ  ίϛϡχςΟ͕ൃలɺؔ࿈ϥΠϒϥϦ΋ॆ࣮ • Flow, TypeScript ʹΑͬͯ JS Ͱ΋ܕΛҙࣝ࢝͠ΊΔ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

2017ʙ ٕज़બఆ࣌ͷ؍఺ • jQuery ͔ΒͷύϥμΠϜγϑτ • ࢖͑ͳ͍͔Β࢖Θͳ͍ɺͰ͸͍ΒΕͳ͍ • jQuery ͷਓؾ͕Լ߱ؾຯͰ͋Δ͜ͱ͸໌֬ͩͬͨ͠ɺ  ࠓͷ··Ͱ͸·͍ͣͩΖ͏ͳͱࢥͬͨ • ৽͍͜͠ͱ΁ͷνϟϨϯδ • ೖࣾ2೥໨Ͱ༨༟͕ग़͖͔ͯͨ΋͠Εͳ͍ • ܕΛίωώτʹ࣋ͪࠐΜͰͦͷૉ੖Β͠͞ΛޠΓ͍ͨ

Slide 16

Slide 16 text

2018ʙ

Slide 17

Slide 17 text

2018ʙ ͔Ώ͍ॴʹख͕ಧ͘ • Next.js ΍ Nuxt.js Ͱ SSR ͢Δख๏͕ྲྀߦΔ  ͜ΕʹΑͬͯ SEO ΁ͷݒ೦΋෷১ • Gatsby Λ༻͍ͨ React x GraphQL Ͱ SSG ͢Δख๏  ओʹίʔϙϨʔταΠτ΍ϒϩάͰ࢖ΘΕ࢝ΊΔ • styled-components, Emotion ͳͲͷྲྀߦ  CSS-in-JS Λ࠾༻͢Δέʔε͕૿͑ͨ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

2019ʙ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

2020ʙ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

࠷ޙʹݴ͍͍ͨ͜ͱ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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