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
310
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
Android Autoが思ったよりしんどい話
yt8492
0
93
apollo-kotlinにcontributeした話
yt8492
0
38
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
580
今だからこそ知りたいKotlin Multiplatform
yt8492
0
180
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.1k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
150
Compose Multiplatform 1.0.0
yt8492
0
130
Kotlin/NativeからCの標準ライブラリを呼び出そう
yt8492
0
240
2021年のKotlin入門
yt8492
0
200
Other Decks in Programming
See All in Programming
雑に思考を整理する技術と効能
konifar
60
29k
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
710
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
430
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.3k
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
270
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
190
Ruby Function Composition
bkuhlmann
1
330
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
340
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
260
Featured
See All Featured
Web development in the modern age
philhawksworth
202
10k
A Modern Web Designer's Workflow
chriscoyier
689
190k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Become a Pro
speakerdeck
PRO
11
4.5k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
How GitHub (no longer) Works
holman
304
140k
How STYLIGHT went responsive
nonsquared
92
4.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
RailsConf 2023
tenderlove
4
540
Navigating Team Friction
lara
178
13k
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に移行する