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
コンポーネント再利用ってどこまでするの? / How to reuse components
Search
tipo159
December 14, 2017
Programming
0
880
コンポーネント再利用ってどこまでするの? / How to reuse components
・コンポーネントの再利用の問題点
・Web Componets再利用の問題点
・React Reduxの再利用の考え方
・Elmのコンポーネント論争
tipo159
December 14, 2017
Tweet
Share
More Decks by tipo159
See All by tipo159
Type-safe front-end development using Rust/Rustを使った型安全なフロントエンド開発
tipo159
0
400
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
480
REASONの紹介 / Introductory talk about REASON
tipo159
1
370
PWAで何ができるようになるのか / What does PWA do
tipo159
1
920
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
590
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
470
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
600
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
570
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.2k
Other Decks in Programming
See All in Programming
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
240
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.2k
Alba: Why, How and What's So Interesting
okuramasafumi
0
240
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
100
Rubyでつくるパケットキャプチャツール
ydah
1
570
Azure AI Foundryのご紹介
qt_luigi
1
260
Pulsar2 を雰囲気で使ってみよう
anoken
0
130
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
270
チームリードになって変わったこと
isaka1022
0
130
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
510
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
130
Open source software: how to live long and go far
gaelvaroquaux
0
330
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
34
1.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.4k
A Tale of Four Properties
chriscoyier
158
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A better future with KSS
kneath
238
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
Documentation Writing (for coders)
carmenintech
67
4.6k
Statistics for Hackers
jakevdp
797
220k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Transcript
ίϯϙʔωϯτ࠶ར༻ͬͯͲ͜·Ͱ͢Δͷ? JSΦδαϯ #7 2017.12.14 tipo159
LT༰ • ίϯϙʔωϯτͷ࠶ར༻ͷ • Web Componets • React Redux •
Elmͷίϯϙʔωϯτ૪ • ·ͱΊ 2
࠶ར༻Մೳͳίϯϙʔωϯτͷ • ґଘϥΠϒϥϦ͕૿͑Δ • ίϯϙʔωϯτؒͰґଘϥΠϒϥϦͷόʔδϣϯ͕ҟͳΔ͜ͱ • ඞཁҎ্ʹ൚༻Խ͞Ε͍ͯΔͨΊɼҾ͕ଟ͘ͳΓɼίʔ υαΠζ૿Ճ • npm
react-datepickerͷҾ73छྨ(ؔ7छྨ) • σβΠϯͷ౷Ұ͕ࠔ • Material DesignͷಛఆͷΨΠυϥΠϯʹ४ڌͨ͠ίϯϙʔω ϯτ͚ͩʹݶఆ͢ΕճආՄೳ 3
Web Components • σʔλόΠϯσΟϯά͕ඪ४Խ͞Ε͍ͯͳ͍ͨΊɼPolymer ʹґଘ͢Δίϯϙʔωϯτ͕ଟ͍ • web components.orgʹొ͞Ε͍ͯΔίϯϙʔωϯτ΄ ͱΜͲPolymerʹґଘʢͬ͟ͱݟͨൣғͰશͯʣ •
Polymerͷόʔδϣϯ͞·͟· 4
React Redux • Presentational ComponentsͱContainer Componentsͷ • Container Componentsͷ࠶ར༻ࠔ Presentational
and Container Components https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 5 1SFTFOUBUJPOBM $PNQPOFOUT $POUBJOFS$PNQPOFOUT త ݟͨʢϚʔΫΞοϓɼ ελΠϧʣ ಈ࡞ʢσʔλऔಘɼ 4UBUFߋ৽ʣ 3FEVYͷߟྀ ෆཁ ඞཁ σʔλϦʔυ QSPQT͔ΒϦʔυ 3FEVY4UBUFΛ αϒεΫϥΠϒ σʔλߋ৽ QSPQTͷίʔϧόοΫΛىಈ 3FEVY"DUJPOΛ σΟεύον
Elmͷίϯϙʔωϯτ૪ • ͔ͭͯElmͰίϯϙʔωϯτʢElmͰϞδϡʔϧʣԽ͕ਪ ͞Ε͍͕ͯͨɼݱࡏͰ͖ΔݶΓviewͷؔͰࡁ·͢͜ͱ͕ ਪ͞Ε͍ͯΔ • ίϯϙʔωϯτͷதͷmodel, actionʹΞϓϦέʔγϣϯʹґଘ ͢Δهड़ؚ͕·Εͯ͠·͏ͷͰɼ࠶ར༻͢Δͷviewͷؔͩ ͚ͱ͍͏ׂΓΓ
Elm ͷίϯϙʔωϯτ૪ͱԿ͔ http://jinjor-labo.hatenablog.com/entry/ 2017/05/12/183154 6
·ͱΊ • Viewͷ෦͚ͩͷ࠶ར༻ • ReduxͷPresentational Components • ࣾϓϩδΣΫτͰ࠶ར༻ • ϓϩτλΠϓʹࣾ֎ͷίϯϙʔωϯτΛ༻ͯ͠
ͳ͍͕ɼҡ࣋ཧΛߟ͑ΔͱϓϩμΫγϣϯίʔυʹ͏ͷ ͍͠ • CSSϑϨʔϜϫʔΫͱJavaScriptϑϨʔϜϫʔΫͷΈ߹Θ ͤʹ͍͔ͭͯΒͳ͍ͷͰڭ͍͑ͯͩ͘͞ 7