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

Transcript

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