3FBDU/BUJWF 4UBUF.BOBHFNFOU-JCSBSZ d3FBDU/BUJWFΞϓϦʹ3FDPJMΛಋೖͨ͠࿩d 4IJOKJ,VSPTBXB 3FBDU/BUJWF.BUTVSJ

ൃද಺༰ʹ͍ͭͯ w ಺༰ w 3FDPJMʹ͍ͭͯͬ͘͟Γઆ໌ w 4UBUF.BOBHFNFOUʹ͍ͭͯͷৄࡉͳઆ໌΍ൺֱݕ౼͸ߦ͍·ͤΜ w 3FBDU/BUJWF։ൃΛ࢝Ίͯ൒೥͘Β͍ͳͷͰɺؒҧ͍౳͋Ε͹͝ࢦఠ͓ئ͍͠·͢ w ର৅ऀ w 4UBUF.BOBHFNFOU-JCSBSZΛ࢖ͬͨ͜ͱ͕ͳ͍ํ w 3FDPJMʹ͍ͭͯؾʹͳ͍ͬͯΔํ w 3FBDU/BUJWFͰ໰୊ͳ͘࢖͑Δ͔ؾʹͳ͍ͬͯΔํ

͓఻͍͑ͨ͜͠ͱ ಋೖͷഎܠ 3FDPJMʹ͍ͭͯ 3FBDU/BUJWF؀ڥԼͰى͜Δ*TTVFTʹ͍ͭͯ

3FDPJMಋೖͷഎܠ w ৽نػೳ͓Αͼ৽نը໘ͷ։ൃத w ༷ʑͳσʔλͷऔಘฤूૹ৴ͳͲ͕ߦΘΕΔػೳ w ෳ਺ը໘Ͱڞ௨ͱͯ͠࢖༻͢Δ஋΋ଘࡏ w ը໘಺Ͱѻ͏ػೳσʔλ͕ଟ͍ͨΊɺѻ͏4UBUF΋ଟ͍

