2021/05/12 Zli × ビズリーチ 合同LTにて発表
サキドリJetpack Compose for Web2021/05/12 Zli × ビズリーチ 合同LT
View Slide
自己紹介HN: マヤミト本名: 富山雄太会津大学26期 (学部4年)去年までZliの代表をやってましたGitHub: https://github.com/yt8492好きな言語: Kotlin, Scala, Go最近はウマ娘に脳味噌を破壊されていますTwitter: yt8492
Jetpack Composeって何?- Android のネイティブ UI を構築するための最新のツールキット(公式より)https://developer.android.com/jetpack/compose- Kotlinと宣言的UIでAndroidのネイティブ開発ができる- まだベータ版- 最近Android界隈で流行っているので調べると記事が結構出てくると思います
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との相互運用が可能
そしてJetpack Compose for Web2021/05/04にKotlin公式ブログで発表https://blog.jetbrains.com/kotlin/2021/05/technology-preview-jetpack-compose-for-web/
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など
実際に使ってみよう
Reactのチュートリアルの三目並べを再現してみる- 題材として簡単- 同じ宣言的UIなので似たようなコードでできそう- PropsとStateを使うので入門に最適
プロジェクトの準備- Jetpack Compose for WebのGradle Pluginを取得するにはsettings.gradle.ktsにリポジトリの指定が必要
プロジェクトの準備- build.gradle.ktsの例- kotlin pluginはmultiplatform(重要)- jsだとなぜかinternal compiler errorに- multiplatformでjsのみtargetにする
Compose可能な関数(コンポーネント)- @Composable をつける- 内部でComposableを呼び出すことができる- Propsは関数の引数にすればよい- Stateはライブラリ側で提供されているState型を利用する- 後述- Reactの関数コンポーネントとほぼ同じ
状態を扱う- Reactのfunctional componentではuseState hooksを使うが、JetpackComposeではState型とremember関数を使う- 状態として扱う型をStateでラップし、initial stateをremember関数のラムダに定義する- 変更可能なMutableStateとRead OnlyなStateに分かれる
main関数- renderComposableでレンダリングしたいdivのidを指定し、ラムダにJetpackComposeのコードを渡す- Reactのrender関数みたいなもの
今回のリポジトリ- 全てを解説していたらLTではなくセッションになってしまうのでhttps://github.com/yt8492/JetpackComposeForWebTicTacToe
デモ
触ってみた感想- 流石にまともに使うにはまだ早い- 0.0.0-web-dev-12というversionから漂うヤバさ- ドキュメントもサンプルも少ないので扱うにはある種の「勘」が必要- とはいえJetpack ComposeとReactを触ったことのある人間ならすんなりできそう- kotlin-reactでよくない?(小声)- Reactの資産が使えないのは正直しんどい- Jetpack Compose for Webはこの先発展していくのだろうか?- 出たばかりなので良くも悪くも今後の動向に注目- 今触れば先駆者になれるチャンス!
余談- 遭遇したバグはIssueを立ててきました
あわせて読みたい- Kotlin/JSでWebフロント開発をはじめようhttps://qiita.com/yt8492/items/250e4f7ac19fa8a66a74- 過去の登壇資料(Kotlin/JS多め)https://speakerdeck.com/yt8492