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
330
クライアントワークと管理画面の話
texdeath
0
220
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
640
中期プロジェクトで 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のメモリー
watany
12
1.2k
JetBrainsのAI機能の紹介 #jjug
yusuke
0
180
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
7
1.7k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
920
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
750
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
120
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
0
170
Vibe coding コードレビュー
kinopeee
0
410
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
170
decksh - a little language for decks
ajstarks
4
21k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.7k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Code Review Best Practice
trishagee
69
19k
Building Applications with DynamoDB
mza
95
6.5k
Producing Creativity
orderedlist
PRO
346
40k
Gamification - CAS2011
davidbonilla
81
5.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Scaling GitHub
holman
461
140k
Code Reviewing Like a Champion
maltzj
524
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
It's Worth the Effort
3n
185
28k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
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