React v16 and beyond React Fiber

by koba04

Slide 1

Slide 1 text

3FBDUWBOECFZPOE3FBDU'JCFS )5.-$POGFSFODF !LPCB

Slide 2

Slide 2 text

!LPCB

Slide 3

Slide 3 text

!LPCB

Slide 4

Slide 4 text

w 3FBDUWͰͷมߋ఺ w 3FBDU'JCFS w 8IBU w 8IZ w )PX "HFOEB

Slide 5

Slide 5 text

3FBDUW

Slide 6

Slide 6 text

w ໿೥ͿΓͷϝδϟʔόʔδϣϯΞοϓ w WͷϦϦʔε͸ɺ w ޓ׵ੑΛอͪͳ͕Βͷ಺෦࣮૷ͷॻ͖׵͑ˠ3FBDU'JCFS w WΛ࢖͍ͬͯΕ͹εϜʔζʹΞοϓσʔτͰ͖Δʢ͸ͣʣ w XBSOJOHCSFBLJOHDIBOHFͷྲྀΕ w ͨͩ͠ɺ%0.ͷѻ͍΍ϥΠϑαΠΫϧΠϕϯτͷॱ൪ͳͲͰϋ ϚΔ৔߹͸͋Δ͔΋ w ϥΠηϯε͕#4%1BUFOT͔Β.*5ʹ/FX 3FBDUW

Slide 7

Slide 7 text

w #4%1BUFOT͔Β.*5ʹ -JDFOTF IUUQTDPEFGBDFCPPLDPNQPTUTSFMJDFOTJOHSFBDUKFTUqPXBOEJNNVUBCMFKT

Slide 8

Slide 8 text

/FX'FBUVSFTJOW

Slide 9

Slide 9 text

3FOEFSTUSJOHBOEBSSBZ

Slide 10

Slide 10 text

w SFOEFSؔ਺͔Β௚઀จࣈྻ΍഑ྻΛฦ͢͜ͱ͕Ͱ͖ΔΑ͏ʹ 3FOEFSTUSJOHBOEBSSBZ // จࣈྻ const DisplayName = ({user}) => `${user.name} (@${user.id})`; // Toru Kobayashi (@koba04) // ഑ྻ const Row = ({children}) => {children}; const Columns = ({items}) => ( items((item, i) => {item} );

Slide 11

Slide 11 text

w +49ͰγϯλοΫεͱͯ͠αϙʔτ͢Δͱ͍͏ٞ࿦΋ w 4VQQPSUTUBOEBMPOFGSBHNFOUTZOUBY w IUUQTHJUIVCDPNGBDFCPPLKTYJTTVFT 3FOEFSTUSJOHBOEBSSBZ [ , , ] !!! <> >

Slide 12

Slide 12 text

&SSPS#PVOEBSJFT

Slide 13

Slide 13 text

w USZDBUDIͷ༷ʹɺࢠ$PNQPOFOUͷSFOEFS΍ϥΠϑαΠΫϧϝ ιουͰى͖ͨΤϥʔΛΩϟον͢ΔͨΊͷϥΠϑαΠΫϧϝ ιου͕௥Ճ w ˠDPNQPOFOU%JE$BUDI w W͔ΒࢠSFOEFS΍ϥΠϑαΠΫϧϝιουͰى͖ͨΤϥʔͷ ѻ͍͕มΘΔ &SSPS#PVOEBSJFT

Slide 14

Slide 14 text

w W·Ͱ͸ɺSFOEFS΍ϥΠϑαΠΫϧϝιουͰΤϥʔ͕ى͖ ͯ΋$PNQPOFOU͸ͦͷ·· w ˠෆ੔߹ͳ7JFXΛϢʔβʔʹදࣔͯ͠͠·͏Մೳੑ w WͰ͸ɺΤϥʔ͕ൃੜͨ͠Β3FBDU%0.SFOEFSͰࢦఆͨ͠ SPPUDPOUBJOFS͔ΒΞϯϚ΢ϯτ͢Δ w ˠΞϯϚ΢ϯτ͞Εͨ͘ͳ͍৔߹͸ΤϥʔΛϋϯυϦϯά͢ Δඞཁ͕͋Δ &SSPS#PVOEBSJFT

Slide 15

Slide 15 text

