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でReactアプリを作ってみた
Search
texdeath
August 27, 2019
Programming
1
920
Kotlin/JSでReactアプリを作ってみた
create-react-kotlin-appとMaterial-UIを使って簡単なTODOアプリを作ってみたので、Kotlinを初めて触ってみた所感をお話します。
texdeath
August 27, 2019
Tweet
Share
More Decks by texdeath
See All by texdeath
コードメトリクス計測による課題可視化と品質確保 / Visualize issues and ensure quality by measuring code metrics
texdeath
0
340
クライアントワークと管理画面の話
texdeath
0
230
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
650
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.8k
おさらいVue Composition API
texdeath
0
460
React使いがVueと仲良くなるためにやったこと
texdeath
0
290
Optional Chainingについて
texdeath
3
180
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
110
Container Componentは必要なのか
texdeath
4
640
Other Decks in Programming
See All in Programming
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.7k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
430
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
360
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
500
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
590
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
20
11k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
140
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
510
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
260
Cache Me If You Can
ryunen344
2
690
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
Featured
See All Featured
Code Review Best Practice
trishagee
70
19k
A Tale of Four Properties
chriscoyier
160
23k
Unsuck your backbone
ammeep
671
58k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Designing for Performance
lara
610
69k
For a Future-Friendly Web
brad_frost
180
9.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Being A Developer After 40
akosma
90
590k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Transcript
Kotlin/JSͰReactΞϓϦΛ࡞ͬͯΈͨ גࣜձࣾICS ా উॣ ྩݩ8݄27
ࣗݾհ ా উॣ (Γͨ ·͞ͱ͠) @texdeath લ৬: Ϡϑʔגࣜձࣾ → ݱ৬:
גࣜձࣾICS ϑϩϯτΤϯυΤϯδχΞ ීஈReact / Vue / Node.js ͋ͨΓΛॻ͍͍ͯ·͢
What is Kotlin/JS?
KotlinͷίʔυΛJSʹίϯύΠϧ͢Δ KotlinΛJavaScriptͷจ๏Ͱॻ͚Δ ⭕ ❌
Kotlin/JSͱɾɾɾ • KotlinͷϞμϯͳจ๏ΛϑϩϯτΤϯυଆͰ͑Δʂ • ϑϩϯτΤϯυΛKotlinʹدͤΔ͜ͱͰɺ҆શͰ؆ܿʹॻ͚Δ ϝϦοτΛڗडͰ͖Δ • ܕਪɾNull҆શɾwhenɾdata classͳͲ •
Kotlinࣗମ͕ϚϧνϓϥοτϑΥʔϜݴޠͰ૬ޓӡ༻ੑ͕͋Δ • ReactͷKotlinϥούʔ͕ఏڙ͞Ε͍ͯΔͷͰɺٕज़બఆָ
Kotlin/JSͱɾɾɾ • KotlinͷϞμϯͳจ๏ΛϑϩϯτΤϯυଆͰ͑Δʂ • ϑϩϯτΤϯυΛKotlinʹدͤΔ͜ͱͰɺ҆શͰ؆ܿʹॻ͚Δ ϝϦοτΛڗडͰ͖Δ • ܕਪɾNull҆શɾwhenɾdata classͳͲ •
Kotlinࣗମ͕ϚϧνϓϥοτϑΥʔϜݴޠͰ૬ޓӡ༻ੑ͕͋Δ • ReactͷKotlinϥούʔ͕ఏڙ͞Ε͍ͯΔͷͰɺٕज़બఆָ
Kotlin/JSͱɾɾɾ • KotlinͷϞμϯͳจ๏ΛϑϩϯτΤϯυଆͰ͑Δʂ • ϑϩϯτΤϯυΛKotlinʹدͤΔ͜ͱͰɺ҆શͰ؆ܿʹॻ͚Δ ϝϦοτΛڗडͰ͖Δ • ܕਪɾNull҆શɾwhenɾdata classͳͲ •
Kotlinࣗମ͕ϚϧνϓϥοτϑΥʔϜݴޠͰ૬ޓӡ༻ੑ͕͋Δ • ReactͷKotlinϥούʔ͕ఏڙ͞Ε͍ͯΔͷͰɺٕज़બఆָ
Sandbox https://try.kotlinlang.org/
ఆٛ͞ΕͨKotlinΦϒδΣΫτͷ֬ೝ mainؔͷΤΫεϙʔτͱݺͼग़͠ ಗ໊ؔશମ͕࣮ߦ͞ΕΔ
• create-react-kotlin-app͕Ұ൪ָ • JetBrains͕ϞδϡʔϧͷϥούʔΛग़ͯ͘͠Ε͍ͯΔ • react-routerɺreduxɺwebpackɺstyled-componentͳͲ • KotlinͰॻ͘ϝϦοτΛ่ͣ͞ʹΞϓϦέʔγϣϯͷઃܭ͕Մೳ • ิόονϦ
• JSͷϞδϡʔϧΠϯϙʔτͰ͖ΔͷͰɺखܰʹ৮ΕΔ Kotlin/JSͰReactΛѻ͏
JetBrains͕ఏڙ͍ͯ͠ΔɺKotlinͰϥοϓͨ͠create-react-app create-react-kotlin-app
create-react-kotlin-appΛͬͯΈΔ
σϞ GitHub URL https://github.com/texdeath/kotlin-todos
͜Μͳײ͡Ͱॻ͘ State, RBuilderʹ֦ுؔΛఆٛ είʔϓʹDOMΛهड़ͯ͠Ώ͘ɻ IntelliJͩͱͲͷείʔϓΛ ࢀরͯ͠Δ͔ग़ͯ͘͠ΕΔ
IntelliJ IDEAͷαϙʔτڧྗ
IntelliJ IDEAͷαϙʔτڧྗ ֦ுؔ෦ͷthis͕ Ͳ͜Λࢦ͍ͯ͠Δ͔ ҰͰΘ͔Δ
JSͷϞδϡʔϧͷΠϯϙʔτ
·ͱΊ • Kotlin/JavaΛॻ͍ͨ͜ͱ͕ͳͯ͘ΕΔײ • IntelliJ IDEAͰͷิຊʹڧྗ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Copyright 2019 ICS INC. All rights reserved. ా উॣ
@texdeath ICS MEDIATwitterͰΣϒςΫϊϩδʔͷใΛൃ৴த ics.media