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
110
サキドリ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
今だからこそ知りたいKotlin Multiplatform
yt8492
0
36
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
760
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
69
Compose for Webを始めよう
yt8492
0
190
Compose Multiplatform 1.0.0
yt8492
0
74
Kotlin/NativeからCの標準ライブラリを呼び出そう
yt8492
0
81
2021年のKotlin入門
yt8492
0
170
Jetpack Compose + Decomposeで始めるクロスプラットフォーム開発
yt8492
1
210
Kotlin/MPPでブログを作った話
yt8492
0
510
Other Decks in Programming
See All in Programming
tidy_rpart
bk_18
0
610
まだ日本国内で利用できないAppActionsにトライしてみた / MoT TechTalk #15
mot_techtalk
0
120
Qiita Night PHP 2023
fuwasegu
0
11k
Rust、何もわからない...#6発表資料
ryu19
0
130
Writing Greener Java Applications
hollycummins
0
350
PHPDocにおける配列の型定義を少し知る
shimabox
1
140
量子コンピュータ時代のプログラミングセミナー / 20230119_Amplify_seminar _shift_optimization
fixstars
0
190
PHP でガチの電卓を作る
memory1994
PRO
1
110
Becoming an Android Librarian (Android World Wide 2023 Jan)
skydoves
2
220
Unity+C#で学ぶ! メモリレイアウトとvtableのすゝめ 〜動的ポリモーフィズムを実現する仕組み〜
rossam
1
270
Swift Observation
shiz
4
290
Milestoner
bkuhlmann
1
250
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Unsuck your backbone
ammeep
659
56k
Designing for Performance
lara
600
65k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
Visualization
eitanlees
128
12k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
7.9k
Designing for humans not robots
tammielis
245
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
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