&SSPS#PVOEBSJFT class Child extends React.Component { componentDidMount() { throw new Error(‘Something went wrong!!’); } } class App extends React.Component { constructor(props) { super(props); this.state = { error: null }; } componentDidCatch(error, info) { // info.componentStack͸ComponentͷStackTraceจࣈྻ this.setState(() => ({error})); } render() { return this.state.error ?

Τϥʔ͕ൃੜ͠·ͨ͠

: ; } }

Slide 16

Slide 16 text

1PSUBM

Slide 17

Slide 17 text

w 3FBDU%0.DSFBUF1PSUBM w ೚ҙͷ%0.ʹର͢ΔSFOEFSΛ$PNQPOFOUπϦʔͷҰ෦ͱ͠ ͯѻ͏͜ͱ͕Ͱ͖Δ w ϥΠϑαΠΫϧϝιουͳͲ΋௨ৗͷࢠ$PNQPOFOUͱಉ༷ʹ ѻΘΕΔ 1PSUBM

Slide 18

Slide 18 text

w 1PSUBMΛ࢖Θͳ͍ྫ 1PSUBM class App extends React.Component { componentDidUpdate() { const container = document.querySelector(‘.modal-container’); if (this.state.modal) { ReactDOM.render( { this.setState( () => ({modal: null}), () => ReactDOM.unmountComponentAtNode(container) ); }} />, container ); } } }

Slide 19

Slide 19 text

w 1PSUBMΛ࢖ͬͨ৔߹ 1PSUBM class App extends React.Component { render() { return ( {this.state.modal && ReactDOM.createPortal( { this.setState(() => ({modal: null})); } />, document.querySelector(‘.modal-container’) )} ); } }

Slide 20

Slide 20 text

'MBU#VOEMFT

Slide 21

Slide 21 text

w #SPXTFSJGZΛ࢖ͬͨϏϧυ͔Β3PMMVQΛ࢖ͬͨϏϧυʹ w ̍ͭͷϞδϡʔϧͱͯ͠Ϗϧυ͢Δ͜ͱͰɺϑΝΠϧαΠζͷ ࡟ݮɺύʔεʹ͔͔Δ࣌ؒΛ࡟ݮ w ͜ͷ݁ՌɺASFBDUMJCYYYAͷΑ͏ͳ಺෦Ϟδϡʔϧ΁ͷ௚઀ࢀ রʢ%JSFDU*NQPSUʣ͕ෆՄೳʹ w ґଘ͍ͯ͠ΔSEQBSUZMJCSBSZ͸ରԠ͕ඞཁ w SFBDUUBQFWFOUQMVHJO SFBDUOBUJWFXFCʜ 'MBU#VOEMFT

Slide 22

Slide 22 text

'MBU#VOEMFT node_modules/react "## cjs $ "## react.development.js $ %## react.production.min.js "## index.js node_modules/react-dom "## cjs $ "## react-dom-server.browser.development.js $ "## react-dom-server.browser.production.min.js $ "## react-dom-server.node.development.js $ "## react-dom-server.node.production.min.js $ "## react-dom-test-utils.development.js $ "## react-dom-unstable-native-dependencies.development.js $ "## react-dom-unstable-native-dependencies.production.min.js $ "## react-dom.development.js $ %## react-dom.production.min.js "## index.js

Slide 23

Slide 23 text

4FSWFS4JEF3FOEFSJOH

Slide 24

Slide 24 text

w ׬શʹಠཱͨ͠3FOEFSFSʹʢطଘ࣮૷͕ϕʔεʣ w 3FBDU1BSUJBM3FOEFSFSKTͱ͍͏ϑΝΠϧ - ʹ w 4USFBN3FOEFSJOHͷαϙʔτ w )ZESBUJPO4USBUFHZͷมߋ w )ZESBUJPOʜ443ͨ͠)5.-ΛΫϥΠΞϯτͰͷϨϯμϦ ϯά࣌ʹ࠶ར༻͢Δ w 3FBDU%0.IZESBUF ͷ௥Ճ 4FSWFS4JEF3FOEFSJOH

Slide 25

Slide 25 text

w SFOEFS5P/PEF4USFBN SFOEFS5P4UBUJD/PEF4USFBNͷ௥Ճ 4USFBN3FOEFSJOH import ReactDOMServer from ‘react-dom/server’; const App = () => (

Hello Stream!

); ReactDOMServer.renderToNodeStream().pipe(process.stdin); //

