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
65
Git勉強会
yt8492
0
140
なんでもやってみる勇気
yt8492
0
98
Android Autoが思ったよりしんどい話
yt8492
0
210
apollo-kotlinにcontributeした話
yt8492
0
140
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
200
Other Decks in Programming
See All in Programming
CSC305 Lecture 03
javiergs
PRO
0
230
株式会社 Sun terras カンパニーデック
sunterras
0
220
CSC509 Lecture 04
javiergs
PRO
0
290
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
910
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
600
クラシルを支える技術と組織
rakutek
0
190
Advance Your Career with Open Source
ivargrimstad
0
330
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
580
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
450
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
Become a Pro
speakerdeck
PRO
29
5.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Code Reviewing Like a Champion
maltzj
525
40k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Being A Developer After 40
akosma
91
590k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Visualization
eitanlees
148
16k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Fireside Chat
paigeccino
40
3.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
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に移行する