Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

E5ab6eb9fc8de68bf1610c7ad0c86155?s=47 texdeath
August 27, 2019

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

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

E5ab6eb9fc8de68bf1610c7ad0c86155?s=128

texdeath

August 27, 2019
Tweet

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