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
サキドリJetpack Compose for Web
Search
Yuta Tomiyama
May 12, 2021
Programming
0
130
サキドリ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
58
Android Autoが思ったよりしんどい話
yt8492
0
170
apollo-kotlinにcontributeした話
yt8492
0
98
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
780
今だからこそ知りたいKotlin Multiplatform
yt8492
0
260
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.2k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
180
Compose for Webを始めよう
yt8492
0
370
Compose Multiplatform 1.0.0
yt8492
0
150
Other Decks in Programming
See All in Programming
PRレビューのお供にDanger
stoticdev
1
240
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1.1k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
630
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
170
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
240
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
JAWS Days 2025のインフラ
komakichi
1
120
バッチを作らなきゃとなったときに考えること
irof
2
540
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
170
CloudNativePGを布教したい
nnaka2992
0
120
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
2
580
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Typedesign – Prime Four
hannesfritz
41
2.5k
Bash Introduction
62gerente
611
210k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Facilitating Awesome Meetings
lara
53
6.2k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
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