Hello Stream!

ReactDOMServer.renderToStaticNodeStream().pipe(process.stdin); //

Hello Stream!

Slide 26

Slide 26 text

w 3FBDU%0.IZESBUF ͱ͍͏໌ࣔతͳ"1*ͷ௥Ճ w WͰ͸ɺ3FBDU%0.SFOEFS ʹΑΔ)ZESBUF΋Ҿ͖ଓ͖ αϙʔτʢAEBUBSFBDUSPPUAଐੑʹΑͬͯ൑ఆʣ w 3FBDU&MFNFOUͷ୯ҐͰՄೳͳݶΓ࠶ར༻͞ΕΔΑ͏ʹ w W·Ͱ͸ɺ%0.ߏ଄͕׬શʹҰக͢Δ͔Ͳ͏͔ΛνΣο ΫαϜʹΑͬͯ൑ఆ w /PNPSFAEBUBSFBDUDIFDLTVNABOEAEBUBSFBDUJEA )ZESBUJPO4USBUFHZ

Slide 27

Slide 27 text

%0."UUSJCVUFT

Slide 28

Slide 28 text

w ϗϫΠτϦετʹͳ͍ଐੑ΋%0.ʹ൓ө͞ΕΔΑ͏ʹ w WͰ͸ɺXBSOJOHTUSJQ w ADMBTTA΍AGPSA΍APOʙAͳͲ͸আ͘ w ෆਖ਼ͳܕͷଐੑ஋͸TUSJQ͞ΕΔΑ͏ʹ w WͰ͸ɺจࣈྻԽͯ͠ద༻͞Ε͍ͯͨ %0."UUSJCVUFT

// v16

& warning // v15

.PSFIUUQTGBDFCPPLHJUIVCJPSFBDUCMPHEPNBUUSJCVUFTJOSFBDUIUNM

Slide 29

Slide 29 text

1PMZpMM

Slide 30

Slide 30 text

w .BQ 4FU SFRVFTU"OJNBUJPO'SBNF͕ඞཁʹ w αϙʔτ͢Δϒϥ΢βʔʹԠͯ͡1PMZpMMΛೖΕΔ 1PMZpMM import ‘core-js/es6/map’; import ‘core-js/es6/set’; import raf from ‘raf’; if (!window.requestAnimationFrame) { window.requestAnimationFrame = raf; }

Slide 31

Slide 31 text

0UIFS$IBOHFT

Slide 32

Slide 32 text

w 3FBDUDSFBUF$MBTT 3FBDU1SPQ5ZQFTͷ࡟আ w "EEPOϏϧυͷ࡟আ w ͍͔ͭ͘ͷέʔεͰɺߋ৽࣌ͷ"1*ݺͼग़͠ॱ͕มߋʹ w TFU4UBUFͷίʔϧόοΫɺϥΠϑαΠΫϧϝιουɺ3FG w IUUQTHJUIVCDPNGBDFCPPLSFBDUCMPCNBTUFS $)"/(&-0(NE <6OSFMFBTFE>TFDUJPO 0UIFS$IBOHFT

Slide 33

Slide 33 text

8IFO

Slide 34

Slide 34 text

.BZCFOFYUXFFL

Slide 35

Slide 35 text

3FBDU'JCFS

Slide 36

Slide 36 text

w 3FBDUͷίΞΞϧΰϦζϜͷ࠶࣮૷ w ࠷ॳͷ13͸ w طଘͷ࣮૷ͱޓ׵ੑΛอͪͳ͕ΒɺॊೈͳεέδϡʔϦϯάΛ Մೳʹ w WͰ͸ɺޓ׵ੑͷ͋Δঢ়ଶͰϦϦʔε͞ΕͯɺPQUJOͰඇಉ ظ3FOEFSJOH͕Մೳʹ w ඇಉظ3FOEFSJOHपΓ͸࣮૷த 3FBDU'JCFSͱ͸

Slide 37

Slide 37 text

طଘ࣮૷ͷ໰୊఺

Slide 38

Slide 38 text

w ߋ৽ॲཧ͕શͯಉظతɻπϦʔશମͷࠩ෼ͷݕग़ʙ%0.΁ͷ ൓өɺϥΠϑαΠΫϧϝιουͷݺͼग़͕͠શͯಉظͰ࣮ߦ͞ ΕΔ طଘ࣮૷ͷ໰୊఺

