,PUMJO+4ͷ֓ཁ w +4ίʔυʹมՄೳͳ,PUMJOඪ४ϥΠϒϥϦ w ,PUMJOˠ+4ͷมΛ࣮ߦ͢Δ(SBEMFϓϥάΠϯ w OQN8FCQBDLͷίϚϯυΛ࣮ߦ͢Δ(SBEMFϓϥάΠϯ ʴIUNMDTTͷ%4-ϥΠϒϥϦɺ֤छ+4 ϥούʔ ϥΠϒϥϦ ,PUMJO+4͕ఏڙ͢ΔϞϊ ,PUMJO͔Β+4ͷมɺOQNʹΑΔόʔδϣϯཧɺ8FCQBDLʹΑΔόϯυϧ શͯΛ,PUMJOͷੈքͰ݁ͤ͞ɺϑϩϯτΤϯυ։ൃΛ࣮ݱ͢Δʂ
,PUMJO+4ͷྺ࢙ ,PUMJOϦϦʔε w ,PUMJO+4ਖ਼ࣜϦϦʔεɻʮLPUMJOKTʯͰ,PUMJOˠ+4ม͕Ͱ͖ΔΑ͏ʹ LPUMJOGSPOUFOEQMVHJOϦϦʔε w (SBEMF͔ΒͷOQNɺ8FCQBDLͷίϚϯυ࣮ߦΛαϙʔτ͢ΔϓϥάΠϯ ,PUMJOϦϦʔε w ,PUMJO.11ొɻ+7./BUJWFͷϞδϡʔϧͱϩδοΫΛڞ௨Խ ,PUMJOϦϦʔε w LPUMJOKTˠDPNKFUCSBJOTLPUMJOKTʹվ໊ɺLPUMJOGSPOUFOEQMVHJOͷҰ෦ػೳ͕౷߹ w ʮLPUMJOGSPOUFOEQMVHJOࠓޙഇࢭ༧ఆʯͱࠂ ,PUMJOϦϦʔε w 8FCQBDLͷઃఆ߲Ճɺόάमਖ਼
,PUMJOϦϦʔε w ,PUMJO+4ਖ਼ࣜϦϦʔεɻʮLPUMJOKTʯͰ,PUMJOˠ+4ม͕Ͱ͖ΔΑ͏ʹ LPUMJOGSPOUFOEQMVHJOϦϦʔε w (SBEMF͔ΒͷOQNɺ8FCQBDLͷίϚϯυ࣮ߦΛαϙʔτ͢ΔϓϥάΠϯ ,PUMJOϦϦʔε w ,PUMJO.11ొɻ+7./BUJWFͷϞδϡʔϧͱϩδοΫΛڞ௨Խ ,PUMJOϦϦʔε w LPUMJOKTˠDPNKFUCSBJOTLPUMJOKTʹվ໊ɺLPUMJOGSPOUFOEQMVHJOͷҰ෦ػೳ͕౷߹ w ʮLPUMJOGSPOUFOEQMVHJOࠓޙഇࢭ༧ఆʯͱࠂ ,PUMJOϦϦʔε w 8FCQBDLͷઃఆ߲Ճɺόάमਖ਼ ,PUMJO+4ͷྺ࢙ ,PUMJO.11ͷҰ෦ͱͯ͠ ֤छϓϥάΠϯ͕·ͱ·ΔྲྀΕ
,PUMJOϦϦʔε w ,PUMJO+4ਖ਼ࣜϦϦʔεɻʮLPUMJOKTʯͰ,PUMJOˠ+4ม͕Ͱ͖ΔΑ͏ʹ LPUMJOGSPOUFOEQMVHJOϦϦʔε w (SBEMF͔ΒͷOQNɺ8FCQBDLͷίϚϯυ࣮ߦΛαϙʔτ͢ΔϓϥάΠϯ ,PUMJOϦϦʔε w ,PUMJO.11ొɻ+7./BUJWFͷϞδϡʔϧͱϩδοΫΛڞ௨Խ ,PUMJOϦϦʔε w LPUMJOKTˠDPNKFUCSBJOTLPUMJOKTʹվ໊ɺLPUMJOGSPOUFOEQMVHJOͷҰ෦ػೳ͕౷߹ w ʮLPUMJOGSPOUFOEQMVHJOࠓޙഇࢭ༧ఆʯͱࠂ ,PUMJOϦϦʔε w 8FCQBDLͷઃఆ߲Ճɺόάमਖ਼ ,PUMJO+4ͷྺ࢙ ͜ͷ࣌ظͷใ͕݁ߏଟ͍ ࠓޙݹ͘ͳΔͷͰҙʂ
ࣄྫ খௗ͞Μͷࣗशࣨ (JUIVCTVCSPIPUPOBTIJLPUMJOEFW ػೳ w ϒϥβ্Ͱ,PUMJO,PBOTͷ՝͕Ͱ͖Δ w ՝ͷΫϦΞɺίϯύΠϧΤϥʔʹ ɹ߹ΘͤͯϨεϙϯεΛฦ͢ ˠখௗ͞ΜͱϖΞϓϩ͠ͳ͕Β,PUMJOΛֶश w ,PUMJOͷ3&1-LPUMJOQMBZHSPVOE w ϖʔδભҠ3FBDI3PVUFS খௗ͞Μ
+4ϥΠϒϥϦͷಋೖ ಋೖͷखॱ w OQN(SBEMFʹ+4ϥΠϒϥϦʹର͢Δґଘؔه w ΞϊςʔγϣϯΛ͍ɺ+4ϥΠϒϥϦΛ,PUMJOίʔυʹΠϯϙʔτ w Ћ ܕఆٛɺϝιουఆٛ ˠ+4ϥΠϒϥϦΛʮ,PUMJOΒ͘͠ʯѻ͏ͨΊͷԼ͝͠Β͑ ,PUMJO+4ಠࣗͷػೳΛۦ͠ɺ࣮ݱ ϋϚΓͲ͜Ζʂ
+4ϥΠϒϥϦΛʮ,PUMJOΒ͘͠ʯѻ͏ʹ w FYUFSOBMम০ࢠΛ͚ͭͨΠϯλʔϑΣʔεͰܕఆٛ w +4ͷؔΛ,PUMJOΒ͘͠ݺΔΑ͏ʹؔఆٛ +4ϥΠϒϥϦͷಋೖ @JsModule("react-swipeable-views") private external val reactSwipeableViewModule: dynamic external interface ReactSwipeableProps : RProps { var onChangeIndex: (Int, Int, ChangeReason) -> Unit } val RBuilder.swipeableViews: RClass get() = reactSwipeableViewModule.default as RClass
+4ϥΠϒϥϦΛʮ,PUMJOΒ͘͠ʯѻ͏ʹ w FYUFSOBMम০ࢠΛ͚ͭͨΠϯλʔϑΣʔεͰܕఆٛ w +4ͷؔΛ,PUMJOΒ͘͠ݺΔΑ͏ʹؔఆٛ +4ϥΠϒϥϦͷಋೖ @JsModule("react-swipeable-views") private external val reactSwipeableViewModule: dynamic external interface ReactSwipeableProps : RProps { var onChangeIndex: (Int, Int, ChangeReason) -> Unit } val RBuilder.swipeableViews: RClass get() = reactSwipeableViewModule.default as RClass Πϯϙʔτͨ͠ϞδϡʔϧΛ3$MBTT31SPQTʹΩϟετ
,PUMJO.BUFSJBM6*ͷհ w (JUIVCTVCSPILPUMJONBUFSJBMVJ w ʮ.BUFSJBM6*ʯͷ,PUMJO+4ϥούʔϥΠϒϥϦ .BUFSJBM%FTJHOͳ6*࡞Γ͍ͨʂ ˠ͜ΕΛ͑ղܾʂ ɹ,PUMJO+4ͷೖ͔͜͜Βʂ ɹϥΠϒϥϦ࡞ͷࢀߟʹʂ
·ͱΊ ,PUMJO+4ͷ֓ཁɾΞοϓσʔτͷྺ࢙ʹ͍ͭͯղઆ w ॳಠཱͨ͠ϓϥάΠϯ w ݱࡏ,PUMJO.11ͷҰཌྷΛ୲͏ཱͪҐஔ ,PUMJO+4Λͬͨ8FCΞϓϦ࡞ͷϋϯζΦϯ w OQNͱ(SBEMFɺͲͪΒͰՄ w EZOBNJDͱFYUFSOBM͕͍͜ͳͤΕɺ+4ϥΠϒϥϦΛࣗ༝ʹѻ͑Δ w ࠷ऴखஈͱͯ͠KTϝιου
·ͱΊ ,PUMJO+4ͷ͜Ε͔Β w CBDLFOEͱGSPOUFOE͕ͭͷ,PUMJOϓϩδΣΫτʹ·ͱ·Δʂ w EBUBDMBTTͷڞ༗ɺ(SBEMFͰͷϏϧυɺ%4-ͰͷIUNMDTTهड़ ຊ൪ಋೖͷน w ѹతͳࣄྫɾใෆʂɹϥΠϒϥϦ·ͩ·ͩগͳ͍ʂ w ؆୯ͳϞϊͰ࡞ͬͯެ։ˠݟͷੵɺ,PUMJO+4ͷલਐͷҰॿ ,PUMJOͰϑϩϯτΤϯυͷ։ൃ͕Ͱ͖Δͷָ͍͠ʂ ࢁͷਓ͕৮ͬͯ͘ΕΔͱخ͍͠☺
LPUMJOSFBDUͷසग़Ϋϥε w 3$MBTT ˠ3FBDU$MBTTͱରԠɺίϯϙʔωϯτͷܕఆٛ w 3$PNQPOFOU3FBDU&MFNFOU ˠ$PNQPOFOU3FBDU&MFNFOUͱରԠɺίϯϙʔωϯτͷΠϯελϯε w 3#VJMEFS ˠ%0.ߏஙɾ$PNQPOFOUͷੜʹΛ࣋ͭLPUMJOSFBDUಠࣗͷΫϥε
@ReactDsl open class RBuilder { val childList = mutableListOf() fun child(element: ReactElement): ReactElement { childList.add(element) return element } operator fun String.unaryPlus() { childList.add(this) } fun child(type: Any, props: P, children: List) = child(createElement(type, props, *children.toTypedArray())) fun child(type: Any, props: P, handler: RHandler): ReactElement { val children = with(RElementBuilder(props)) { handler() childList } return child(type, props, children) } operator fun RClass.invoke(handler: RHandler) = child(this, jsObject {}, handler) operator fun RProvider.invoke(value: T, handler: RHandler>) = child(this, jsObject { this.value = value }, handler) operator fun RConsumer.invoke(handler: RBuilder.(T) -> Unit) = child(this, jsObject> { this.children = { value -> buildElements { handler(value) } } }) {} fun RClass.node( props: P, children: List = emptyList() ) = child(this, clone(props), children) fun > child(klazz: KClass, handler: RHandler): ReactElement { val rClass = klazz.js as RClass return rClass(handler) } inline fun > child(noinline handler: RHandler) = child(C::class, handler) fun > node( klazz: KClass, props: P, children: List = emptyList() ): ReactElement { val rClass = klazz.js as RClass return rClass.node(props, children) } inline fun > node(props: P, children: List = emptyList()) = node(C::class, props, children) fun RProps.children() { childList.addAll(Children.toArray(children)) } } ίʔυϦʔσΟϯά LPUMJOSFBDU
3#VJMEFSΫϥε w %0.ཁૉΛ֨ೲ͢ΔDIJME-JTUϓϩύςΟΛ࣋ͭ w DIJMEϝιουɺଞʹͭ w 3$PNQPOFOUΛՃ w QSPQTͱࢠཁૉΛݸผͷҾͰՃFUD fun child(type: Any, props: P, children: List): ReactElement fun child(type: Any, props: P, handler: RHandler): ReactElement fun child(klazz: KClass, handler: RHandler): ReactElement inline fun child(noinline handler: RHandler): ReactElement
DSFBUF&MFNFOUϝιου w τοϓϨϕϧؔɺ3FBDUKTͷ3FBDUDSFBUF&MFNFOUͱରԠ w 3#VJMEFSDIJME-JTU3FBDU&MFNFOUʹม w SFOEFSϝιουͰ࠷ऴతʹݺΕΔ external fun createElement( type: Any, props: P, vararg child: Any? ): ReactElement
UBHϝιου w )UNM5BH༻ϝιου͔Β࣮ࡍʹݺͼग़͞ΕΔϝιου w 3#VJMEFSDIJME ϝιουΛ࣮ߦ w ,PUMJO+4Ͱಠࣗ)5.-λάΛѻ͍͍ͨʂˠUBHϝιουͰΑ͠ͳʹ inline fun RBuilder.tag( block: RDOMBuilder.() -> Unit, noinline factory: (TagConsumer) -> T ): ReactElement = child(RDOMBuilder(factory).apply { block() }.create())
ίʔυ୳ࡧ·ͱΊ ,PUMJO+4ͱϥούʔϥΠϒϥϦͷ࣮ w ,PUMJOͷݴޠ༷͕ϑϧ׆༻ʂɹݴޠ༷ͷ্खͳ͍ํΛֶΔʂ w ֦ுؔɾϥϜμࣜɾԋࢉࢠΦʔόʔϩʔυFUD w $44#VJMEFSࣅͨΑ͏ͳ࣮ɺ͍ͯΈΔͱͱָ͍ͯ͠☺ ˠ"OESPJEɾαʔόʔαΠυͷ։ൃʹ׆͖ΔݟΛಘΔ͜ͱ͕Ͱ͖Δʂ ,PUMJOͰϑϩϯτΤϯυͷ։ൃ͕Ͱ͖Δͷָ͍͠ʂ ࢁͷਓ͕৮ͬͯ͘ΕΔͱخ͍͠☺
subroh0508
yhana
line_developers
dongjin
superbrothers
sbtechnight
pauloxnet
kenichirokimura
sat
oracle4engineer
miyakemito
carta_engineering
jrom
eileencodes
malarkey
scottboms
samanthasiow
shpigford
hannesfritz
cassininazir
aleyda
cromwellryan
vanstee
destraynor