Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
なぜその技術を使うのか? / Connehito marche online 20201112
dachi023
November 12, 2020
Programming
0
350
なぜその技術を使うのか? / Connehito marche online 20201112
https://connehito.connpass.com/event/193896/
dachi023
November 12, 2020
Tweet
Share
More Decks by dachi023
See All by dachi023
dachi023
2
2k
dachi023
0
5.5k
dachi023
2
940
dachi023
5
1.7k
dachi023
1
270
dachi023
1
930
Other Decks in Programming
See All in Programming
kgmyshin
1
440
pirosikick
4
930
konstantin_diener
0
130
watilde
0
250
christianliebel
PRO
0
130
grapecity_dev
0
170
lovee
2
130
mfunaki
1
770
maito1201
1
820
yasaichi
30
7.6k
grapecity_dev
0
170
legalforce
PRO
0
610
Featured
See All Featured
chrislema
173
14k
orderedlist
PRO
328
36k
lauravandoore
437
28k
jlugia
216
16k
sugarenia
233
850k
matthewcrist
73
7.5k
malarkey
393
61k
lynnandtonic
272
16k
destraynor
223
47k
smashingmag
283
47k
keithpitt
401
20k
jacobian
255
20k
Transcript
ͳͥͦͷٕज़Λ͏ͷ͔ʁ @dachi023
Ξμν Ϧϣ GitHub: @dachi023 Twitter: @dachi_023 Blog: https://dachi.work ίωώτגࣜձࣾͷϚϚϦؔ࿈ͷࣄۀͰ ϦʔυΤϯδχΞΛ͍ͬͯ·͢
ࠓͷຊ
ॻ੶͕ൃച͞Εͨ • ࢲͷ୲αϯϓϧίʔυͱͦͷղઆύʔτ • ࣥචʹ͋ͨΓɺԿΛॻ͔͘ɾ͑Δ͔Λߟ͑ͨ • ʮͳͥ͏ͷ͔ʁʯΛେࣄʹ͢Δ͜ͱʹͨ͠ • ࣅͨΑ͏ͳ༰Λϒϩάʹॻ͍ͨ https://dachi.work/posts/2020-10-09_publish-tech-book
(ͦͷٕज़Λ) ͳͥ͏ͷ͔ʁ • ݱͷϑϩϯτΤϯυʹબࢶ͕ଟ͘ଘࡏ • Angular, React, Vue • Parcel,
Rollup, webpack • Etc … • ͕ࣗॴଐ͢Δ৫ɺ։ൃ͢ΔϓϩμΫτΛཧղ ͦͷ্Ͱదͳٕज़બఆΛ͠ଓ͚͍ͯ͘ඞཁ͕͋Δ
దͳٕज़બఆΛ͢Δʹ • ৄ͘͠ॻ੶Λߪೖ̓͠ • ࣮ࡍʹͲΜͳέʔεͰҙࢥܾఆ͍ͯ͘͠ͷ͔ʁ • ຊൃදͰίωώτͷϓϩμΫτ։ൃͰར༻͖ͯͨ͠ ٕज़Λʮͳͥͬͨͷ͔ʯΛަ͑ͯղઆ
2016·ͰΓ·͢ • ੲ + ٕज़બఆ࣌ʹߟ͍͑ͯͨ͜ͱ • ࣌ΛΔਓջ͔͍͠ؾ࣋ͪͰݟΕΔ͔ • ͱ͜ΖͲ͜ΖهԱ͕ᐆດ •
Ͱ͍͍ͩͨ߹ͬͯΔ (ͣ)
2016ʙ
• React Vue ʹਓʑ͕ັྃ͞Ε͍ͯ͘ • ↑ ʹ࿈ಈͯ͠ jQuery ґଘ͕ঃʑʹݮΔ
• ES2015 ͕ਁಁ࢝͠ΊΔɺprototype ͳΜͯͳ͔ͬͨ ※ ※ ΄ͱΜͲҙࣝ͠ͳͯ͘Α͘ͳ͚ͬͨͩͰ͢ • Babel Λ༻͍ͨτϥϯεύΠϧ͕Ұൠతͳख๏ʹ • webpack ͷ಄ʹΑΓ Grunt, gulp ͕ਰୀ 2016ʙ มֵظ
2016ʙ ίωώτ • ϑϩϯτΤϯυΤϯδχΞͱͯ͠ೖࣾ લCTOʮϑϩϯτΤϯυ͍͍ײ͡ʹ͓ئ͍͠·͢ʂʯ • Grunt, gulp ΛΊͯ webpack
Λ͍࢝Ίͨ ͍ͭͰʹطଘίʔυΛؾ߹Ͱ CommonJS ରԠ • ESLint ΛೖΕͯνʔϜ։ൃ͕͘͢͠ͳͬͨ • ύοέʔδϚωʔδϟΛ npm ͔Β Yarn ʹมߋ
2016ʙ ٕज़બఆ࣌ͷ؍ • ES5 ϕʔεͷίʔυͰͷ։ൃͮ͠Β͕͞ݦஶʹ • Babel, webpack ʹΑͬͯ ES2015
ه๏Λ֫ಘ • require-exports ରԠͰϑΝΠϧؒͷΓͱΓ͕վળ • ίʔσΟϯάʹடংΛͨΒ͢ ESLint • ݸਓʹڧ͘ґଘͨ͠ίʔσΟϯάελΠϧ͔Βͷ٫ • jQuery ΛΊͯ React Λ͍͔͕ͨͬͨ νʔϜͱͯ͠४උ͕Γͳ͍ͱࢥ͍ཌʹ࣋ͪӽ͠
2017ʙ
2017ʙ ઓࠃ࣌ ऴྃ • React Vue Λར༻͢ΔνʔϜ͕૿͖͑ͯͨ • Flux
͕ΞʔΩςΫνϟબఆͷఆ൪ʹ • 2016ʹྲྀߦΓ࢝ΊͨϥΠϒϥϦɾπʔϧͷ ίϛϡχςΟ͕ൃలɺؔ࿈ϥΠϒϥϦॆ࣮ • Flow, TypeScript ʹΑͬͯ JS ͰܕΛҙࣝ࢝͠ΊΔ
2017ʙ ίωώτ • React (Flux) Λಋೖ ࣾͷΤϯδχΞ͚ʹษڧձΛΔͳͲͯ͠ڭ • ίϯϙʔωϯτࢦͳ UI
ͷߏங • Flux ʹΑͬͯෳࡶͳσʔλϑϩʔ͕ղফ • Flow Λಋೖ • ܕͷૉΒ͠͞Λ࠶ೝࣝ • ࣌ɺPHP ҰͩͬͨͨΊ͋·ΓೃછΜͰͳ͔͔ͬͨ
2017ʙ ٕज़બఆ࣌ͷ؍ • jQuery ͔ΒͷύϥμΠϜγϑτ • ͑ͳ͍͔ΒΘͳ͍ɺͰ͍ΒΕͳ͍ • jQuery ͷਓؾ͕Լ߱ؾຯͰ͋Δ͜ͱ໌֬ͩͬͨ͠ɺ
ࠓͷ··Ͱ·͍ͣͩΖ͏ͳͱࢥͬͨ • ৽͍͜͠ͱͷνϟϨϯδ • ೖࣾ2Ͱ༨༟͕ग़͖͔ͯͨ͠Εͳ͍ • ܕΛίωώτʹ࣋ͪࠐΜͰͦͷૉΒ͠͞ΛޠΓ͍ͨ
2018ʙ
2018ʙ ͔Ώ͍ॴʹख͕ಧ͘ • Next.js Nuxt.js Ͱ SSR ͢Δख๏͕ྲྀߦΔ ͜ΕʹΑͬͯ
SEO ͷݒ೦১ • Gatsby Λ༻͍ͨ React x GraphQL Ͱ SSG ͢Δख๏ ओʹίʔϙϨʔταΠτϒϩάͰΘΕ࢝ΊΔ • styled-components, Emotion ͳͲͷྲྀߦ CSS-in-JS Λ࠾༻͢Δέʔε͕૿͑ͨ
2018ʙ ίωώτ • ৽نΞϓϦͰͷ React ࠾༻͕ඪ४Խ • ͋Θͤͯशख़্͍ͤͯ͘͞ • @connehito/eslint-config
Λެ։ • ࣾඪ४ԽͷऔΓΈͷ1ͭ • Storybook ͷӡ༻Λ։࢝ • Greenkeeper ͰϥΠϒϥϦͷόʔδϣϯΛ͍࢝ΊΔ • ׂͱૣ͍ஈ֊Ͱ͍͚ͭͳ͘ͳΓஅ೦ (ͦͯ͠ dependabot )
2018ʙ ٕज़બఆ࣌ͷ؍ • React Λ͍ଓ͚͍ͯ͘ɺͱ͍͏அ • ໘ഇΕ͍͔ͯͳ͍ͩΖ͏ • ΑΓ͍͜ͳͯ͠։ൃޮΛ্͍͛ͨ •
νʔϜͰ҆ఆͨ͠։ൃΛ͢Δ • ίʔσΟϯάελΠϧͷࣾ౷Ұ • ίϯϙʔωϯτͷՄࢹԽɾڞ༗ʹΑͬͯೝࣝΛἧ͑Δ • ఆظతͳόʔδϣϯΞοϓͷઓ
2019ʙ
2019ʙ ग़ἧͬͨ • TypeScript 3.x ͕ੈʹਁಁ͠͡ΊΔ (ϦϦʔε 2018) • TS
σϑΝΫτελϯμʔυͱ͍͑Δ͘Β͍ʹ • React ʹ Hooks ͕͖ͬͯͨ • ؔίϯϙʔωϯτͰͷ࣮͕ͨΓલʹͳΔ • େཻͷϑϨʔϜϫʔΫϥΠϒϥϦͷొɾ಄ ͦ͜·Ͱܹ͘͠ͳ͘ɺख़ͨ͠งғؾ
2019ʙ ίωώτ • Hooks Λशಘ͠ Class ϕʔεͷίʔυ͔ΒঃʑʹҠߦ • Atomic Design
ϕʔεͷσΟϨΫτϦߏͰ։ൃ • ίϯϙʔωϯτͷαΠζײΛΑΓҙࣝ • Greenkeeper ͔Β dependabot ͷҠߦ • ͦͯ͠ Renovate ɾɾɾ • Next.js Λ࠾༻ɺίωώτࣄۀॳͷ React Ͱ SSR
2019ʙ ٕज़બఆ࣌ͷ؍ • ৽͍͠ཁૉΛऔΓೖΕ͍ͯ͘ • Hooks ศར → ࣾʹਁಁͤ͞ΔɾྲྀߦΒͤΔ •
ࠓ͋ΔίʔυΛΑΓྑ͍ํʹਐΊΔͨΊͷྗ • όʔδϣϯΞοϓӡ༻ʹເΛݟ͗͢Δ • ԿճΓ͑ΔΜͩΖ͏ɾɾɾ
2020ʙ
2020ʙ ͑Δ • ϢʔβʔϓϥΠόγʔɾηΩϡϦςΟͷॏཁࢹ • User-Agent, 3rd Party Cookie ͷ੍ݶͷܭը
• Next.js ʹۄػೳ͕ࡌ͞ΕΔ • Fast Refresh, Incremental Static Regeneration • Node.js όοΫΤϯυॆ࣮ • Prisma 2.x, Blitz • αʔϏεશମΛ JS ͚ͩͰߏஙͯ͠ҧײͷͳ͍࣌
2020ʙ ίωώτ • ಓ۩͕ग़ἧͬͨͷͰͲ͏ӡ༻͢Δ͔Λߟ͑ΔϑΣʔζ • lighthouse-ci Λར༻ͨ͠ύϑΥʔϚϯεܭଌ • Renovate, Sentry
Λܧଓతʹӡ༻͢ΔͨΊʹͲ͏͢Δ͔ • ১͖͠Ε͍ͯͳ͍՝Λղܾ • ϑϩϯτΤϯυ͕ಘҙͳϝϯόʔ͕૿͑ͨ • ܙΛग़͠߹ͬͯ՝Λ1ͭ1ͭย͚͍͖͍ͯͨ
2020ʙ ٕज़બఆ࣌ͷ؍ • ։ൃϝϯόʔ૿Ճʹӡ༻͕͖͑ΕΔ͔ • ͕ؒ૿͑ͯΊͰ͍ͨҰํɺӡ༻໘Ͱͷݟ͕͠ඞཁ • গਓͰΑ͠ͳʹ͍ͬͯͨ͜ͱ͕ճΒͳ͘ͳΔ • ͍Α͍Α
JS = ϑϩϯτΤϯυͷͷɺͰͳ͍ • ݁ߏલ͔Βͦ͏͚ͩͲࠓճͷϏοάΣʔϒΆ͋͞Δ • ٕज़બఆͷ෯͕͕Δνϟϯε
Ҏ্ɺ5ͷ ৼΓฦΓͰͨ͠
࠷ޙʹݴ͍͍ͨ͜ͱ
ͳͥ͏ͷ͔ʁৗʹߟ͑Δ • 4ϚϚϦͷ Web ৮ͬͯΔͷʹ՝͕ਚ͖ͳ͍ • ٕज़ਐา͢Δ͠զʑͷࣝߋ৽͞ΕΔ • ͱָ͍ͬͯ͠ʂ •
ٕज़બఆ͢Δͱ͖ʹҙ͍ࣝͨ͜͠ͱ • ڵຯຊҐɾظઢͰͷҙࢥܾఆͲ͔͜Ͱޙչ͢Δ • ͜ͷϥΠϒϥϦΛೖΕΔͱࠓޙͲ͏ϓϩμΫτ͕ྑ͘ͳͬͯ ͍͘ΜͩΖ͏ʁΛߟ͔͑ͯΒೖΕΔ͔அ
ʲPRʳϑϩϯτΤϯυ։ൃೖ ϓϩϑΣογϣφϧͳ ։ൃπʔϧͱઃܭɾ࣮ https://www.shuwasystem.co.jp/book/ 9784798061771.html