࠶ؼత & ಉظత ↓ UIΛϒϩοΫ͢Δ & ϑϨʔϜམͪ mount mount mount

Slide 39

Slide 39 text

طଘ࣮૷ͷ໰୊఺ Key Input API Response Ωʔೖྗ͕ ϒϩοΫ αʔόʔ͔Βͷ ϨεϙϯεΛॲཧ Key Input Key Input Key Input Key Input

Slide 40

Slide 40 text

3FBDU'JCFSʹΑΔղܾํ๏

Slide 41

Slide 41 text

w ߋ৽ॲཧΛεέδϡʔϦϯάՄೳʹ w ߋ৽ॲཧʹର͢Δ༏ઌ౓෇͚ w $PNQPOFOUʹର͢Δ༏ઌ౓෇͚ 3FBDU'JCFSʹΑΔղܾํ๏ ୯७ͳॲཧͷߴ଎ԽͰ͸ͳ͘ɺ 6*ͷϨεϙϯεੑΛ޲্ͤ͞Δ͜ͱ͕໨త

Slide 42

Slide 42 text

3FBDU'JCFSʹΑΔղܾํ๏ Key Input ߋ৽Λ Chunkʹ ෼ղͯ͠ద༻ Key Input Key Input Key Input API Response ༏ઌ౓ߴ ༏ઌ౓௿

Slide 43

Slide 43 text

3FBDU"SDIJUFDUVSF

Slide 44

Slide 44 text

3FBDU"SDIJUFDUVSF

Component + JSX Reconciler Renderer Fiber Stack DOM Native View Canvas

Slide 45

Slide 45 text

w 3FBDU&MFNFOUͷπϦʔΛߏங͢Δ w $PNQPOFOUΛϚ΢ϯτɺߋ৽ɺΞϯϚ΢ϯτ͢Δ w ϥΠϑαΠΫϧϝιουΛݺͼग़͢ w ࠩ෼Λܭࢉ͢Δ w 3FOEFSFSʹࠩ෼Λ఻͑Δ w ॴҦɺ7JSUVBM%0.ͱݴΘΕ͍ͯͨ෦෼ 3FDPODJMFS

Slide 46

Slide 46 text

4DIFEVMJOH

Slide 47

Slide 47 text

w ࣌ؒϕʔεͷεέδϡʔϦϯά w SFRVFTU*EMF$BMMCBDLΛ࢖ͬͨεέδϡʔϦϯά w ༏ઌ౓ϕʔεͷεέδϡʔϦϯά w ߴ༏ઌ౓ͷߋ৽͸ɺ௿༏ઌ౓ͷߋ৽ʹׂΓࠐΉ͜ͱ͕Ͱ͖Δ w ׂΓࠐ·Εͨߋ৽ॲཧ͸ޙ͔Β࠶։Ͱ͖Δ w ݱ࣌఺Ͱ͸༏ઌ౓ͱͯ͠ɺl4ZODz l5BTLz l)JHIz l-PXz l0⒎4DSFFOz͕ఆٛ͞Ε͍ͯΔ 4DIFEVMJOH

Slide 48

Slide 48 text

