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
400
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
46
Git勉強会
yt8492
0
100
なんでもやってみる勇気
yt8492
0
81
Android Autoが思ったよりしんどい話
yt8492
0
190
apollo-kotlinにcontributeした話
yt8492
0
120
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
830
今だからこそ知りたいKotlin Multiplatform
yt8492
0
290
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.2k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
200
Other Decks in Programming
See All in Programming
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
12
2.9k
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
770
A2A プロトコルを試してみる
azukiazusa1
2
940
イベントストーミングから始めるドメイン駆動設計
jgeem
4
870
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
エラーって何種類あるの?
kajitack
5
280
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
1
360
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
740
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
330
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
140
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
840
VS Code Update for GitHub Copilot
74th
0
130
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
A Tale of Four Properties
chriscoyier
160
23k
Adopting Sorbet at Scale
ufuk
77
9.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
We Have a Design System, Now What?
morganepeng
52
7.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
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に移行する