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
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
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
990
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
Cursorハンズオン実践!
eltociear
2
1.2k
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.6k
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
AI Agent 時代的開發者生存指南
eddie
4
2.1k
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
340
技術的負債の正体を知って向き合う
irof
0
260
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
For a Future-Friendly Web
brad_frost
180
10k
Thoughts on Productivity
jonyablonski
70
4.9k
Bash Introduction
62gerente
615
210k
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Writing Fast Ruby
sferik
630
62k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Speed Design
sergeychernyshev
32
1.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Balancing Empowerment & Direction
lara
5
700
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