$30 off During Our Annual Pro Sale. View Details »

サキドリJetpack Compose for Web

サキドリJetpack Compose for Web

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

Yuta Tomiyama

May 12, 2021
Tweet

More Decks by Yuta Tomiyama

Other Decks in Programming

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