4UBUF.BOBHFNFOU-JCSBSZ 4UBS਺LҎ্ͷ4UBUF.BOBHFNFOU-JCSBSZ w 4UBS਺ɿL w ࠷΋ଟ͘࢖ΘΕ͍ͯΔ 3FEVY .PC9 w 4UBS਺ɿL w 4JNQMF 94UBUF w 4UBS਺ɿL w ঢ়ଶભҠɺՄࢹԽπʔϧ΋ଘࡏ w 4UBS਺ɿL w (SBQI2-Ͱ࢖༻ BQPMMPDMJFOU 3FDPJM w 4UBS਺ɿL w 4JNQMFɺ'$Ͱ࢖༻ ;VTUBOE w 4UBS਺ɿL w 'MVYϕʔε IUUQTHJUIVCDPNPMFHSKVNJOBXFTPNFSFBDUTUBUFNBOBHFNFOU

͓఻͍͑ͨ͜͠ͱ ಋೖͷഎܠ 3FDPJMʹ͍ͭͯ 3FBDU/BUJWF؀ڥԼͰى͜Δ*TTVFTʹ͍ͭͯ

3FDPJM w 4UBUF.BOBHFNFOU-JCSBSZ w 'BDFCPPL͕։ൃ w &YQFSJNFOUBMͱ͍͏Ґஔ͚ͮ w 3FBDUͷ)PPLʹ΋ͱ͍ͮͨ*OUFSGBDF w IUUQTSFDPJMKTPSHEPDTJOUSPEVDUJPONPUJWBUJPO w +PUBJͳͲͷɺ3FDPJMʹӨڹΛड͚ͨ-JCSBSZ΋ଘࡏ

3FDPJM const TextState = atom({key: 'Text', default: ‘'}); const Content: React.FC = () => { const [text, setText] = useRecoilState(TextState); return ( { setText(event.nativeEvent.text) }} /> ) } w "UPNΛఆٛ w $PNQPOFOU಺෦Ͱ3FDPJM4UBUFΛఆٛ ˠVTF4UBUFͱಉ͡Α͏ͳ࢖͍ํͰ࢖༻Մೳ w ͦͷଞʹ΋4FMFDUPS΍"UPN4FMFDUPSΛα ϙʔτ͢ΔͨΊͷ"1*͕͋Δ

3FDPJM֓ཁ·ͱΊ w '$ʹ΋ͱ͍ͮͨ*OUFSGBDFͰ࢖༻Ͱ͖Δ4UBUF.BOBHFNFOU-JCSBSZ w +PUBJͳͲͷӨڹΛड͚ͨ-JCSBSZ΋ଘࡏ w "UPN4FMFDUPSΛఆٛͯ͠ɺ)PPLͷΑ͏ʹݺͼग़͢͜ͱͰ࢖༻Ͱ͖Δ w γϯϓϧ w ߋ৽͞Εͨ$PNQPOFOUͷΈ࠶ඳը͞ΕΔ w ۩ମతͳ࢖༻ํ๏͸%PDVNFOUΛ͝ࢀরԼ͍͞

͓఻͍͑ͨ͜͠ͱ ಋೖͷഎܠ 3FDPJMʹ͍ͭͯ 3FBDU/BUJWF؀ڥԼͰى͜Δ*TTVFTʹ͍ͭͯ

$POUSPMMFE$PNQPOFOUT w ࣗ਎Ͱঢ়ଶΛอ࣋͢Δ$PNQPOFOUT w 3FBDUJOQVU UFYUBSFB TFMFDUͳͲ w 3FBDU/BUJWF5FYU*OQVU 4XJUDIͳͲ w 3FBDU/BUJWFͷ$POUSPMMFE$PNQPOFOUͷ4UBUFͱͯ͠3FDPJMͷ4UBUFΛ࢖༻ ͢Δͱɺෆ੔߹͕ൃੜ͢Δ IUUQTSFBDUKTPSHEPDTGPSNTIUNMDPOUSPMMFEDPNQPOFOUT

ྫ5FYU*OQVU VTF4UBUFΛ࢖༻͢Δ const Content: React.FC = () => { const [text, setText] = useState(''); return ( { setText(event.nativeEvent.text) }} /> ) }

ྫ5FYU*OQVU 3FDPJM4UBUFΛ࢖༻͢Δ const TextState = atom({key: 'Text', default: ‘'}); const Content: React.FC = () => { const [text, setText] = useRecoilState(TextState); return ( { setText(event.nativeEvent.text) }} /> ) }

VTF4UBUF VTF3FDPJM4UBUF

ݪҼ w ͓ͦΒ͘ TFU3FDPJM4UBUF಺෦Ͱඇಉظॲ ཧ͕૸͍ͬͯΔ w ͓ͦΒ͘ 5FYU*OQVU͸ಉظతʹ஋͕ߋ৽ ͞ΕΔ͜ͱΛલఏʹ$PNQPOFOU͕࡞ΒΕ ͍ͯΔ w Ұॠ͚ͩWBMVF͕ݩͷ஋ʹ໭ΔͨΊɺ͜ ͷΑ͏ͳࣄ৅͕ى͖Δ w 3FDPJMΛ࢖༻͠ͳͯ͘΋ɺӈͷΑ͏ͳίʔ υͩͱTFU3FDPJM4UBUFͱಉ݁͡ՌʹͳΔ const Content: React.FC = () => { const [text, setText] = useState(''); return ( { const text = event.nativeEvent.text; setTimeout(() => { setText(text) }, 0) }} style={styles.sectionContainer} /> ) }

ରࡦ w جຊతʹ͸ɺը໘಺ͷΈͰߋ৽͞Ε ͨ஋Λ࢖༻͢Δ৔߹ʹ͸ɺ3FDPJMͷ 4UBUFΛ࢖༻ͤͣɺTFU4UBUFΛ༻͍ Δ w Ͳ͏ͯ͠΋3FDPJMΛ࢖͍͍ͨ৔߹ ͸ɺVTF4UBUFͰҰ࣌తʹ஋Λߋ৽͢ Δ͜ͱͰճආͰ͖Δ const TextState = atom({key: 'Text', default: ''}); const Content: React.FC = () => { const [text, setText] = useState(''); const setGlobalText = useSetRecoilState(TextState); useEffect(() => { setGlobalText(text); }, [text]) return ( { const text = event.nativeEvent.text; setText(text) }} style={styles.sectionContainer} /> ) }

ͦͷଞ(JUIVCʹڍ͕͍ͬͯΔ*TTVFT

3FMFBTF#VJMEͰ4UBUFߋ৽͕Ͱ͖ͳ͍ w IUUQTHJUIVCDPNGBDFCPPLFYQFSJNFOUBM3FDPJMJTTVFT w 3FBDU/BUJWFͷΈͰى͜ΔΑ͏ w ࠶ݱ͢ΔͷͰ͋Ε͹க໋తͳෆ۩߹ͱͳΓಘΔ w ݱঢ়ɺಛʹى͖ͨ͜ͱ͸ͳ͍

.FNPSZ-FBL w ͍͔ͭ͘*TTVFT͕͕͍͋ͬͯΔ w IUUQTHJUIVCDPNGBDFCPPLFYQFSJNFOUBM3FDPJMJTTVFT w IUUQTHJUIVCDPNGBDFCPPLFYQFSJNFOUBM3FDPJMJTTVFT w IUUQTHJUIVCDPNGBDFCPPLFYQFSJNFOUBM3FDPJMJTTVFT w IUUQTHJUIVCDPNGBDFCPPLFYQFSJNFOUBM3FDPJMJTTVFT w BUPN'BNJMZ΍TFMFDUPS'BNJMZͳͲͷ"1*Λ࢖༻͢Δͱى͖Δʁ w ͜ͷෆ۩߹Λཧ༝ʹ+PUBJΛ࢖༻͍ͯ͠Δͱ͍͏ίϝϯτ΋ݟ͔ͭͬͨ

·ͱΊ

·ͱΊ w 3FDPJM͸ͱͯ΋࢖͍΍͍͢ w "UPN4FMFDUPSΛ࢖༻͢Δ͜ͱͰɺ(MPCBMͳ4UBUFΛVTF4UBUFͱಉ͡ײ֮Ͱ࢖༻Ͱ͖Δ w ॊೈ͗͢ΔͷͰɺνʔϜ։ൃͰ࣮ࡍʹར༻͢Δࡍʹ͸࢖༻ํ๏Λݕ౼ͨ͠΄͏͕ྑͦ͞͏ w 3FBDU/BUJWF؀ڥԼͰ໰୊ͳ͘࢖༻Ͱ͖͍ͯΔ w -JCSBSZͱͯ͠͸&YQFSJNFOUBMͳҐஔ෇͚ w ͍͔ͭ͘ͷ՝୊ w 3FBDU/BUJWFͷ$PNQPOFOUͱซ༻͢Δ͜ͱͰى͖Δ*TTVF w ಛఆ؀ڥ΍࢖༻ํ๏Ͱى͖Δ*TTVF

ॴײ w 3FBDUͷΤίγεςϜ͸ૉ੖Β͍͠ w 4UBUF.BOBHFNFOU-JCSBSZͷબ୒ࢶ͕ଟ͍ w બ୒ࢶ͕ଟ͗ͯ͢ɺ໎͏͜ͱ΋ଟ͍ w 3FDPJMҎ֎ͷ4UBUF.BOBHFNFOU-JCSBSZʹ͍ͭͯ΋ֶͼ͍ͨ w ঢ়گʹԠͯ͡બఆͰ͖ΔΑ͏ɺ༷ʑͳ-JCSBSZͷ࣮༻ྫΛֶͼ͍ͨ