サキドリJetpack Compose for Web

2021/05/12 Zli × ビズリーチ 合同LTにて発表

Transcript

1. サキドリ
   Jetpack Compose for Web
   2021/05/12 Zli × ビズリーチ 合同LT
   

   View Slide

2. 自己紹介
   HN: マヤミト
   本名: 富山雄太
   会津大学26期 (学部4年)
   去年までZliの代表をやってました
   GitHub: https://github.com/yt8492
   好きな言語: Kotlin, Scala, Go
   最近はウマ娘に脳味噌を破壊されています
   Twitter: yt8492
   

   View Slide

3. Jetpack Composeって何？
   - Android のネイティブ UI を構築するための最新のツールキット(公式より)
   https://developer.android.com/jetpack/compose
   - Kotlinと宣言的UIでAndroidのネイティブ開発ができる
   - まだベータ版
   - 最近Android界隈で流行っているので調べると記事が結構出てくると思います
   

   View Slide

4. Compose for Desktopの登場
   - AndroidのJetpack ComposeをベースにJetBrainsが開発
   https://www.jetbrains.com/ja-jp/lp/compose/
   https://github.com/jetbrains/compose-jb
   - 去年の11月に登場したばかりで現在アルファ版
   - 描画にはSkiaを使用
   - AWTやSwingとの相互運用が可能
   

   View Slide

5. そしてJetpack Compose for Web
   2021/05/04にKotlin公式ブログで発表
   https://blog.jetbrains.com/kotlin/2021/05/technology-preview-jetpack-co
   mpose-for-web/
   

   View Slide

6. Jetpack Compose for Web 概要
   - ※まだTechnology preview
   - チュートリアルもドキュメントもパフォーマンス最適化もまだまだ
   - Kotlin/JS向けのJetpack Compose
   - Kotlin/MPPと他のJetpack Composeと組み合わせてUIコード共有ができる
   - DOM APIとMultiplatform Widgetsを提供する
   - DOM API: divやaなど
   - Multiplatform Widgets: Text, Button, Row, Columnなど
   

   View Slide

7. 実際に使ってみよう
   

   View Slide

8. Reactのチュートリアルの三目並べを再現してみる
   - 題材として簡単
   - 同じ宣言的UIなので似たようなコードでできそう
   - PropsとStateを使うので入門に最適
   

   View Slide

9. プロジェクトの準備
   - Jetpack Compose for WebのGradle Pluginを取得するには
   settings.gradle.ktsにリポジトリの指定が必要
   

   View Slide

10. プロジェクトの準備
    - build.gradle.ktsの例
    - kotlin pluginはmultiplatform(重要)
    - jsだとなぜかinternal compiler errorに
    - multiplatformでjsのみtargetにする
    

    View Slide

11. Compose可能な関数(コンポーネント)
    - @Composable をつける
    - 内部でComposableを呼び出すことができる
    - Propsは関数の引数にすればよい
    - Stateはライブラリ側で提供されているState型
    を利用する
    - 後述
    - Reactの関数コンポーネントとほぼ同じ
    

    View Slide

12. 状態を扱う
    - Reactのfunctional componentではuseState hooksを使うが、Jetpack
    ComposeではState型とremember関数を使う
    - 状態として扱う型をStateでラップし、initial stateをremember関数のラムダに定義する
    - 変更可能なMutableStateとRead OnlyなStateに分かれる
    

    View Slide

13. main関数
    - renderComposableでレンダリングしたいdivのidを指定し、ラムダにJetpack
    Composeのコードを渡す
    - Reactのrender関数みたいなもの
    

    View Slide

14. 今回のリポジトリ
    - 全てを解説していたらLTではなくセッションになってしまうので󰢛
    https://github.com/yt8492/JetpackComposeForWebTicTacToe
    

    View Slide

15. デモ
    

    View Slide

16. 触ってみた感想
    - 流石にまともに使うにはまだ早い
    - 0.0.0-web-dev-12というversionから漂うヤバさ
    - ドキュメントもサンプルも少ないので扱うにはある種の「勘」が必要
    - とはいえJetpack ComposeとReactを触ったことのある人間ならすんなりできそう
    - kotlin-reactでよくない？(小声)
    - Reactの資産が使えないのは正直しんどい
    - Jetpack Compose for Webはこの先発展していくのだろうか？
    - 出たばかりなので良くも悪くも今後の動向に注目
    - 今触れば先駆者になれるチャンス！
    

    View Slide

17. 余談
    - 遭遇したバグはIssueを立ててきました
    

    View Slide

18. あわせて読みたい
    - Kotlin/JSでWebフロント開発をはじめよう
    https://qiita.com/yt8492/items/250e4f7ac19fa8a66a74
    - 過去の登壇資料(Kotlin/JS多め)
    https://speakerdeck.com/yt8492
    

    View Slide