Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
サキドリJetpack Compose for Web
Yuta Tomiyama
May 12, 2021
Programming
0
81
サキドリJetpack Compose for Web
2021/05/12 Zli × ビズリーチ 合同LTにて発表
Yuta Tomiyama
May 12, 2021
Tweet
Share
More Decks by Yuta Tomiyama
See All by Yuta Tomiyama
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
46
Compose for Webを始めよう
yt8492
0
150
Compose Multiplatform 1.0.0
yt8492
0
58
Kotlin/NativeからCの標準ライブラリを呼び出そう
yt8492
0
59
2021年のKotlin入門
yt8492
0
140
Jetpack Compose + Decomposeで始めるクロスプラットフォーム開発
yt8492
1
170
Kotlin/MPPでブログを作った話
yt8492
0
470
Kotlin/JSでもSSGしたい!
yt8492
1
88
サーバーサイドKotlin/JSのフレームワークを作った話
yt8492
0
99
Other Decks in Programming
See All in Programming
Agile Tech EXPO_2022/カケハシ
kakehashi
0
110
Go1.19で採用された Pattern-defeating Quicksort の紹介
po3rin
7
1.6k
Carp言語さわってみた 〜鯉を取り戻せ編〜
tsin45
0
110
SRE NEXT 2022に学ぶこれからのSREキャリア
fukubaka0825
2
400
Pythonによる開発をアップデートするライブラリの紹介
daikikatsuragawa
1
810
RustのWebフレームワーク周りの概観
hayao
0
180
Atomic Design とテストの○○な話
takfjp
2
820
Rust on Lambda 大きめCSV生成
atsuyokota
1
400
WindowsコンテナDojo:第6回 Red Hat OpenShift入門
oniak3ibm
PRO
0
180
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
oniak3ibm
PRO
0
190
Git操作編
smt7174
2
260
NestJS_meetup_atamaplus
atamaplus
0
230
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1351
200k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Designing for Performance
lara
597
64k
Code Reviewing Like a Champion
maltzj
506
37k
Rails Girls Zürich Keynote
gr2m
87
12k
Pencils Down: Stop Designing & Start Developing
hursman
113
9.9k
Embracing the Ebb and Flow
colly
73
3.4k
A better future with KSS
kneath
226
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Adopting Sorbet at Scale
ufuk
63
7.6k
GraphQLの誤解/rethinking-graphql
sonatard
31
6.8k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.3k
Transcript
サキドリ Jetpack Compose for Web 2021/05/12 Zli × ビズリーチ 合同LT
自己紹介 HN: マヤミト 本名: 富山雄太 会津大学26期 (学部4年) 去年までZliの代表をやってました GitHub: https://github.com/yt8492
好きな言語: Kotlin, Scala, Go 最近はウマ娘に脳味噌を破壊されています Twitter: yt8492
Jetpack Composeって何? - Android のネイティブ UI を構築するための最新のツールキット(公式より) https://developer.android.com/jetpack/compose - Kotlinと宣言的UIでAndroidのネイティブ開発ができる
- まだベータ版 - 最近Android界隈で流行っているので調べると記事が結構出てくると思います
Compose for Desktopの登場 - AndroidのJetpack ComposeをベースにJetBrainsが開発 https://www.jetbrains.com/ja-jp/lp/compose/ https://github.com/jetbrains/compose-jb - 去年の11月に登場したばかりで現在アルファ版
- 描画にはSkiaを使用 - AWTやSwingとの相互運用が可能
そしてJetpack Compose for Web 2021/05/04にKotlin公式ブログで発表 https://blog.jetbrains.com/kotlin/2021/05/technology-preview-jetpack-co mpose-for-web/
Jetpack Compose for Web 概要 - ※まだTechnology preview - チュートリアルもドキュメントもパフォーマンス最適化もまだまだ
- Kotlin/JS向けのJetpack Compose - Kotlin/MPPと他のJetpack Composeと組み合わせてUIコード共有ができる - DOM APIとMultiplatform Widgetsを提供する - DOM API: divやaなど - Multiplatform Widgets: Text, Button, Row, Columnなど
実際に使ってみよう
Reactのチュートリアルの三目並べを再現してみる - 題材として簡単 - 同じ宣言的UIなので似たようなコードでできそう - PropsとStateを使うので入門に最適
プロジェクトの準備 - Jetpack Compose for WebのGradle Pluginを取得するには settings.gradle.ktsにリポジトリの指定が必要
プロジェクトの準備 - build.gradle.ktsの例 - kotlin pluginはmultiplatform(重要) - jsだとなぜかinternal compiler errorに
- multiplatformでjsのみtargetにする
Compose可能な関数(コンポーネント) - @Composable をつける - 内部でComposableを呼び出すことができる - Propsは関数の引数にすればよい - Stateはライブラリ側で提供されているState型
を利用する - 後述 - Reactの関数コンポーネントとほぼ同じ
状態を扱う - Reactのfunctional componentではuseState hooksを使うが、Jetpack ComposeではState型とremember関数を使う - 状態として扱う型をStateでラップし、initial stateをremember関数のラムダに定義する -
変更可能なMutableStateとRead OnlyなStateに分かれる
main関数 - renderComposableでレンダリングしたいdivのidを指定し、ラムダにJetpack Composeのコードを渡す - Reactのrender関数みたいなもの
今回のリポジトリ - 全てを解説していたらLTではなくセッションになってしまうので https://github.com/yt8492/JetpackComposeForWebTicTacToe
デモ
触ってみた感想 - 流石にまともに使うにはまだ早い - 0.0.0-web-dev-12というversionから漂うヤバさ - ドキュメントもサンプルも少ないので扱うにはある種の「勘」が必要 - とはいえJetpack ComposeとReactを触ったことのある人間ならすんなりできそう
- kotlin-reactでよくない?(小声) - Reactの資産が使えないのは正直しんどい - Jetpack Compose for Webはこの先発展していくのだろうか? - 出たばかりなので良くも悪くも今後の動向に注目 - 今触れば先駆者になれるチャンス!
余談 - 遭遇したバグはIssueを立ててきました
あわせて読みたい - Kotlin/JSでWebフロント開発をはじめよう https://qiita.com/yt8492/items/250e4f7ac19fa8a66a74 - 過去の登壇資料(Kotlin/JS多め) https://speakerdeck.com/yt8492