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
930
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
190
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
110
Container Componentは必要なのか
texdeath
4
640
Other Decks in Programming
See All in Programming
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
120
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
チームの境界をブチ抜いていけ
tokai235
0
180
オープンソースソフトウェアへの解像度🔬
utam0k
16
3k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
550
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
600
Go言語はstack overflowの夢を見るか?
logica0419
0
370
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
410
開発生産性を上げるための生成AI活用術
starfish719
3
1.2k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
How to Think Like a Performance Engineer
csswizardry
27
2k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
How to Ace a Technical Interview
jacobian
280
24k
Context Engineering - Making Every Token Count
addyosmani
7
260
Designing for Performance
lara
610
69k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Statistics for Hackers
jakevdp
799
220k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
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