Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Compose for Webを始めよう
Search
Yuta Tomiyama
December 21, 2021
Programming
0
370
Compose for Webを始めよう
2021/12/21 Kotlin愛好会 vol.33 にて発表
Yuta Tomiyama
December 21, 2021
Tweet
Share
More Decks by Yuta Tomiyama
See All by Yuta Tomiyama
なんでもやってみる勇気
yt8492
0
60
Android Autoが思ったよりしんどい話
yt8492
0
170
apollo-kotlinにcontributeした話
yt8492
0
99
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
780
今だからこそ知りたいKotlin Multiplatform
yt8492
0
260
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.2k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
180
Compose Multiplatform 1.0.0
yt8492
0
150
Kotlin/NativeからCの標準ライブラリを呼び出そう
yt8492
0
390
Other Decks in Programming
See All in Programming
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
1
220
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
740
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
410
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
290
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
9
1.5k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
950
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
250
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
200
良いコードレビューとは
danimal141
9
7.8k
AWS Step Functions は CDK で書こう!
konokenj
5
870
Featured
See All Featured
Designing Experiences People Love
moore
140
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
KATA
mclloyd
29
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Fireside Chat
paigeccino
35
3.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
Speed Design
sergeychernyshev
28
820
Transcript
Compose for Webを始めよう 2021/12/21 Kotlin愛好会 vol.33
自己紹介 HN: マヤミト ID: yt8492 会津大学 学部4年 GitHub: https://github.com/yt8492 趣味:
Kotlin, Twitter, ウマ娘 普段はZliという会津大の技術サークルで活動してます Twitter: yt8492 yt8492.com
はじめに
None
Compose Multiplatform 1.0.0 Released🎉
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🎉
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に近い
Compose for Webはじめかた
Compose for Webはじめかた
デモ
もう少し知りたい人は - TODOリストをCompose Multiplatformで作りました - 時間がなかったのでタスクの保存はオンメモリでやってるけど許して 🙏 - yt8492/todoCompose -
https://github.com/yt8492/todoCompose
やってみた感想など - 意外と普通に書けるがJetpack Compose感は薄い - 書き味がだいぶReact寄りなのでJetpack Composeの感覚からちょっと遠くなる - 周辺ライブラリの不足 -
現状まだkotlin-reactに軍配があがりそう - Jimさんが将来的にSkiaベースでUIコード共有ができるようにしたいとは言っていた - まだまだ使ってる人は少ないので始めるなら今! - 先駆者になろう💪
当面の目標 - kotlin-reactで作った自作ブログをCompose for Webに移行する