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
910
コンポーネント再利用ってどこまでするの? / 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
440
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
520
REASONの紹介 / Introductory talk about REASON
tipo159
1
390
PWAで何ができるようになるのか / What does PWA do
tipo159
1
960
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
640
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
510
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
640
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
600
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
Other Decks in Programming
See All in Programming
TanStack DB ~状態管理の新しい考え方~
bmthd
2
340
Langfuseと歩む生成AI活用推進
licux
3
300
A Gopher's Guide to Vibe Coding
danicat
0
170
コンテキストエンジニアリング Cursor編
kinopeee
1
710
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
500
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
720
為你自己學 Python - 冷知識篇
eddie
1
160
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.6k
CSC305 Summer Lecture 05
javiergs
PRO
0
110
AIでLINEスタンプを作ってみた
eycjur
1
200
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Gamification - CAS2011
davidbonilla
81
5.4k
The Invisible Side of Design
smashingmag
301
51k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Designing Experiences People Love
moore
142
24k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Site-Speed That Sticks
csswizardry
10
790
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
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