Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compose for Webを始めよう

Yuta Tomiyama
December 21, 2021
Programming
0
190

Compose for Webを始めよう

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

Yuta Tomiyama

December 21, 2021
Tweet

More Decks by Yuta Tomiyama

See All by Yuta Tomiyama
今だからこそ知りたいKotlin Multiplatform
yt8492
0
35
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
760
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
67
Compose Multiplatform 1.0.0
yt8492
0
74
Kotlin/NativeからCの標準ライブラリを呼び出そう
yt8492
0
78
2021年のKotlin入門
yt8492
0
170
Jetpack Compose + Decomposeで始めるクロスプラットフォーム開発
yt8492
1
210
Kotlin/MPPでブログを作った話
yt8492
0
510
サキドリJetpack Compose for Web
yt8492
0
100

Other Decks in Programming

See All in Programming
Above All, Make It Fun! #fjordbootcamp / make it fun
kakutani
6
550
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
150
eBPF와 함께 이해하는 Cilium 네트워킹
hadaney
3
830
SHOWROOMの分析目的を意識した伝え方・コミュニケーション
hatapu
0
230
Refactor with using `available` and `deprecated`
417_72ki
3
370
Enumを自動で網羅的にテストしてみた
estie
0
1.2k
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
310
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
330
Ruby Pattern Matching
bkuhlmann
0
600
Excelの助けを借りて楽にシナリオを作ろう
rpa_niiyama
0
200
PHPDocにおける配列の型定義を少し知る
shimabox
1
120
CDKでValidationする本当の方法 / cdk-validation
gotok365
1
160

Featured

See All Featured
What's in a price? How to price your products and services
michaelherold
233
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
390
Happy Clients
brianwarren
90
5.8k
In The Pink: A Labor of Love
frogandcode
132
21k
Web Components: a chance to create the future
zenorocha
304
40k
Facilitating Awesome Meetings
lara
33
4.6k
Navigating Team Friction
lara
176
12k
Thoughts on Productivity
jonyablonski
49
2.7k
Git: the NoSQL Database
bkeepers
PRO
418
60k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k

Transcript

  1. Compose for Webを始めよう 2021/12/21 Kotlin愛好会 vol.33

  2. 自己紹介 HN: マヤミト ID: yt8492 会津大学 学部4年 GitHub: https://github.com/yt8492 趣味:

    Kotlin, Twitter, ウマ娘 普段はZliという会津大の技術サークルで活動してます Twitter: yt8492 yt8492.com

  3. はじめに

  4. None

  5. Compose Multiplatform 1.0.0 Released🎉

  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🎉

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

  8. Compose for Webはじめかた

  9. Compose for Webはじめかた

  10. デモ

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

    https://github.com/yt8492/todoCompose

  12. やってみた感想など - 意外と普通に書けるがJetpack Compose感は薄い - 書き味がだいぶReact寄りなのでJetpack Composeの感覚からちょっと遠くなる - 周辺ライブラリの不足 -

    現状まだkotlin-reactに軍配があがりそう - Jimさんが将来的にSkiaベースでUIコード共有ができるようにしたいとは言っていた - まだまだ使ってる人は少ないので始めるなら今！ - 先駆者になろう💪

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