Slide 1
Slide 1 text
,PUMJO+4ͱ֨ಆ͠ͳ͕Β
,PUMJOͷΠέͯΔจ๏ΛֶͿ
ʹ͜͠Γ͞ͿΖʙ!TVCSPI@
Slide 2
Slide 2 text
ࣗݾհ
w ʹ͜͠Γ͞ͿΖʙ ຊ໊ࡔ্৴
w גࣜձࣾ#FBS5BJM
w "OESPJEΤϯδχΞ ,PUMJO+BWB
ˑ
w 8FCΤϯδχΞ 3BJMT3FBDU
w ,PUMJOྺ
Slide 3
Slide 3 text
࣍
,PUMJO+4ͷ֓ཁ
,PUMJOͷΠέͯΔจ๏հ
w ϥϜμࣜ
w ֦ுؔ
w ԋࢉࢠΦʔόʔϩʔυ
,PUMJO+4ͱͷ֨ಆͷه
Slide 4
Slide 4 text
,PUMJO+4ͷ֓ཁ
w ϑϩϯτΤϯυͷίʔυ,PUMJOͰॻ͍ͯ͠·͓͏ʂ
w ,PUMJOˠ+4ʹมɺ(SBEMFϓϥάΠϯΛ+FU#SBJOT͕ఏڙ
w LPUMJOKTɺLPUMJOGSPOUFOEQMVHJO
w (SBEMFʹίϯύΠϧ8FCQBDLͷઃఆΛهड़
w ࣮ߦˠ+4มޙͷϑΝΠϧ͕ग़ྗ͞ΕΔ
Slide 5
Slide 5 text
,PUMJOͰ+4͕ॻ͚Δʜ
w ܕ҆શʂॻ͖׳Εͨ,PUMJOͰϑϩϯτΤϯυॻָ͚͍ͯ͠ʂ
w ਓྨʹ·ͩૣ͗͢Δ ࣮ࡍʹ֨ಆͨ࣌͠ͷͭΒΈޙ΄Ͳʜ
w ίʔυϦʔσΟϯάˠ,PUMJOͷݴޠ༷Λϑϧʹ׆༻
w ಛʹΑͦ͞͏ͳϞϊΛ͍͔ͭ͘հ
w %4- υϝΠϯݻ༗ݴޠ
ͷ࣮ʹʹཱͭ
Slide 6
Slide 6 text
,PUMJOͷΠέͯΔจ๏հ
w ϥϜμࣜؔΛએݴͤͣɺͦͷͰมͷΑ͏ʹ͢
// 2つのInt型変数の和を返す
val sum = { x: Int, y: Int -> x + y }
print(sum(3, 4)) // => 7
// 別の関数の引数として渡すことも可
fun addAndTimes(sum: (Int, Int) -> Int, n: Int): Int {
return sum(n, n) * n
}
print(addAndTimes(sum, 5)) // => 50
Slide 7
Slide 7 text
,PUMJOͷΠέͯΔจ๏հ
w ֦ுؔطଘͷΫϥεʹ֎͔Β৽ؔ͘͠ΛՃ͢Δ
w 4UBUJDͳϝιουΛՃ +BWB͔ΒΫϥεϝιουͱͯ͠ղऍ
// Int型のリストに平均値を返す関数を追加
fun List.average(): Double {
return this.sum().toDouble() / this.size.toDouble()
}
print(listOf(1, 2, 3, 4).average()) // => 2.5
Slide 8
Slide 8 text
,PUMJOͷΠέͯΔจ๏հ
w ԋࢉࢠΦʔόʔϩʔυԋࢉࢠͷॲཧΛॻ͖͑Δ
w ීஈ͔͍ͮ͋·Γ͠ͳ͍ɺ%4-Λ࡞Δ࣌ʹͱͯศར
data class Person(val name: String)
data class People(val names: List)
// Person同士を足してPeopleに変換して返す
operator fun Person.plus(other: Person): People
= People(listOf(this.name, other.name))
Person("音無小鳥") + Person("青羽美咲")
// => People(["音無小鳥", "青羽美咲"])
Slide 9
Slide 9 text
,PUMJO+4Ͱʜ
w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ
class App : RComponent() {
override fun RBuilder.render() {
div("title") {
+"Welcome to React with Kotlin"
}
}
}
class App extends React.Component {
render() {
return (
Welcome to React with Kotlin
)
}
}
,PUMJO+4 3FBDU
Slide 10
Slide 10 text
,PUMJO+4Ͱʜ
w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ
class App : RComponent() {
override fun RBuilder.render() {
div("title") {
+"Welcome to React with Kotlin"
}
}
}
Slide 11
Slide 11 text
,PUMJO+4Ͱʜ
w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ
class App : RComponent() {
override fun RBuilder.render() {
div("title") {
+"Welcome to React with Kotlin"
}
}
}
SFOEFSϝιου͕
ʮ3#VJMEFSΫϥεͷ֦ுؔʯ
ͱͯ͠ఆٛ
Slide 12
Slide 12 text
,PUMJO+4Ͱʜ
w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ
class App : RComponent() {
override fun RBuilder.render() {
div("title") {
+"Welcome to React with Kotlin"
}
}
}
EJW
ϝιου
ˠEJWλάΛߏங͢Δ
Slide 13
Slide 13 text
fun RBuilder.div(
classes: String? = null,
block: RDOMBuilder
.() -> Unit
): ReactElement = …
,PUMJO+4Ͱʜ
w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ
class App : RComponent() {
override fun RBuilder.render() {
div("title") {
+"Welcome to React with Kotlin"
}
}
}
EJW
ϝιου
ˠ3#VJMEFSΫϥεͷ֦ுؔ
Slide 14
Slide 14 text
fun RBuilder.div(
classes: String? = null,
block: RDOMBuilder
.() -> Unit
): ReactElement = …
,PUMJO+4Ͱʜ
w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ
class App : RComponent() {
override fun RBuilder.render() {
div("title") {
+"Welcome to React with Kotlin"
}
}
}
SFOEFS
είʔϓͷUIJT
3#VJMEFSΫϥε
ˠUIJTEJW\ʜ^ EJW\ʜ^
)UNMͬΆ͍ݟͨͰॻ͚Δ
ˠ֦ுؔͰείʔϓ੍ޚ
Slide 15
Slide 15 text
fun RBuilder.div(
classes: String? = null,
block: RDOMBuilder
.() -> Unit
): ReactElement = …
,PUMJO+4Ͱʜ
w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ
class App : RComponent() {
override fun RBuilder.render() {
div("title") {
+"Welcome to React with Kotlin"
}
}
}
ϥϜμࣜ
ҾΛऔΒͳ͍ɺԿฦ͞ͳ͍
είʔϓͷUIJT͕
3%0.#VJMEFSʹͳΔ
˞3%0.#VJMEFSFYUFOET3#VJMEFS
Slide 16
Slide 16 text
,PUMJO+4Ͱʜ
w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ
class App : RComponent() {
override fun RBuilder.render() {
div("title") {
+"Welcome to React with Kotlin"
}
}
}
ԋࢉࢠΦʔόʔϩʔυ
ˠʮEJWλάͰจࣈྻΛڬΉʯ
ˠPQFSBUPSGVO4USJOHVOBSZ1MVT
Ͳ͜Ͱ࣮͞ΕͯΔͷʁ
Slide 17
Slide 17 text
w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ
open class RBuilder {
operator fun String.unaryPlus() {
childList.add(this)
}
...
}
,PUMJO+4Ͱʜ
class App : RComponent() {
override fun RBuilder.render() {
div("title") {
+"Welcome to React with Kotlin"
}
}
}
3#VJMEFSͷதʹ࣮ʂ
SFOEFSEJWͷείʔϓͳΒ
zIPHFzˠDIJME-JTUBEE lIPHFz
ˠϥϜμࣜʹΑΔ
είʔϓ੍ޚͷ͓͔͛
ˠԋࢉࢠΦʔόʔϩʔυ ࠇຐज़
͑ΔՕॴΛݶఆɺ෭࡞༻⾪
Slide 18
Slide 18 text
·ͱΊ
w ϥϜμࣜɺ֦ுؔɺԋࢉࢠΦʔόʔϩʔυͷϞμϯͳจ๏
w ݴޠͱͯ͠ͷදݱྗ͕ߴ͍
w είʔϓ੍ޚΛҙࣝ͢Δͱɺීஈݣ͍ͷ࣌ʹ׆͔ͤΔ
w "OESPJEαʔόʔαΠυ͔ΒˠΓͳ͘ͳ͖ͬͯͨΒ,PUMJO+4
Slide 19
Slide 19 text
,PUMJO+4ͱͷ֨ಆͷه
w ͖͔͚ͬ
w #ʮαʔόʔαΠυ,PUMJO৮Γ͍ͨʔʯˠௐΔ
w #ʮ,PUMJO+4ʜʁɹϑϩϯτ,PUMJOͰॻ͚Δͷ͔ʯˠॻ͍ͯΈΔ
Slide 20
Slide 20 text
,PUMJO+4ͱͷ֨ಆͷه
w ׂͱΠέͨ
DSFBUFSFBDULPUMJOBQQ (JUIVC
w ,PUMJO+4 3FBDUͷڥΛ
༻ҙͯ͘͠ΕΔOQNϞδϡʔϧ
w $44͔Β)UNM·Ͱશͯ,PUMJOԽͰ͖ͨ
Slide 21
Slide 21 text
,PUMJOͷ8FCαΠτ
࡞Δ͔͠Ͷ͑ʂ
,PUMJOͷ8FCαΠτ࣮࣭ͬͯখௗ͞ΜͩΑͶʜ
ͦΕ࡞ͬͨΒখௗ͞ΜͷੜΈͷͱݴͬͯաݴͰͳ͍ͷͰʜ
Slide 22
Slide 22 text
,PUMJO+4ͱͷ֨ಆͷه
w ࠈ͔͜͜Β
w +4ͷϥΠϒϥϦʮ.BUFSJBM6*ʯΛͬͯ࡞Δͧ
w ಥવͷొɺʮEZOBNJDʯܕ
@JsModule("@material-ui/core/Button")
private external val buttonModule: dynamic
@Suppress("UnsafeCastFromDynamic")
private val buttonComponent: RComponent
= buttonModule.default
ίϨ
Slide 23
Slide 23 text
,PUMJO+4ͱͷ֨ಆͷه
w EZNBOJDܕ,PUMJOͱ+4ͷϒϦοδʹඞਢͳຐ๏ͷܕ
w \GPPbGPP`
CBS\IPHF^^ͱ͍͏ΦϒδΣΫτͷ߹ʜ
val jsObject: dynamic = js("{ foo: 'foo', bar: { hoge: '111' } }")
print(jsObject["foo"]) // => 'foo'
print(jsObject["bar"]["hoge"]) // => 111
jsObject["aaa"]["bbb"] = "add from kotlin"
print(jsObject["aaa"]["bbb"]) // => add from kotlin
͋ɺ͋Γͷ··ࠓىͬͨ͜͜ͱΛͥ͢ʜ
ʮΦϨ,PUMJOΛॻ͍͍ͯΔͱࢥͬͨΒ
+BWBTDSJQUΛॻ͍͍ͯͨʯ
ͳɺԿΛݴͬͯΔ͔Θ͔ΒͶʔͱ SZ
Slide 24
Slide 24 text
,PUMJO+4ͱͷ֨ಆͷه
w +4ϥΠϒϥϦΛ͏ʹɺEZOBNJDΛΑ͠ͳʹม͢ΔΫϥε͕ඞਢʂ
w .BUFSJBM6*ɺίϯϙʔωϯτҎ্ɹશͯϥούʔ͕ඞཁ
w ϥούʔϥΠϒϥϦӶҙ࡞தʂ8FMDPNF$POUSJCVUFT
,PUMJO.BUFSJBM6*TVCSPILPUMJONBUFSJBMVJ
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
ࠓͳΒԿͯ͠Εͳ͘ઌۦऀʂ
,PUMJO+4ָ͍͠ʂ
ΈΜͳ৮ͬͯར༻࣮ྫ૿͑ͯཉ͍͠ʂ