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
サキドリJetpack Compose for Web
Search
Yuta Tomiyama
May 12, 2021
Programming
0
140
サキドリJetpack Compose for Web
2021/05/12 Zli × ビズリーチ 合同LTにて発表
Yuta Tomiyama
May 12, 2021
Tweet
Share
More Decks by Yuta Tomiyama
See All by Yuta Tomiyama
モバイルアプリ開発を始めよう!
yt8492
0
43
Git勉強会
yt8492
0
100
なんでもやってみる勇気
yt8492
0
77
Android Autoが思ったよりしんどい話
yt8492
0
190
apollo-kotlinにcontributeした話
yt8492
0
120
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
820
今だからこそ知りたいKotlin Multiplatform
yt8492
0
280
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.2k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
190
Other Decks in Programming
See All in Programming
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
110
Perlで痩せる
yuukis
1
660
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
1
290
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
140
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
130
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
540
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.6k
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
960
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
110
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
620
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Visualization
eitanlees
146
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Unsuck your backbone
ammeep
671
58k
A Tale of Four Properties
chriscoyier
159
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
We Have a Design System, Now What?
morganepeng
52
7.6k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Transcript
サキドリ Jetpack Compose for Web 2021/05/12 Zli × ビズリーチ 合同LT
自己紹介 HN: マヤミト 本名: 富山雄太 会津大学26期 (学部4年) 去年までZliの代表をやってました GitHub: https://github.com/yt8492
好きな言語: Kotlin, Scala, Go 最近はウマ娘に脳味噌を破壊されています Twitter: yt8492
Jetpack Composeって何? - Android のネイティブ UI を構築するための最新のツールキット(公式より) https://developer.android.com/jetpack/compose - Kotlinと宣言的UIでAndroidのネイティブ開発ができる
- まだベータ版 - 最近Android界隈で流行っているので調べると記事が結構出てくると思います
Compose for Desktopの登場 - AndroidのJetpack ComposeをベースにJetBrainsが開発 https://www.jetbrains.com/ja-jp/lp/compose/ https://github.com/jetbrains/compose-jb - 去年の11月に登場したばかりで現在アルファ版
- 描画にはSkiaを使用 - AWTやSwingとの相互運用が可能
そしてJetpack Compose for Web 2021/05/04にKotlin公式ブログで発表 https://blog.jetbrains.com/kotlin/2021/05/technology-preview-jetpack-co mpose-for-web/
Jetpack Compose for Web 概要 - ※まだTechnology preview - チュートリアルもドキュメントもパフォーマンス最適化もまだまだ
- Kotlin/JS向けのJetpack Compose - Kotlin/MPPと他のJetpack Composeと組み合わせてUIコード共有ができる - DOM APIとMultiplatform Widgetsを提供する - DOM API: divやaなど - Multiplatform Widgets: Text, Button, Row, Columnなど
実際に使ってみよう
Reactのチュートリアルの三目並べを再現してみる - 題材として簡単 - 同じ宣言的UIなので似たようなコードでできそう - PropsとStateを使うので入門に最適
プロジェクトの準備 - Jetpack Compose for WebのGradle Pluginを取得するには settings.gradle.ktsにリポジトリの指定が必要
プロジェクトの準備 - build.gradle.ktsの例 - kotlin pluginはmultiplatform(重要) - jsだとなぜかinternal compiler errorに
- multiplatformでjsのみtargetにする
Compose可能な関数(コンポーネント) - @Composable をつける - 内部でComposableを呼び出すことができる - Propsは関数の引数にすればよい - Stateはライブラリ側で提供されているState型
を利用する - 後述 - Reactの関数コンポーネントとほぼ同じ
状態を扱う - Reactのfunctional componentではuseState hooksを使うが、Jetpack ComposeではState型とremember関数を使う - 状態として扱う型をStateでラップし、initial stateをremember関数のラムダに定義する -
変更可能なMutableStateとRead OnlyなStateに分かれる
main関数 - renderComposableでレンダリングしたいdivのidを指定し、ラムダにJetpack Composeのコードを渡す - Reactのrender関数みたいなもの
今回のリポジトリ - 全てを解説していたらLTではなくセッションになってしまうので https://github.com/yt8492/JetpackComposeForWebTicTacToe
デモ
触ってみた感想 - 流石にまともに使うにはまだ早い - 0.0.0-web-dev-12というversionから漂うヤバさ - ドキュメントもサンプルも少ないので扱うにはある種の「勘」が必要 - とはいえJetpack ComposeとReactを触ったことのある人間ならすんなりできそう
- kotlin-reactでよくない?(小声) - Reactの資産が使えないのは正直しんどい - Jetpack Compose for Webはこの先発展していくのだろうか? - 出たばかりなので良くも悪くも今後の動向に注目 - 今触れば先駆者になれるチャンス!
余談 - 遭遇したバグはIssueを立ててきました
あわせて読みたい - Kotlin/JSでWebフロント開発をはじめよう https://qiita.com/yt8492/items/250e4f7ac19fa8a66a74 - 過去の登壇資料(Kotlin/JS多め) https://speakerdeck.com/yt8492