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. Compose for Webを始めよう
    2021/12/21 Kotlin愛好会 vol.33

    View Slide

  2. 自己紹介
    HN: マヤミト
    ID: yt8492
    会津大学 学部4年
    GitHub: https://github.com/yt8492
    趣味: Kotlin, Twitter, ウマ娘
    普段はZliという会津大の技術サークルで活動してます
    Twitter: yt8492
    yt8492.com

    View Slide

  3. はじめに

    View Slide

  4. View Slide

  5. Compose Multiplatform 1.0.0 Released🎉

    View Slide

  6. 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🎉

    View Slide

  7. 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に近い

    View Slide

  8. Compose for Webはじめかた

    View Slide

  9. Compose for Webはじめかた

    View Slide

  10. デモ

    View Slide

  11. もう少し知りたい人は
    - TODOリストをCompose Multiplatformで作りました
    - 時間がなかったのでタスクの保存はオンメモリでやってるけど許して 🙏
    - yt8492/todoCompose
    - https://github.com/yt8492/todoCompose

    View Slide

  12. やってみた感想など
    - 意外と普通に書けるがJetpack Compose感は薄い
    - 書き味がだいぶReact寄りなのでJetpack Composeの感覚からちょっと遠くなる
    - 周辺ライブラリの不足
    - 現状まだkotlin-reactに軍配があがりそう
    - Jimさんが将来的にSkiaベースでUIコード共有ができるようにしたいとは言っていた
    - まだまだ使ってる人は少ないので始めるなら今!
    - 先駆者になろう💪

    View Slide

  13. 当面の目標
    - kotlin-reactで作った自作ブログをCompose for Webに移行する

    View Slide