Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
なぜその技術を使うのか? / Connehito marche online 20201112
Search
dachi023
November 12, 2020
Programming
0
780
なぜその技術を使うのか? / Connehito marche online 20201112
https://connehito.connpass.com/event/193896/
dachi023
November 12, 2020
Tweet
Share
More Decks by dachi023
See All by dachi023
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
100
チーム開発を円滑に進めるためのOSS / Lightning TechTalks 20231102
dachi023
0
400
リモートワークの導入から3ヶ月 / Connehito marche online 20200311
dachi023
2
2.9k
急に大量のHTMLが必要になったこと、ありませんか? / BIT VALLEY INSIDE vol8
dachi023
0
8k
ママリのweb技術の今と未来 / mamari's front-end present and future
dachi023
2
1.4k
2年運用したサービスのフロントをReactで書き換えたい話
dachi023
5
2.1k
beginner_react_flux
dachi023
1
420
エンジニアがUIデザインをしてみた話
dachi023
1
1.3k
Other Decks in Programming
See All in Programming
Vibe Coding の話をしよう
schroneko
14
3.8k
エンジニア向けCursor勉強会 @ SmartHR
yukisnow1823
3
13k
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
8
3.4k
2025年のz-index設計を考える
tak_dcxi
12
4.7k
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
tico88612
0
180
Rubyの!メソッドをちゃんと理解する
alstrocrack
1
320
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
620
医療系ソフトウェアのAI駆動開発
koukimiura
1
120
generative-ai-use-cases(GenU)の推しポイント ~2025年4月版~
hideg
1
410
Storybookの情報をMCPサーバー化する
shota_tech
3
1.2k
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
120
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
dwchiang
0
140
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Visualization
eitanlees
146
16k
Writing Fast Ruby
sferik
628
61k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
The Language of Interfaces
destraynor
158
25k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Documentation Writing (for coders)
carmenintech
71
4.8k
GitHub's CSS Performance
jonrohan
1031
460k
Automating Front-end Workflow
addyosmani
1370
200k
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