Slide 1
Slide 1 text
ΠΧϦϯάʹ͓͚Δ
γϯάϧϖʔδΞϓϦέʔγϣϯ
Slide 2
Slide 2 text
id:cockscomb
Ճ౻ਘथ
גࣜձࣾͯͳ
γχΞΞϓϦέʔγϣϯΤϯδχΞ
ΠΧϦϯάͷ5FDI-FBE
Slide 3
Slide 3 text
/JOUFOEP
Slide 4
Slide 4 text
ΠΧϦϯά
w /JOUFOEP4XJUDI0OMJOFΞϓϦ෦ͷαʔϏε
w 4QMBUPPOͷϓϨΠσʔλΛݟΔ͜ͱ͕Ͱ͖Δ
Slide 5
Slide 5 text
࠾༻ٕज़
w ϑϩϯτΤϯυ41"
w 5ZQF4DSJQU
w 3FBDU3FEVY
w ཪଆʹΦʔέετϨʔγϣϯͱͯ͠ͷ"1*αʔόʔ
w 1FSM
w %PDLFSͰಈ͍͍ͯΔ
Slide 6
Slide 6 text
લఏ
w ͳΜͰͰ͖ΔνʔϜ
w 8FCΞϓϦέʔγϣϯ
w J04"OESPJEͷωΠςΟϒΞϓϦ
w 41"ॳΊͯ
w σβΠφʔ͕3FBDU$PNQPOFOUΛ৮ΕΔ
Slide 7
Slide 7 text
w ٕज़બఆ
w 3FBDUͱ3FEVYʹΑΔεςʔτϑϧΞϓϦέʔγϣϯ
w 3FEVY4BHB
w 8FCϖʔδͱͯ͠ͷ41"
Slide 8
Slide 8 text
ٕज़બఆ
Slide 9
Slide 9 text
41"ʹ͢Δཧ༝
w /JOUFOEP4XJUDI0OMJOFΞϓϦͷαʔϏε
w ΞϓϦʹظ͞ΕΔϦονͳମݧ
w J04"OESPJEͷ8FC7JFXͰදࣔͰ͖ΕΑ͍
Slide 10
Slide 10 text
41"ʹ͢Δཧ༝
w αʔϏεͷಛੑ
w ࠶๚͕ଟ͍
ˠΫϥΠΞϯταΠυΩϟογϡͷޮՌ͕ߴ͍
w 17ηογϣϯൺ͕େ͖͍
ˠॳճͷಡΈࠐΈΑΓͦͷޙͷମݧΛॏࢹ
Slide 11
Slide 11 text
Ұൠతʹ41"Λ࠾༻Ͱ͖Δ͔
w 41"ʹ͢ΔϢʔβʔϝϦοτͱ։ൃͷఱṝ
w ఆ͞ΕΔར༻ύλʔϯ͕41"ʹϚον͢Δ͔
w ηογϣϯɺ17ηογϣϯ͕ଟ͚Ε૬ੑ͕͍͍
w ݕࡧ4/4͔ΒͷϏδλʔ͕ଟ͚ΕॳճͷಡΈࠐΈΛૣ͘͢Δ
w αϙʔτରͷϒϥβ
w 4&0ͷॏཁੑ
Slide 12
Slide 12 text
࠷ޙ༐ؾ
w ͍ͥͬͨʹࣗͰͳΜͱ͔͢Δܾҙ
Slide 13
Slide 13 text
3FBDUͱ3FEVYʹΑΔ
εςʔτϑϧΞϓϦέʔγϣϯ
Slide 14
Slide 14 text
εςʔτϑϧΞϓϦέʔγϣϯ
w )551ϦΫΤετʹରͯ͠)551ϨεϙϯεΛฦ͢
ˠεςʔτϨε
w σʔλϕʔεͰӬଓԽ
w ηογϣϯʹΑͬͯ࿈ଓੑΛอͭ
w 41"(6*ΞϓϦέʔγϣϯ
ˠεςʔτϑϧ
Slide 15
Slide 15 text
Component
Props
Component
Component
Component
Component
Component
Virtual
DOM
Virtual
DOM
Virtual
DOM
Props
Props
3FBDU
w ΞϓϦέʔγϣϯ
$PNQPOFOUͷू߹ମ
w $PNQPOFOUೖྗΛݩʹ
৽ͨͳ$PNQPOFOUΛग़ྗ͢Δ
ؔͱΈͳͤΔ
w ࠷ऴతʹ%0.$PNQPOFOUΛ
ग़ྗ͢Δ
Slide 16
Slide 16 text
σʔλϑϩʔ
w 1SPQT
ˠ֎෦͔Βͷೖྗ
w 4UBUFT
ˠ$PNQPOFOUͷঢ়ଶ
w $POUFYU
ˠࢠଙ$PNQPOFOUʹΘΔঢ়ଶ
Slide 17
Slide 17 text
࣌ࠁ
import * as React from 'react';
interface TimeProps {
time: Date,
}
export const Time: React.SFC = ({time}) => {
return ;
};
Slide 18
Slide 18 text
ͭͷ$PNQPOFOU
w 4UBUFMFTT'VODUJPOBM$PNQPOFOU
w 1VSF$PNQPOFOU
w $PNQPOFOU
Slide 19
Slide 19 text
4UBUFMFTT'VODUJPOBM$PNQPOFOU
w ؔ
w ঢ়ଶΛ࣋ͨͳ͍
Component
Props
Component
Component
Props
Slide 20
Slide 20 text
1VSF$PNQPOFOU
w Ϋϥε
w ঢ়ଶΛ࣋ͭ
w 4UBUFTJNNVUBCMFͳΦϒδΣΫτ
Component
Props
Component
Component
Props
States
Slide 21
Slide 21 text
$PNQPOFOU
w Ϋϥε
w ঢ়ଶΛ࣋ͭ
w 4UBUFTJNNVUBCMFͱݶΒͳ͍
Component
Props
Component
Component
Props
States
Slide 22
Slide 22 text
ͭͷ$PNQPOFOU
w 4UBUFMFTT'VODUJPOBM$PNQPOFOU͕࠷୯७
w 1VSF$PNQPOFOUΛ͏͜ͱ͕ଟ͍
Slide 23
Slide 23 text
*NNVUBCMF
w σʔλ͕JNNVUBCMFͰ͋Δํ͕߹͕͍͍
w ݹ͍ͱ৽͍͕͠ಉ͡ͳΒԿ͠ͳ͍͍ͯ͘
w *NNVUBCMFͳΦϒδΣΫτ===ͰൺֱͰ͖Δ
Slide 24
Slide 24 text
*NNVUBCMF
w 0CKFDUBTTJHO
const newObj = Object.assign({}, oldObj, { key: value })
w 4QSFBE0QFSBUPS
const newObj = { ...oldObj, key: value }
w *NNVUBCMFKT
Slide 25
Slide 25 text
Store
Reducer State
Action dispatch subscribe
3FEVY
w ୯Ұͷ4UPSFʹશͯͷঢ়ଶ
w TVCTDSJCFͰมԽΛݕͰ͖Δ
w 0CTFSWFSύλʔϯ
w ঢ়ଶΛม͍͑ͨͱ͖
4UPSFʹ"DUJPOΛૹΔ
w 3FEVDFS͕"DUJPOʹԠͯ͡
ঢ়ଶΛมߋ͢Δ
Slide 26
Slide 26 text
"DUJPOϝιουσΟεύον
w "DUJPOϝιουͱύϥϝʔλΛ߹Θͤͨͷ
w "DUJPO$SFBUPSͱݺΕΔϑΝΫτϦʔؔͰ࡞Δ
w 3FEVDFS4UPSFΛมߋ͢ΔͨΊͷϨγʔό
w DPNCJOF3FEVDFSTͰෳͷ3FEVDFSΛΈ߹Θͤͯ
4UPSFΛׂ౷࣏͢Δ
Slide 27
Slide 27 text
3FBDU3FEVY
Component
Component
Component
Component
Virtual
DOM
Virtual
DOM
Virtual
DOM
Props
Props
Component
Component
Slide 28
Slide 28 text
3FBDU3FEVY
Connected
Provider
Connected
Component
Component
Component
Component
Virtual
DOM
Virtual
DOM
Virtual
DOM
Props
Props
Component
Component
Slide 29
Slide 29 text
3FBDU3FEVY
w 1SPWJEFS͕DPOUFYUͰ4UPSFΛࢠଙ$PNQPOFOUʹఏڙ
w DPOOFDUؔͰ$PNQPOFOUΛ4UPSFͱଓ
w 4UPSFΛTVCTDSJCFͯ͠1SPQTʹม͢Δ
w ΠϕϯτΛ"DUJPOͱͯ͠4UPSFʹ͑Δ
w ˠ%*
Slide 30
Slide 30 text
࣌ࠁ
import * as React from 'react';
interface TimeProps {
time: Date,
}
export const Time: React.SFC = ({time}) => {
return ;
};
Slide 31
Slide 31 text
࣌ࠁ
import * as React from 'react';
import {connect} from 'react-redux';
interface TimeProps {
time: Date,
}
const Time: React.SFC = ({time}) => {
return ;
};
export default connect(state => ({ time: state.time }))(Time);
Slide 32
Slide 32 text
3FEVY
w ΞϓϦέʔγϣϯશମͷঢ়ଶ
w 0CTFSWFSύλʔϯͱ%*
w 4UPSFͷઃܭ͕ॏཁ
w 3FEVDFSͷΈ߹ΘͤͰׂ౷࣏
w Կ͔3FEVYͷ4UPSFʹೖΕΔඞཁͳ͍
Slide 33
Slide 33 text
8FC"1*ͷϨεϙϯε
w 3FEVYͷ4UPSFʹͲ͏อ࣋͢Δͷ͔
w ϦιʔεͷεςʔτϚγϯ
w ະऔಘɾ௨৴தɾऔಘࡁΈɾऔಘࣦഊ
w RemoteResource
Slide 34
Slide 34 text
3FNPUF3FTPVSDF5
&
empty pending resolved
failed
request succeeded
failed
reload
reload
Slide 35
Slide 35 text
3FNPUF3FTPVSDF5
&
w latestValueͱͯ͠࠷ޙͷΛอ͓࣋ͯ͘͠
w Ϧϩʔυதʹ͕ফ͑ͳ͍
w औಘʹޭͨ࣌͠ࠁอ͓࣋ͯ͘͠ͱศར
w ߴ֊ؔ
RemoteResource.map((T) -> U) -> RemoteResource
Slide 36
Slide 36 text
3FNPUF3FTPVSDF5
&
enum State {
EMPTY = "empty",
PENDING = "pending",
RESOLVED = "resolved",
FAILED = "failed",
}
abstract class RemoteResource {
abstract state: State;
abstract latestValue: T | null;
abstract error: E | null;
}
Slide 37
Slide 37 text
3FNPUF3FTPVSDF5
&
w ݱࡏͷঢ়ଶʹΑΒͣ࣍ͷঢ়ଶΛද͢Έ࡞Δ
RemoteResource.apply(Next) -> RemoteResource
w "DUJPOʹNext͚ͩ࣋ͨͤΔ
w 3FEVDFS͕apply͢Δ
Slide 38
Slide 38 text
3FEVY4BHB
Slide 39
Slide 39 text
3FEVY
w 3FEVYঢ়ଶͷཧʹಛԽ͍ͯ͠Δ
w ࡞༻
w ݱ࣮ͷΞϓϦέʔγϣϯ෭࡞༻Λ࣋ͭ
Slide 40
Slide 40 text
3FEVY4BHB
w 3FEVYNJEEMFXBSF
w ෭࡞༻ඇಉظੑΛղܾ͢Δ
w (FOFSBUPSGVODUJPO
Slide 41
Slide 41 text
࣌ࠁ
const updateTime = createAction('UPDATE_TIME',
(time: Date) => ({ time: time }));
const timeReducer = handleAction(updateTime,
(state, action) => action.payload!.time, new Date() );
function * ticktack() {
while (true) {
yield put(updateTime(new Date()));
yield delay(1000);
}
}
function * rootSaga() {
yield all([
fork(ticktack),
]);
}
Slide 42
Slide 42 text
࣌ࠁ
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
combineReducers({
time: timeReducer,
}),
applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(rootSaga);
Slide 43
Slide 43 text
࣌ࠁ
import * as React from 'react';
import {connect} from 'react-redux';
interface TimeProps {
time: Date,
}
const Time: React.SFC = ({time}) => {
return ;
};
export default connect(state => ({ time: state.time }))(Time);
Slide 44
Slide 44 text
3FEVY4BHB
w 8FC"1*ͷΞΫηε
w takeF⒎FDUͰGetSomeRequested"DUJPOΛͭ
w ϦΫΤετ͢Δ
w putF⒎FDUͰSomeRecieved"DUJPOΛ͛Δ
Slide 45
Slide 45 text
8FCϖʔδͱͯ͠ͷ41"
Slide 46
Slide 46 text
8FCϖʔδͱͯ͠ͷ41"
w 41"8FCϒϥβͰಈ࡞͢Δ
w 8FCϒϥβʹ8FCಛ༗ͷࣄ͕͋Δ
w 63-
w )JTUPSZ
Slide 47
Slide 47 text
63-
w 3FBDU3PVUFSW
w શͯͷϖʔδʹ63-ΛׂΓৼΔ
w MPDBUJPOͷมԽʹԠͯ͡$PNQPOFOUΛΓସ͑Δ
w ։ൃதʹϦϩʔυͰ͖ͯศར
w (PPHMF"OBMZUJDTͳͲͱ૬ੑ͕Α͍
Slide 48
Slide 48 text
)JTUPSZ
w ϒϥβͷʮΔʯલͷॴʹΔ
w φϏήʔγϣϯͷʮΔʯϘλϯ
w ҙຯ্ͷ্Ґ֊ʹͬͯ΄͍͠
w ͦ͜Ͱ͞ΒʹϒϥβͷʮΔʯΛԡͨ͠Βʁ
Δ
Slide 49
Slide 49 text
)JTUPSZ
w ʮΔʯઌ͕લͷϖʔδͳΒ
window.history.back()
w ʮΔʯઌ͕લͷϖʔδͰͳ͚Ε
window.history.replaceState()
A1 A2 A3 B1 B2 C1 C2
A1 A2 B2
Slide 50
Slide 50 text
)JTUPSZ
w MPDBUJPOʹIJTUPSZTUBUFؚΊΔ
w QVTI4UBUFͰIJTUPSZTUBUFʹલ
ͷMPDBUJPOΛอଘ͢Δ
w IJTUPSZTUBUFʮΔʯʮਐΉʯ
Ͱ෮ݩ͞ΕΔ
w ৗʹલͷϖʔδ͕ಘΒΕΔ
export interface Location {
pathname: Pathname;
search: Search;
state: LocationState;
hash: Hash;
key: LocationKey;
}
window.history.pushState({
lastLocation: location,
}, "A2", "/a/2");
Slide 51
Slide 51 text
·ͱΊ
Slide 52
Slide 52 text
w 41"(6*ΞϓϦέʔγϣϯ
w ঢ়ଶͷཧ͕ॏཁ
w 3FBDU
3FEVYͳͲΛ͏·͘͏
w ߴͳϢʔβʔΠϯλʔϑΣʔεΛ࣮ݱͰ͖Δ