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
530
REASONの紹介 / Introductory talk about REASON
tipo159
1
390
PWAで何ができるようになるのか / What does PWA do
tipo159
1
970
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
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
100
Serena MCPのすすめ
wadakatu
4
880
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
470
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
370
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
910
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
420
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
3
180
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
KATA
mclloyd
32
15k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Why Our Code Smells
bkeepers
PRO
339
57k
Docker and Python
trallard
46
3.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Code Review Best Practice
trishagee
72
19k
Embracing the Ebb and Flow
colly
88
4.8k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Practical Orchestrator
shlominoach
190
11k
Documentation Writing (for coders)
carmenintech
75
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