Compose for Webを始めよう

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

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