SFRVFTU*EMF$BMMCBDL const work = (deadline) => { if (deadline.timeRemaining() > 10) { // do some heavy tasks } else { requestIdleCallback(work); } }; requestIdleCallback(work); Fig. 1 Example of an inter-frame idle period (https://www.w3.org/TR/requestidlecallback/)

Slide 49

Slide 49 text

'JCFSͷσʔλߏ଄

Slide 50

Slide 50 text

'JCFSͷσʔλߏ଄ export type Fiber = {| tag: TypeOfWork, key: null | string, type: any, stateNode: any, return: Fiber | null, child: Fiber | null, sibling: Fiber | null, index: number, ref: null | (((handle: mixed) => void) & {_stringRef: ?string}), pendingProps: any, memoizedProps: any, updateQueue: UpdateQueue | null, memoizedState: any, internalContextTag: TypeOfInternalContext, effectTag: TypeOfSideEffect, nextEffect: Fiber | null, firstEffect: Fiber | null, lastEffect: Fiber | null, pendingWorkPriority: PriorityLevel, alternate: Fiber | null, _debugID?: DebugID, _debugSource?: Source | null, _debugOwner?: Fiber | ReactInstance | null, _debugIsCurrentlyTiming?: boolean, |};

Slide 51

Slide 51 text

-JOLFE-JTUߏ଄ let root = fiber; let node = fiber; while (true) { // Do something with node if (node.child) { node = node.child; continue; } if (node === root) { return; } while (!node.sibling) { if (!node.return || node.return === root) { return; } node = node.return; } node = node.sibling; } From: Fiber Principles: Contributing To Fiber #7942 https://github.com/facebook/react/issues/7942

Slide 52

Slide 52 text

Text = () => '...'; List = () => [

...

, ]; class App extends React.Component { render() { return (

...

); } } ReactDOM.render(, container) HostRoot

HostText List

1 2 3 4 5 6 8 9 10 7 Ͳ͔͜ΒͰ΋தஅʙ࠶։ Ͱ͖Δ

Slide 53

Slide 53 text

1IBTFT

Slide 54

Slide 54 text

w 3FBDU'JCFS͸l#FHJOz l$PNQMFUFz l$PNNJUzͷϑΣʔζΛ࣋ͬͯ ͍Δ w #FHJOʙ$PNQMFUF w 'JCFS $PNQPOFOU ͷ୯ҐͰॲཧ͞ΕΔ w Πϯελϯεͷ࡞੒ɺSFOEFSؔ਺ͷ࣮ߦ ࠩ෼ܭࢉ w $PNNJU w ߋ৽ॲཧͷ୯ҐͰॲཧ͞ΕΔ w ෭࡞༻Λ·ͱΊͯ൓ө͢Δ %0.ͷߋ৽ͳͲ 1IBTFT

Slide 55

Slide 55 text

w #FHJOϑΣʔζ w DPNQPOFOU8JMM.PVOU DPNQPOFOU8JMM3FDFJWF1SPQT TIPVME$PNQPOFOU6QEBUF DPNQPOFOU8JMM6QEBUF w ඇಉظ3FOEFSJOHͰ͸ɺதஅʙ࠶։͞ΕΔ͜ͱͰෳ਺ճݺ ͹ΕΔ͜ͱ΋ w $PNNJUϑΣʔζ w DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF DPNQPOFOU8JMM6ONPVOU ϥΠϑαΠΫϧϝιου

Slide 56

Slide 56 text

෭࡞༻͸·ͱΊͯҰ౓Ͱ൓ө͞ΕΔ FiberA FiberB FiberD FiberE Commit all SideEffects Idle Time Idle Time Idle Time Beginʙ Complete SideEffect SideEffect SideEffect Host (DOM) FiberC

Slide 57

Slide 57 text

1SJPSJUZ

Slide 58

Slide 58 text

)JHI1SJPSJUZͷߋ৽ॲཧ͸ׂΓࠐΈͰ͖Δ FiberA FiberB FiberA FiberC Commit Low Priority High Priority Commit FiberA FiberB FiberC Low Priority ࠶ར༻ ׂΓࠐΈʂ தஅ

Slide 59

Slide 59 text

σϞ https://koba04.github.io/react-ﬁber-resources/examples/

Slide 60

Slide 60 text

4UBDLSFDPODJMFS

Slide 61

Slide 61 text

4ZOD1SJPSJUZʹΑΔߋ৽

Slide 62

Slide 62 text

-PX1SJPSJUZʹΑΔߋ৽ॲཧ BeginʙComplete Commit

Slide 63

Slide 63 text

0⒎4DSFFO1SJPSJUZ TabA TabB hidden hidden Viewport hidden

Slide 64

Slide 64 text

w %0.3FOEFSFSͷ৔߹͸ɺIJEEFO1SPQΛ࢖͏ 0⒎4DSFFO1SJPSJUZ App = () => (

); ReactDOM.render(, container);

Slide 65

Slide 65 text

w %0.3FOEFSFSͷ৔߹͸ɺIJEEFO1SPQΛ࢖͏ 0⒎4DSFFO1SJPSJUZ App = () => (

); ReactDOM.render(, container); ݱ࣌఺Ͱ͸ɺFeatureϑϥάʹΑͬͯӅ͞Ε͍ͯΔ

Slide 66

Slide 66 text

ඇಉظ3FOEFSJOHΛࢼ͢

Slide 67

Slide 67 text

w 3FBDU%0.VOTUBCMF@EFGFSSFE6QEBUFTΛ࢖ͬͨ-PX 1SJPSJUZʹΑΔߋ৽ w 3FBDUVOTUBCMF@"TZOD$PNQPOFOUΛ࢖ͬͯߋ৽Λ-PX 1SJPSJUZʹ w 3FBDU%0.'FBUVSF'MBHTpCFS"TZOD4DIFEVMJOHΛ༗ޮʹ͠ ͯσϑΥϧτΛ-PX1SJPSJUZʹ w 0⒎4DSFFO1SJPSJUZ΋ར༻Մೳʹ w 3FBDU%0.qVTI4ZOD ඇಉظ3FOEFSJOHΛࢼ͢

Slide 68

Slide 68 text

ඇಉظ3FOEFSJOHΛࢼ͢ // Low PriorityʹΑΔߋ৽ ReactDOM.unstable_deferredUpdates(() => { this.setState(updater); }); // ߋ৽͕Low Priorityͱͯ͠ѻΘΕΔComponent const AsyncComponent = React.unstable_AsyncComponent; // or class App extends AsyncComponent { onClick() { // Sync Priority ReactDOM.flushSync(() => this.setState(() => newState)); } }

Slide 69

Slide 69 text

Slide 70

Slide 70 text

$VTUPN3FOEFSFS

Slide 71

Slide 71 text

w $VTUPN3FOEFSFSΛ࣮૷͢ΔͨΊͷํ๏͕ఏڙ͞ΕΔ w ASFBDUSFDPODJMFSA w 3FBDUSFDPODJMFSQBDLBHF w IUUQTHJUIVCDPNGBDFCPPLSFBDUQVMM w 'MPXUZQFʹΑͬͯΠϯλʔϑΣΠε͕ఆٛ͞Ε͍ͯΔ w IUUQTHJUIVCDPNGBDFCPPLSFBDUCMPCNBTUFSTSD SFOEFSFSTTIBSFEpCFS3FBDU'JCFS3FDPODJMFSKT $VTUPN3FOEFSFS

Slide 72

Slide 72 text

$VTUPN3FOEFSFS $POTPMF ReactConsole.render(

Hello World React Custom Renderer!

, () => console.log( colors.inverse('##### Update ######’) ) ); ReactConsole.render(

Hello World2 React

); IUUQTHJTUHJUIVCDPNLPCBDCECEGBFDB

Slide 73

Slide 73 text

$VTUPN3FOEFSFS 7PJDF ReactVoice.render([ Hello, React Fiber, ͜Μʹͪ͸ HTML5 Conference, ]); ??? IUUQTHJTUHJUIVCDPNLPCBFBGDBFBDEFGE

Slide 74

Slide 74 text

ಠࣗʹ3FBDU%0.-JUFΛ࣮૷Ͱ͖Δʂ

Slide 75

Slide 75 text

'VUVSF

Slide 76

Slide 76 text

w WͰ͸ɺඇಉظ3FOEFSJOH -PX1SJPSJUZ ͕σϑΥϧτʹ w %ZOBNJDJNQPSUΛ1SPNJTF$PNQPOFOUͱͯ͠αϙʔτʁ w 3FBTPO3FBDU͔Βͷ1PSU 3FEVDFSFUD w কདྷతʹ3FBDU'JCFSΛผݴޠͰ࣮૷͢ΔՄೳੑ΋ʁ 'VUVSF

Slide 77

Slide 77 text

'VUVSF React Fiber (written by C or C++ or…) Native module for ReactNative Web Assembly for ReactDOM

Slide 78

Slide 78 text

·ͱΊ

Slide 79

Slide 79 text

w W͸3FBDU'JCFS͕࢖ΘΕΔॳΊͯͷόʔδϣϯ w Wͷ࣌఺Ͱɺ3FBDU'JCFSʹΑͬͯܶతʹߴ଎Խ͞ΕΔ͜ͱ ͸ͳ͍ɻࠓޙͷͨΊͷΠϯϑϥ w 3FBDU'JCFS͸ɺ6*ͷϨεϙϯεੑΛεέδϡʔϦϯάʹΑͬ ͯ޲্ͤ͞Δ ·ͱΊ

Slide 80

Slide 80 text

5IBOLT TQFBLFSEFDLDPNLPCB