Kotlin/JSでReactアプリを作ってみた

create-react-kotlin-appとMaterial-UIを使って簡単なTODOアプリを作ってみたので、Kotlinを初めて触ってみた所感をお話します。

1. Kotlin/JSͰReactΞϓϦΛ࡞ͬͯΈͨ גࣜձࣾICS ৿ా উॣ ྩ࿨ݩ೥8݄27೔
2. ࣗݾ঺հ ৿ా উॣ (΋Γͨ ·͞ͱ͠) @texdeath લ৬: Ϡϑʔגࣜձࣾ → ݱ৬: גࣜձࣾICS ϑϩϯτΤϯυΤϯδχΞ ීஈ͸React / Vue / Node.js ͋ͨΓΛॻ͍͍ͯ·͢
3. What is Kotlin/JS?
4. KotlinͷίʔυΛJSʹίϯύΠϧ͢Δ KotlinΛJavaScriptͷจ๏Ͱॻ͚Δ ⭕ ❌
5. Kotlin/JSͱ͸ɾɾɾ • KotlinͷϞμϯͳจ๏ΛϑϩϯτΤϯυଆͰ࢖͑Δʂ • ϑϩϯτΤϯυΛKotlinʹدͤΔ͜ͱͰɺ҆શͰ؆ܿʹॻ͚Δ ϝϦοτΛڗडͰ͖Δ • ܕਪ࿦ɾNull҆શɾwhenɾdata classͳͲ • Kotlinࣗମ͕ϚϧνϓϥοτϑΥʔϜݴޠͰ૬ޓӡ༻ੑ͕͋Δ • ReactͷKotlinϥούʔ͕ఏڙ͞Ε͍ͯΔͷͰɺٕज़બఆ΋ָ
6. Kotlin/JSͱ͸ɾɾɾ • KotlinͷϞμϯͳจ๏ΛϑϩϯτΤϯυଆͰ࢖͑Δʂ • ϑϩϯτΤϯυΛKotlinʹدͤΔ͜ͱͰɺ҆શͰ؆ܿʹॻ͚Δ ϝϦοτΛڗडͰ͖Δ • ܕਪ࿦ɾNull҆શɾwhenɾdata classͳͲ • Kotlinࣗମ͕ϚϧνϓϥοτϑΥʔϜݴޠͰ૬ޓӡ༻ੑ͕͋Δ • ReactͷKotlinϥούʔ͕ఏڙ͞Ε͍ͯΔͷͰɺٕज़બఆ΋ָ
7. Kotlin/JSͱ͸ɾɾɾ • KotlinͷϞμϯͳจ๏ΛϑϩϯτΤϯυଆͰ࢖͑Δʂ • ϑϩϯτΤϯυΛKotlinʹدͤΔ͜ͱͰɺ҆શͰ؆ܿʹॻ͚Δ ϝϦοτΛڗडͰ͖Δ • ܕਪ࿦ɾNull҆શɾwhenɾdata classͳͲ • Kotlinࣗମ͕ϚϧνϓϥοτϑΥʔϜݴޠͰ૬ޓӡ༻ੑ͕͋Δ • ReactͷKotlinϥούʔ͕ఏڙ͞Ε͍ͯΔͷͰɺٕज़બఆ΋ָ
8. Sandbox https://try.kotlinlang.org/
9. ఆٛ͞ΕͨKotlinΦϒδΣΫτͷ֬ೝ mainؔ਺ͷΤΫεϙʔτͱݺͼग़͠ ಗ໊ؔ਺શମ͕࣮ߦ͞ΕΔ
10. • create-react-kotlin-app͕Ұ൪ָ • JetBrains͕ϞδϡʔϧͷϥούʔΛग़ͯ͘͠Ε͍ͯΔ • react-routerɺreduxɺwebpackɺstyled-componentͳͲ • KotlinͰॻ͘ϝϦοτΛ่ͣ͞ʹΞϓϦέʔγϣϯͷઃܭ͕Մೳ • ิ׬΋όονϦ • JSͷϞδϡʔϧ΋ΠϯϙʔτͰ͖ΔͷͰɺखܰʹ৮ΕΔ Kotlin/JSͰReactΛѻ͏
11. JetBrains͕ఏڙ͍ͯ͠ΔɺKotlinͰϥοϓͨ͠create-react-app create-react-kotlin-app
12. create-react-kotlin-appΛ࢖ͬͯΈΔ
13. σϞ GitHub URL https://github.com/texdeath/kotlin-todos
14. ͜Μͳײ͡Ͱॻ͘ State, RBuilderʹ֦ுؔ਺Λఆٛ είʔϓ಺ʹDOMΛهड़ͯ͠Ώ͘ɻ IntelliJͩͱͲͷείʔϓΛ ࢀরͯ͠Δ͔ग़ͯ͘͠ΕΔ
15. IntelliJ IDEAͷαϙʔτ΋ڧྗ
16. IntelliJ IDEAͷαϙʔτ΋ڧྗ ֦ுؔ਺಺෦ͷthis͕ Ͳ͜Λࢦ͍ͯ͠Δ͔ Ұ໨ͰΘ͔Δ
17. JSͷϞδϡʔϧͷΠϯϙʔτ
18. ·ͱΊ • Kotlin/JavaΛॻ͍ͨ͜ͱ͕ͳͯ͘΋΍ΕΔײ • IntelliJ IDEAͰͷิ׬͸ຊ౰ʹڧྗ
19. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Copyright 2019 ICS INC. All rights reserved. ৿ా উॣ @texdeath ICS MEDIA΍TwitterͰ΋΢ΣϒςΫϊϩδʔͷ৘ใΛൃ৴த ics.media