Jetpack Compose for Webを使ってみた。
使い方や感想を書いていきます。
↓はサンプルです。
Jetpack Compose for Webとは
Reactive web UIs for Kotlin, based on Google's modern toolkit and brought to you by JetBrains
Compose for Web simplifies and accelerates UI development for web applications, and aims to enable UI code sharing between web, desktop, and Android applications in the future. Currently in technology preview.
GoogleのJetpack ComposeをベースとしたWeb用の宣言的UIフレームワークです。他にもJetpack Compose for Desktopもあります。
Jetpack ComposeのコードはAndroidとDesktop、Webで共有できます。
DOMの操作もサポートしており、Reactのような書き心地でUIを作成することができます。
ソースコード
Gradle
import org.jetbrains.compose.compose
repositories {
mavenCentral()
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}
// Add compose gradle plugin
plugins {
kotlin("multiplatform") version "1.5.31"
id("org.jetbrains.compose") version "1.0.0-alpha4-build362"
}
// Enable JS(IR) target and add dependencies
kotlin {
js(IR) {
browser()
binaries.executable()
}
sourceSets {
val jsMain by getting {
dependencies {
implementation(compose.web.core)
implementation(compose.web.widget)
implementation(compose.runtime)
}
}
}
}
compose.web {
}
kotlin("js")
を指定したらrun
タスクがorg.jetbrains.kotlin.js
とorg.jetbrains.compose
で競合していて適用できなかったので仕方なくmultiplatform
を使っています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<div id="root"></div>
<script src="REPLACE_WITH_YOUR_MODULE_NAME.js"></script>
</body>
</html>
REPLACE_WITH_YOUR_MODULE_NAME
にはモジュール名を入れます。サンプルではweb
モジュール内で作成しているのでweb.jsとなります。
import androidx.compose.runtime.*
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.keywords.auto
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.renderComposable
class ViewModel {
private val mutableStateFlow = MutableStateFlow(0)
val stateFlow: StateFlow<Int>
get() = mutableStateFlow
fun onIncrementState() {
mutableStateFlow.value++
}
}
val viewModel = ViewModel()
@Composable
fun App() {
val count by viewModel.stateFlow.collectAsState(viewModel.stateFlow.value, Dispatchers.Main)
P {
Text(count.toString())
}
Button(
attrs = {
onClick { viewModel.onIncrementState() }
}
) {
Text("Click")
}
}
fun main() {
renderComposable(rootElementId = "root") { // ベースとなる要素にレンダリング
App() // NOTE 他の関数に切り出さないと何故か怒られる
}
}
従来のJetpack Composeとほぼ変わりありません。
新しくHTMLの要素が使えるようになったくらいです。
現時点でJetpack Compose for Webではcompose.foundation
やcompose.material
は利用できないので注意が必要です。
結果
まとめ
僕自身まだ浅めの知識しかないので、とりあえず基本的な雰囲気だけ紹介しました。
Jetpack Compose for Webは現時点でテクニカルプレビューなのでお遊び程度のことしかできませんが、今後Flutterの対抗馬となり得るポテンシャルがあります。(もしかしたら将来for iOSも出るかも…?)
Author And Source
この問題について(Jetpack Compose for Webを使ってみた。), 我々は、より多くの情報をここで見つけました https://qiita.com/UramnOIL/items/11fcbd2f983ec126d01e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .