Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compose for Webを始めよう

Compose for Webを始めよう

2021/12/21 Kotlin愛好会 vol.33 にて発表

Yuta Tomiyama

December 21, 2021
Tweet

More Decks by Yuta Tomiyama

Other Decks in Programming

Transcript

  1. 自己紹介 HN: マヤミト ID: yt8492 会津大学 学部4年 GitHub: https://github.com/yt8492 趣味:

    Kotlin, Twitter, ウマ娘 普段はZliという会津大の技術サークルで活動してます Twitter: yt8492 yt8492.com
  2. 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🎉
  3. 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に近い
  4. やってみた感想など - 意外と普通に書けるがJetpack Compose感は薄い - 書き味がだいぶReact寄りなのでJetpack Composeの感覚からちょっと遠くなる - 周辺ライブラリの不足 -

    現状まだkotlin-reactに軍配があがりそう - Jimさんが将来的にSkiaベースでUIコード共有ができるようにしたいとは言っていた - まだまだ使ってる人は少ないので始めるなら今! - 先駆者になろう💪