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
520
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
XP, Testing and ninja testing ZOZ5
m_seki
3
810
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
680
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
870
Pythonに漸進的に型をつける
nealle
1
120
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
1
160
SODA - FACT BOOK(JP)
sodainc
1
8.6k
One Enishi After Another
snoozer05
PRO
0
150
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
240
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
620
AI Agent 時代的開發者生存指南
eddie
4
2.1k
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
6
4k
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
GitHub's CSS Performance
jonrohan
1032
470k
KATA
mclloyd
PRO
32
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Pragmatic Product Professional
lauravandoore
36
7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Leading Effective Engineering Teams in the AI Era
addyosmani
7
580
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Music & Morning Musume
bryan
46
6.9k
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