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
810
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
クライアントワークと管理画面の話
texdeath
0
85
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
570
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.4k
おさらいVue Composition API
texdeath
0
340
React使いがVueと仲良くなるためにやったこと
texdeath
0
230
Optional Chainingについて
texdeath
3
140
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
98
Container Componentは必要なのか
texdeath
4
590
Other Decks in Programming
See All in Programming
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.5k
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
使ってみよう Azure AI Document Intelligence
kosmosebi
2
360
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
310
Fast JSX: Don't clone props object #28768
yossydev
1
190
雑に思考を整理する技術と効能
konifar
63
30k
Try creating your own orderedmap
kazamori
1
210
Java 22 Overview
kishida
1
190
Apache Hive 4 on Treasure Data
ryukobayashi
1
420
Ruby Function Composition
bkuhlmann
1
340
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Polars入門
daikikatsuragawa
1
180
Featured
See All Featured
Scaling GitHub
holman
457
140k
What's in a price? How to price your products and services
michaelherold
238
11k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
RailsConf 2023
tenderlove
8
560
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Happy Clients
brianwarren
92
6.4k
Become a Pro
speakerdeck
PRO
13
4.6k
Product Roadmaps are Hard
iamctodd
45
9.7k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
[RailsConf 2023] Rails as a piece of cake
palkan
27
4k
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