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

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

Avatar for dachi023 dachi023
November 12, 2020

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

Avatar for dachi023

dachi023

November 12, 2020
Tweet

More Decks by dachi023

Other Decks in Programming

Transcript

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

    Rollup, webpack • Etc … • ࣗ਎͕ॴଐ͢Δ૊৫ɺ։ൃ͢ΔϓϩμΫτΛཧղ
 ͦͷ্Ͱద੾ͳٕज़બఆΛ͠ଓ͚͍ͯ͘ඞཁ͕͋Δ
  2. • React ΍ Vue ʹਓʑ͕ັྃ͞Ε͍ͯ͘ • ↑ ʹ࿈ಈͯ͠ jQuery ґଘ͕ঃʑʹݮΔ

    • ES2015 ͕ਁಁ࢝͠ΊΔɺprototype ͳΜͯͳ͔ͬͨ ※ 
 ※ ΄ͱΜͲҙࣝ͠ͳͯ͘Α͘ͳ͚ͬͨͩͰ͢ • Babel Λ༻͍ͨτϥϯεύΠϧ͕Ұൠతͳख๏ʹ • webpack ͷ୆಄ʹΑΓ Grunt, gulp ͕ਰୀ 2016ʙ มֵظ
  3. 2016ʙ ίωώτ • ϑϩϯτΤϯυΤϯδχΞͱͯ͠ೖࣾ
 લCTOʮϑϩϯτΤϯυ͍͍ײ͡ʹ͓ئ͍͠·͢ʂʯ • Grunt, gulp Λ΍Ίͯ webpack

    Λ࢖͍࢝Ίͨ
 ͍ͭͰʹطଘίʔυΛؾ߹Ͱ CommonJS ରԠ • ESLint ΛೖΕͯνʔϜ։ൃ͕͠΍͘͢ͳͬͨ • ύοέʔδϚωʔδϟΛ npm ͔Β Yarn ʹมߋ
  4. 2016ʙ ٕज़બఆ࣌ͷ؍఺ • ES5 ϕʔεͷίʔυͰͷ։ൃͮ͠Β͕͞ݦஶʹ • Babel, webpack ʹΑͬͯ ES2015

    ه๏Λ֫ಘ • require-exports ରԠͰϑΝΠϧؒͷ΍ΓͱΓ͕վળ • ίʔσΟϯάʹடংΛ΋ͨΒ͢ ESLint • ݸਓʹڧ͘ґଘͨ͠ίʔσΟϯάελΠϧ͔Βͷ୤٫ • jQuery Λ΍Ίͯ React Λ࢖͍͔͕ͨͬͨ
 νʔϜͱͯ͠४උ͕଍Γͳ͍ͱࢥ͍ཌ೥ʹ࣋ͪӽ͠
  5. 2017ʙ ઓࠃ࣌୅ ऴྃ • React ΍ Vue Λར༻͢ΔνʔϜ͕૿͖͑ͯͨ • Flux

    ͕ΞʔΩςΫνϟબఆͷఆ൪ʹ • 2016೥ʹྲྀߦΓ࢝ΊͨϥΠϒϥϦɾπʔϧͷ
 ίϛϡχςΟ͕ൃలɺؔ࿈ϥΠϒϥϦ΋ॆ࣮ • Flow, TypeScript ʹΑͬͯ JS Ͱ΋ܕΛҙࣝ࢝͠ΊΔ
  6. 2017ʙ ίωώτ • React (Flux) Λಋೖ
 ࣾ಺ͷΤϯδχΞ޲͚ʹษڧձΛ΍ΔͳͲͯ͠෍ڭ • ίϯϙʔωϯτࢦ޲ͳ UI

    ͷߏங • Flux ʹΑͬͯෳࡶͳσʔλϑϩʔ͕ղফ • Flow Λಋೖ • ܕͷૉ੖Β͠͞Λ࠶ೝࣝ • ౰࣌ɺPHP Ұ୒ͩͬͨͨΊ͋·ΓೃછΜͰͳ͔͔ͬͨ΋
  7. 2017ʙ ٕज़બఆ࣌ͷ؍఺ • jQuery ͔ΒͷύϥμΠϜγϑτ • ࢖͑ͳ͍͔Β࢖Θͳ͍ɺͰ͸͍ΒΕͳ͍ • jQuery ͷਓؾ͕Լ߱ؾຯͰ͋Δ͜ͱ͸໌֬ͩͬͨ͠ɺ


    ࠓͷ··Ͱ͸·͍ͣͩΖ͏ͳͱࢥͬͨ • ৽͍͜͠ͱ΁ͷνϟϨϯδ • ೖࣾ2೥໨Ͱ༨༟͕ग़͖͔ͯͨ΋͠Εͳ͍ • ܕΛίωώτʹ࣋ͪࠐΜͰͦͷૉ੖Β͠͞ΛޠΓ͍ͨ
  8. 2018ʙ ͔Ώ͍ॴʹख͕ಧ͘ • Next.js ΍ Nuxt.js Ͱ SSR ͢Δख๏͕ྲྀߦΔ
 ͜ΕʹΑͬͯ

    SEO ΁ͷݒ೦΋෷১ • Gatsby Λ༻͍ͨ React x GraphQL Ͱ SSG ͢Δख๏
 ओʹίʔϙϨʔταΠτ΍ϒϩάͰ࢖ΘΕ࢝ΊΔ • styled-components, Emotion ͳͲͷྲྀߦ
 CSS-in-JS Λ࠾༻͢Δέʔε͕૿͑ͨ
  9. 2018ʙ ίωώτ • ৽نΞϓϦͰͷ React ࠾༻͕ඪ४Խ • ͋Θͤͯशख़౓΋޲্͍ͤͯ͘͞ • @connehito/eslint-config

    Λެ։ • ࣾ಺ඪ४ԽͷऔΓ૊Έͷ1ͭ • Storybook ͷӡ༻Λ։࢝ • Greenkeeper ͰϥΠϒϥϦͷόʔδϣϯΛ௥͍࢝ΊΔ • ׂͱૣ͍ஈ֊Ͱ௥͍͚ͭͳ͘ͳΓஅ೦ (ͦͯ͠ dependabot ΁)
  10. 2018ʙ ٕज़બఆ࣌ͷ؍఺ • React Λ࢖͍ଓ͚͍ͯ͘ɺͱ͍͏൑அ • ౰໘͸ഇΕ͍͔ͯͳ͍ͩΖ͏ • ΑΓ࢖͍͜ͳͯ͠։ൃޮ཰Λ্͍͛ͨ •

    νʔϜͰ҆ఆͨ͠։ൃΛ͢Δ • ίʔσΟϯάελΠϧͷࣾ಺౷Ұ • ίϯϙʔωϯτͷՄࢹԽɾڞ༗ʹΑͬͯೝࣝΛἧ͑Δ • ఆظతͳόʔδϣϯΞοϓ΁ͷ௅ઓ
  11. 2019ʙ ग़ἧͬͨ • TypeScript 3.x ͕ੈʹਁಁ͠͸͡ΊΔ (ϦϦʔε͸ 2018) • TS

    ͸σϑΝΫτελϯμʔυͱ͍͑Δ͘Β͍ʹ • React ʹ Hooks ͕΍͖ͬͯͨ • ؔ਺ίϯϙʔωϯτͰͷ࣮૷͕౰ͨΓલʹͳΔ • େཻͷϑϨʔϜϫʔΫ΍ϥΠϒϥϦͷొ৔ɾ୆಄͸
 ͦ͜·Ͱܹ͘͠ͳ͘ɺ੒ख़ͨ͠งғؾ
  12. 2019ʙ ίωώτ • Hooks Λशಘ͠ Class ϕʔεͷίʔυ͔ΒঃʑʹҠߦ • Atomic Design

    ϕʔεͷσΟϨΫτϦߏ੒Ͱ։ൃ • ίϯϙʔωϯτͷαΠζײΛΑΓҙࣝ • Greenkeeper ͔Β dependabot ΁ͷҠߦ • ͦͯ͠ Renovate ΁ɾɾɾ • Next.js Λ࠾༻ɺίωώτࣄۀॳͷ React Ͱ SSR
  13. 2019ʙ ٕज़બఆ࣌ͷ؍఺ • ৽͍͠ཁૉΛऔΓೖΕ͍ͯ͘ • Hooks ศར → ࣾ಺ʹਁಁͤ͞ΔɾྲྀߦΒͤΔ •

    ࠓ͋ΔίʔυΛΑΓྑ͍ํ޲ʹਐΊΔͨΊͷ౒ྗ • όʔδϣϯΞοϓӡ༻ʹເΛݟ͗͢Δ • Կճ৐Γ׵͑ΔΜͩΖ͏ɾɾɾ
  14. 2020ʙ ੔͑Δ೥ • ϢʔβʔϓϥΠόγʔɾηΩϡϦςΟͷॏཁࢹ • User-Agent, 3rd Party Cookie ͷ੍ݶͷܭը

    • Next.js ʹ໨ۄػೳ͕౥ࡌ͞ΕΔ • Fast Refresh, Incremental Static Regeneration • Node.js όοΫΤϯυ΋ॆ࣮ • Prisma 2.x, Blitz • αʔϏεશମΛ JS ͚ͩͰߏஙͯ͠΋ҧ࿨ײͷͳ͍࣌୅
  15. 2020ʙ ίωώτ • ಓ۩͕ग़ἧͬͨͷͰͲ͏ӡ༻͢Δ͔Λߟ͑ΔϑΣʔζ • lighthouse-ci Λར༻ͨ͠ύϑΥʔϚϯεܭଌ • Renovate, Sentry

    Λܧଓతʹӡ༻͢ΔͨΊʹͲ͏͢Δ͔ • ෷১͖͠Ε͍ͯͳ͍՝୊Λղܾ • ϑϩϯτΤϯυ͕ಘҙͳϝϯόʔ͕૿͑ͨ • ஌ܙΛग़͠߹ͬͯ՝୊Λ1ͭ1ͭย෇͚͍͖͍ͯͨ
  16. ͳͥ࢖͏ͷ͔ʁ͸ৗʹߟ͑Δ • 4೥΋ϚϚϦͷ Web ৮ͬͯΔͷʹ՝୊͕ਚ͖ͳ͍ • ٕज़͸ਐา͢Δ͠զʑͷ஌ࣝ΋ߋ৽͞ΕΔ • ͱͬͯ΋ָ͍͠ʂ •

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