Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Kotlin/JSと格闘しながらKotlinのイケてる文法を学ぶ
Search
subroh_0508
March 19, 2019
Technology
0
760
Kotlin/JSと格闘しながらKotlinのイケてる文法を学ぶ
【とらのあな主催】オタクがKotlinを追うライトニングトークイベントのLT発表資料です
subroh_0508
March 19, 2019
Tweet
Share
More Decks by subroh_0508
See All by subroh_0508
Compose MultiplatformでもHot Reloadが動くらしい
subroh0508
1
100
Compose for Webでポートフォリオサイトを作る
subroh0508
1
150
あらゆるアプリをCompose Multiplatformで書きたい! -ネイティブアプリの「あの機能」を私たちはどう作るか-
subroh0508
1
2.6k
登壇の心理的ハードルをコントロールする技術
subroh0508
2
550
テストコードを書きながらCompose Multiplatformを乗りこなす
subroh0508
0
890
自己効力感を二次元アイドル作品から得ながら社会人としての成長を超加速させる
subroh0508
2
720
担当アイドルを応援する傘を作ろう! (として失敗した話)
subroh0508
0
610
buildSrc/Composite Buildで必要なバージョン情報も Version Catalogから参照したい!
subroh0508
0
1.6k
フロントエンドもJetpack Composeで書きたい! -Compose for WebはモダンWebアプリケーションの夢を見るか?-
subroh0508
0
930
Other Decks in Technology
See All in Technology
Pwned Labsのすゝめ
ken5scal
2
540
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
330
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
240
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
250
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
110
AIエージェント入門
minorun365
PRO
33
19k
日経のデータベース事業とElasticsearch
hinatades
PRO
0
260
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
1
850
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
130
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
170
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Building Adaptive Systems
keathley
40
2.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Facilitating Awesome Meetings
lara
53
6.3k
4 Signs Your Business is Dying
shpigford
183
22k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Why Our Code Smells
bkeepers
PRO
336
57k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
530
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Become a Pro
speakerdeck
PRO
26
5.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Transcript
,PUMJO+4ͱ֨ಆ͠ͳ͕Β ,PUMJOͷΠέͯΔจ๏ΛֶͿ ʹ͜͠Γ͞ͿΖʙ!TVCSPI@
ࣗݾհ w ʹ͜͠Γ͞ͿΖʙ ຊ໊ࡔ্৴ w גࣜձࣾ#FBS5BJM w "OESPJEΤϯδχΞ ,PUMJO+BWB
ˑ w 8FCΤϯδχΞ 3BJMT3FBDU w ,PUMJOྺ
࣍ ,PUMJO+4ͷ֓ཁ ,PUMJOͷΠέͯΔจ๏հ w ϥϜμࣜ w ֦ுؔ w
ԋࢉࢠΦʔόʔϩʔυ ,PUMJO+4ͱͷ֨ಆͷه
,PUMJO+4ͷ֓ཁ w ϑϩϯτΤϯυͷίʔυ,PUMJOͰॻ͍ͯ͠·͓͏ʂ w ,PUMJOˠ+4ʹมɺ(SBEMFϓϥάΠϯΛ+FU#SBJOT͕ఏڙ w LPUMJOKTɺLPUMJOGSPOUFOEQMVHJO w (SBEMFʹίϯύΠϧ8FCQBDLͷઃఆΛهड़ w
࣮ߦˠ+4มޙͷϑΝΠϧ͕ग़ྗ͞ΕΔ
,PUMJOͰ+4͕ॻ͚Δʜ w ܕ҆શʂॻ͖׳Εͨ,PUMJOͰϑϩϯτΤϯυॻָ͚͍ͯ͠ʂ w ਓྨʹ·ͩૣ͗͢Δ ࣮ࡍʹ֨ಆͨ࣌͠ͷͭΒΈޙ΄Ͳʜ w ίʔυϦʔσΟϯάˠ,PUMJOͷݴޠ༷Λϑϧʹ׆༻ w
ಛʹΑͦ͞͏ͳϞϊΛ͍͔ͭ͘հ w %4- υϝΠϯݻ༗ݴޠ ͷ࣮ʹʹཱͭ
,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
,PUMJOͷΠέͯΔจ๏հ w ֦ுؔطଘͷΫϥεʹ֎͔Β৽ؔ͘͠ΛՃ͢Δ w 4UBUJDͳϝιουΛՃ+BWB͔ΒΫϥεϝιουͱͯ͠ղऍ // Int型のリストに平均値を返す関数を追加 fun List<Int>.average(): Double
{ return this.sum().toDouble() / this.size.toDouble() } print(listOf(1, 2, 3, 4).average()) // => 2.5
,PUMJOͷΠέͯΔจ๏հ w ԋࢉࢠΦʔόʔϩʔυԋࢉࢠͷॲཧΛॻ͖͑Δ w ීஈ͔͍ͮ͋·Γ͠ͳ͍ɺ%4-Λ࡞Δ࣌ʹͱͯศར data class Person(val name: String)
data class People(val names: List<String>) // Person同士を足してPeopleに変換して返す operator fun Person.plus(other: Person): People = People(listOf(this.name, other.name)) Person("音無小鳥") + Person("青羽美咲") // => People(["音無小鳥", "青羽美咲"])
,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override
fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } class App extends React.Component { render() { return ( <div className='title'> Welcome to React with Kotlin </div> ) } } ,PUMJO+4 3FBDU
,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override
fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } }
,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override
fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } SFOEFSϝιου͕ ʮ3#VJMEFSΫϥεͷ֦ுؔʯ ͱͯ͠ఆٛ
,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override
fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } EJW ϝιου ˠEJWλάΛߏங͢Δ
fun RBuilder.div( classes: String? = null, block: RDOMBuilder<DIV>.() -> Unit
): ReactElement = … ,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } EJW ϝιου ˠ3#VJMEFSΫϥεͷ֦ுؔ
fun RBuilder.div( classes: String? = null, block: RDOMBuilder<DIV>.() -> Unit
): ReactElement = … ,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } SFOEFS είʔϓͷUIJT 3#VJMEFSΫϥε ˠUIJTEJW\ʜ^EJW\ʜ^ )UNMͬΆ͍ݟͨͰॻ͚Δ ˠ֦ுؔͰείʔϓ੍ޚ
fun RBuilder.div( classes: String? = null, block: RDOMBuilder<DIV>.() -> Unit
): ReactElement = … ,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } ϥϜμࣜ ҾΛऔΒͳ͍ɺԿฦ͞ͳ͍ είʔϓͷUIJT͕ 3%0.#VJMEFSʹͳΔ ˞3%0.#VJMEFSFYUFOET3#VJMEFS
,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override
fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } ԋࢉࢠΦʔόʔϩʔυ ˠʮEJWλάͰจࣈྻΛڬΉʯ ˠPQFSBUPSGVO4USJOHVOBSZ1MVT Ͳ͜Ͱ࣮͞ΕͯΔͷʁ
w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ open class RBuilder { operator fun String.unaryPlus() {
childList.add(this) } ... } ,PUMJO+4Ͱʜ class App : RComponent<RProps, RState>() { override fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } 3#VJMEFSͷதʹ࣮ʂ SFOEFSEJWͷείʔϓͳΒ zIPHFzˠDIJME-JTUBEE lIPHFz ˠϥϜμࣜʹΑΔ είʔϓ੍ޚͷ͓͔͛ ˠԋࢉࢠΦʔόʔϩʔυࠇຐज़ ͑ΔՕॴΛݶఆɺ෭࡞༻⾪
·ͱΊ w ϥϜμࣜɺ֦ுؔɺԋࢉࢠΦʔόʔϩʔυͷϞμϯͳจ๏ w ݴޠͱͯ͠ͷදݱྗ͕ߴ͍ w είʔϓ੍ޚΛҙࣝ͢Δͱɺීஈݣ͍ͷ࣌ʹ׆͔ͤΔ w "OESPJEαʔόʔαΠυ͔ΒˠΓͳ͘ͳ͖ͬͯͨΒ,PUMJO+4
,PUMJO+4ͱͷ֨ಆͷه w ͖͔͚ͬ w #ʮαʔόʔαΠυ,PUMJO৮Γ͍ͨʔʯˠௐΔ w #ʮ,PUMJO+4ʜʁɹϑϩϯτ,PUMJOͰॻ͚Δͷ͔ʯˠॻ͍ͯΈΔ
,PUMJO+4ͱͷ֨ಆͷه w ׂͱΠέͨ DSFBUFSFBDULPUMJOBQQ (JUIVC w ,PUMJO+4 3FBDUͷڥΛ ༻ҙͯ͘͠ΕΔOQNϞδϡʔϧ
w $44͔Β)UNM·Ͱશͯ,PUMJOԽͰ͖ͨ
,PUMJOͷ8FCαΠτ ࡞Δ͔͠Ͷ͑ʂ ,PUMJOͷ8FCαΠτ࣮࣭ͬͯখௗ͞ΜͩΑͶʜ ͦΕ࡞ͬͨΒখௗ͞ΜͷੜΈͷͱݴͬͯաݴͰͳ͍ͷͰʜ
,PUMJO+4ͱͷ֨ಆͷه w ࠈ͔͜͜Β w +4ͷϥΠϒϥϦʮ.BUFSJBM6*ʯΛͬͯ࡞Δͧ w ಥવͷొɺʮEZOBNJDʯܕ @JsModule("@material-ui/core/Button") private external
val buttonModule: dynamic @Suppress("UnsafeCastFromDynamic") private val buttonComponent: RComponent<RProps, RState> = buttonModule.default ίϨ
,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
,PUMJO+4ͱͷ֨ಆͷه w +4ϥΠϒϥϦΛ͏ʹɺEZOBNJDΛΑ͠ͳʹม͢ΔΫϥε͕ඞਢʂ w .BUFSJBM6*ɺίϯϙʔωϯτҎ্ɹશͯϥούʔ͕ඞཁ w ϥούʔϥΠϒϥϦӶҙ࡞தʂ8FMDPNF$POUSJCVUFT ,PUMJO.BUFSJBM6*TVCSPILPUMJONBUFSJBMVJ
None
ࠓͳΒԿͯ͠Εͳ͘ઌۦऀʂ ,PUMJO+4ָ͍͠ʂ ΈΜͳ৮ͬͯར༻࣮ྫ૿͑ͯཉ͍͠ʂ