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
630
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
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
220
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
740
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
250
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
110
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
140
DataformでPythonする / dataform-de-python
snhryt
0
150
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
270
kiroでゲームを作ってみた
iriikeita
0
140
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
260
Vibe coding コードレビュー
kinopeee
0
400
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Code Review Best Practice
trishagee
69
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Adopting Sorbet at Scale
ufuk
77
9.5k
GitHub's CSS Performance
jonrohan
1031
460k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
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