2021/12/21 Kotlin愛好会 vol.33 にて発表
Compose for Webを始めよう2021/12/21 Kotlin愛好会 vol.33
View Slide
自己紹介HN: マヤミトID: yt8492会津大学 学部4年GitHub: https://github.com/yt8492趣味: Kotlin, Twitter, ウマ娘普段はZliという会津大の技術サークルで活動してますTwitter: yt8492yt8492.com
はじめに
Compose Multiplatform 1.0.0 Released🎉
Compose Multiplatformとは- Jetpack Composeをベースとした、高速かつリアクティブな、デスクトップとWebのUIフレームワーク- KotlinでDesktopとWebの開発ができるよ!やったね!- Compose for DesktopとCompose for Webで構成されている- Compose for Desktop- JVMで動く- レンダリングにSkiaを使用- AndroidとUIコンポーネントの共有が可能- Compose for Web- JSにトランスパイルする- DOMベース- わりとReactに近い- 1.0.0 Released🎉
Compose for Webについて- DOMベース ← ココ重要- Skiaベースではなく、現時点では Compose for DesktopやAndroidとUIの共通化はできない- Div、Img、Buttonなど、ReactのようにHTMLの要素に対応したComposable関数が用意されている- Modifierがない- おそらくここが他のComposeとの一番の差を感じるポイント- AttrBuilderContextというものを使って見た目やイベントリスナーの処理などを実装する- CSSに関してはAttrBuilderContextでstyled-component的にやるか、StyleSheetを継承したobjectを実装してCSSファイルを書くのに近い感じで書くかの選択肢がある- もちろんclassを指定してpureなCSSでやることもできる- rememberなどのAPIは他のComposeと同じ- 個人的な感想だが使用感はReactに近い
Compose for Webはじめかた
デモ
もう少し知りたい人は- TODOリストをCompose Multiplatformで作りました- 時間がなかったのでタスクの保存はオンメモリでやってるけど許して 🙏- yt8492/todoCompose- https://github.com/yt8492/todoCompose
やってみた感想など- 意外と普通に書けるがJetpack Compose感は薄い- 書き味がだいぶReact寄りなのでJetpack Composeの感覚からちょっと遠くなる- 周辺ライブラリの不足- 現状まだkotlin-reactに軍配があがりそう- Jimさんが将来的にSkiaベースでUIコード共有ができるようにしたいとは言っていた- まだまだ使ってる人は少ないので始めるなら今!- 先駆者になろう💪
当面の目標- kotlin-reactで作った自作ブログをCompose for Webに移行する