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
890
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
290
クライアントワークと管理画面の話
texdeath
0
180
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
620
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.7k
おさらいVue Composition API
texdeath
0
420
React使いがVueと仲良くなるためにやったこと
texdeath
0
270
Optional Chainingについて
texdeath
3
170
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
100
Container Componentは必要なのか
texdeath
4
610
Other Decks in Programming
See All in Programming
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
130
CI改善もDatadogとともに
taumu
0
180
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
280
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
GAEログのコスト削減
mot_techtalk
0
120
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
260
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
330
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
140
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
120
Open source software: how to live long and go far
gaelvaroquaux
0
650
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Adopting Sorbet at Scale
ufuk
74
9.2k
RailsConf 2023
tenderlove
29
1k
What's in a price? How to price your products and services
michaelherold
244
12k
Designing for Performance
lara
604
68k
The Language of Interfaces
destraynor
156
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Product Roadmaps are Hard
iamctodd
PRO
50
11k
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