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
410
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
66
Git勉強会
yt8492
0
150
なんでもやってみる勇気
yt8492
0
100
Android Autoが思ったよりしんどい話
yt8492
0
210
apollo-kotlinにcontributeした話
yt8492
0
150
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
860
今だからこそ知りたいKotlin Multiplatform
yt8492
0
300
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.3k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
210
Other Decks in Programming
See All in Programming
CSC509 Lecture 05
javiergs
PRO
0
310
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
16
6.5k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
290
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
250
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
Google Opalで使える37のライブラリ
mickey_kubo
3
130
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
240
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Invisible Side of Design
smashingmag
302
51k
Code Reviewing Like a Champion
maltzj
526
40k
Thoughts on Productivity
jonyablonski
70
4.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
GraphQLとの向き合い方2022年版
quramy
49
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Music & Morning Musume
bryan
46
6.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Producing Creativity
orderedlist
PRO
347
40k
Context Engineering - Making Every Token Count
addyosmani
7
280
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に移行する