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
800
なぜその技術を使うのか? / 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
200
チーム開発を円滑に進めるためのOSS / Lightning TechTalks 20231102
dachi023
0
410
リモートワークの導入から3ヶ月 / Connehito marche online 20200311
dachi023
2
3k
急に大量の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
430
エンジニアがUIデザインをしてみた話
dachi023
1
1.3k
Other Decks in Programming
See All in Programming
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
340
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
130
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
570
TypeScriptのmoduleオプションを改めて整理する
bicstone
4
460
Development of an App for Intuitive AI Learning - Blockly Summit 2025
teba_eleven
0
100
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
150
Using AI Tools Around Software Development
inouehi
0
530
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
130
衛星の軌道をWeb地図上に表示する
sankichi92
0
260
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
1
200
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.1k
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
170
Featured
See All Featured
Docker and Python
trallard
44
3.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How to Ace a Technical Interview
jacobian
276
23k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
2
110
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
770
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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