.PSJ"UTVTIJ גࣜձࣾαΠόʔΤʔδΣϯτגࣜձࣾ$ZCFS; ࣮ྫ͔ΒֶͿ 
 +FUQBDL$PNQPTFͷύϑΥʔϚϯεվળ %SPJE,BJHJ +FUQBDL$PNQPTF

株式会社サイバーエージェント 
 株式会社CyberZ OPENREC.tv 2019年度 未踏スーパークリエータ Mori Atsushi Twitter: @at_sushi_at

We Love 
 Jetpack Compose! Android向けの新しいUIフレームワーク 2019年 Google I/Oにて発表 2021年7⽉ Stable

パフォーマンス改善 ᶃNFBTVSF ᶄNFBTVSF ᶅNFBTVSF ᶆNFBTVSF ᶇNFBTVSF ᶃNFBTVSF ᶄNFBTVSF ᶅNFBTVSF "OESPJE7JFX +FUQBDL$PNQPTF 7JFX(SPVQ ਌$PNQPTBCMF 7JFX 7JFX ࢠ$PNQPTBCMF ࢠ$PNQPTBCMF ඞͣҰ౓ͣͭͷΈ͔͠ܭଌ͞Εͳ͍ ਌ࢠΛԿ౓΋ܭଌ͢Δ৔߹͕͋Δ

パフォーマンスの低下 Jetpack Composeのほうが 
 基本的にはパフォーマンスが良い ⼀⽅、予期せずパフォーマンスが落ちることがある スクロールやドラッグがもっさりしている アニメーションでフレーム落ちしている 操作に対する反応が遅れる 🐢

今回のゴール Jetpack Composeで陥りやすい 
 パフォーマンス低下を実例とともに理解/改善する 1. パフォーマンスの調査⽅法 2 . derivedStateOfを使う 3 . skippableにする 4 . Stateの監視場所を変える 🚀

パフォーマンスの調査⽅法 1

買い物リストアプリ 購⼊予定のアイテムを追加、管理できる 全体的に動作がもっさり… IUUQTHJUIVCDPN.PSJ"UTVTIJDPNQPTFQFSGPSNBODF

εΫϩʔϧҐஔ͸ ϦετͷҰ൪্͔ Ұ൪্Ͱͳ͍ͱ͖͸ "QQ#BSʹӨΛ͚ͭΔ εΫϩʔϧ͕͔ͭ͘͘ ഒ଎

早すぎる最適化を避ける க໋తͳ ύϑΥʔϚϯε՝୊ ίʔυͷՄಡੑ Өڹͷখ͍͞ ύϑΥʔϚϯε՝୊ Өڹͷͳ͍ ύϑΥʔϚϯε՝୊ ॏཁ౓͕ߴ͍ ॏཁ౓͕௿͍ 最初から最適化を⽬指すのは、コードの⾒通しが悪化したり、 
 無駄なコストになる パフォーマンスの問題が⽣じた際に必要な対応を⾏う

ボトルネックを探す 闇雲にコードを変更しても、解決に⾄る可能性は低く、 
 かえって問題を⼤きくする ボトルネックを発⾒し、解消することが重要である $PNQPTBCMF $PNQPTBCMF $PNQPTBCMF $PNQPTBCMF Composable 2 に時間がかかってるのに、1や3,4を頑張って変更しても、ほとんど変化はない

パフォーマンス問題が 
 ⽣じたら？ 1. リリースビルドで確認する 2. 不要なRecomposeがないか確認する 3 . Pro fi lerで詳細を⾒る 🏃

1. リリースビルドで 
 1. 確認する Jetpack Composeはデバッグビルドと 
 リリースビルドで⼤きくパフォーマンスが異なる 不要なコードを削除するR 8 コンパイラも利⽤する （デフォルトで有効） 🛠 IUUQTEFWFMPQFSBOESPJEDPNKFUQBDLDPNQPTFQFSGPSNBODF

2. 不要なRecomposeがないか確認する $PNQPTBCMF ᶄ஋͕มԽ ᶃϘλϯ͕ΫϦοΫ ᶅ࠶࣮ߦ -FBWF &OUFS 3FDPNQPTF IUUQTEFWFMPQFSBOESPJEDPNKFUQBDLDPNQPTFMJGFDZDMF

ログを仕込む 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 4IPQQJOH-JTU1BHFDPNHJUIVCNPSJBUTVTIJQFSGPSNBODF%SFDPNQPTF 3FDPNQPTFຖʹ ϩάग़ྗ ࿈ଓతʹݺͼग़͞Ε͍ͯΔ

Layout Inspector Compose 1 . 2 以降とAndroid Studio Dolphin以降を使うと Recompose数を確認できる IUUQTEFWFMPQFSBOESPJEDPNTUVEJPSFMFBTFTMJDPNQPTFDPVOUFS 4IPX3FDPNQPTJUJPO 
 $PVOUTΛ༗ޮʹ͢Δ

3FDPNQPTF਺ 3FDPNQPTF͕εΩοϓ͞Εͨ਺ େྔʹSFDPNQPTF͞Ε͍ͯΔ

3 . Pro fi lerで詳細を⾒る アプリを実⾏中のデバイスのCPUやメモリの状況を確認できる IUUQTEFWFMPQFSBOESPJEDPNTUVEJPQSP fi MFBOESPJEQSP fi MFS

$BMMTUBDL4BNQMF3FDPSEJOH େྔʹ3FDPNQPTF͕ ݺ͹Ε͍ͯΔ

ϦϦʔεϏϧυͰ΋1SPGJMFՄೳʹ͢Δ "OESPJE.BOJGFTUYNM

6*δϟϯΫ͕ൃੜ͍ͯ͠Δ 4ZTUFN5SBDF3FDPSEJOH SFDPNQPTFʹ ͕͔͔͍࣌ؒͬͯΔ

Composition Tracing Compose 1 . 3 (beta)以降とAndroid Studio Flamingo(preview)を 
 使うとリリースビルドでも確認できる！ IUUQTNFEJVNDPNBOESPJEEFWFMPQFSTKFUQBDLDPNQPTFDPNQPTJUJPOUSBDJOHFDCBFB 4IPQQJOH*UFN3PX͕ େྔʹݺ͹Ε͍ͯΔ 4ZTUFN5SBDF3FDPSEJOH

derivedStateOfを使う 2

গ͠Ͱ΋εΫϩʔϧ͞ΕΔ౓ʹɺ ࠶ܭࢉ͞Ε͍ͯΔ

ܭࢉ݁Ռ͕มΘͬͨͱ͖ͷΈ 
 3FDPNQPTF͢Δ SFNFNCFS͸ඞਢ ഒ଎ ͔͖͕ͭ͘ݮͬͨ

skippableにする 3

ϘλϯͰ਺ྔͷ૿ݮ͕Մೳ ߋ৽ͨ͠ΞΠςϜҎ֎΋ 3FDPNQPTF͞Ε͍ͯΔ ഒ଎

-B[Z$PMVNO *UFN -B[Z$PMVNO *UFN $IBOHFE 4LJQ Item: 1 を変更 ⼊⼒に変更がなければスキップする 4LJQ 3FDPNQPTF *UFN *UFN *UFN 3FDPNQPTF

スキップの条件 条件1: すべての⼊⼒が安定している → 全く変更がされない（Immutable）か、 
 → 変更時にCompositionに通知される 条件2:すべての⼊⼒で変更がない → すべての⼊⼒でequalsの結果がtrue 🚅

スキップの条件 条件1: すべての⼊⼒が安定している → 全く変更がされない（Immutable）か、 
 → 変更時にCompositionに通知される 条件2:すべての⼊⼒で変更がない → すべての⼊⼒でequalsの結果がtrue 🚅

安定している型（抜粋） ϓϦϛςΟϒ஋ܕ จࣈྻ ϥϜμࣜ ͦΕΒͰߏ੒͞ΕΔෆมͳDMBTT

安定していない型（抜粋） -JTU4FU ՄมͳΫϥε $PNQPTFΛ࢖͍ͬͯͳ͍ ଞϞδϡʔϧϥΠϒϥϦͷΫϥε 5ISPXBCMF΍%BUF

Compose Compiler Metrics Composableがスキップ可能か確認できるツール ΦϓγϣϯΛ௥Ճ CVJMEDPNQPTF@NFUSJDTʹ Ϩϙʔτ͕ग़ྗ͞ΕΔ IUUQTEFWFMPQFSBOESPJEDPNKFUQBDLDPNQPTFMJGFDZDMF

҆ఆ͍ͯ͠ͳ͍ εΩοϓෆՄ ҆ఆ͍ͯ͠ͳ͍

ΞϊςʔγϣϯͰෆมͰ ͋Δ͜ͱΛ໌ࣔ

಺෦ʹ.VUBCMF4UBUF౳ͷՄม஋͕͋Δ৔߹͸ 4UBCMFΞϊςʔγϣϯΛར༻͢Δ ಺෦ͷ஋͕มΘΒͳ͍ͱ͖͸ *NNVUBCMFΛ࢖͏

案1 依存関係を追加して @Immutable / @Stable 
 を付与する モデルが別モジュールにある場合 案2 View⽤のmodelを別で作成し、 マッピングする 案3 @Immutable / @Stableを 
 つけたHolder classでwrapする

すべてをskippableに？ 💡 すべてのComposbleをskippableにするのは、 
 早すぎる最適化のように感じる 同じ引数で再び呼び出されることのない Composableをskippableにするのは無意味である

スキップの条件 条件1: すべての⼊⼒が安定している → 全く変更がされない（Immutable）か、 
 → 変更時にCompositionに通知される 条件2:すべての⼊⼒で変更がない → すべての⼊⼒でequalsの結果がtrue 🚅

ຖճ-BNCEB͕ࣜ࠶ੜ੒͞Εɺ มߋ͕͋ΔͱΈͳ͞ΕΔ

Lambda式の再⽣成 ࠶ར༻͞ΕΔ ࠶ੜ੒͞ΕΔ Lambda式中で安定でないクラスを参照していると、 
 recompose毎にLambda式が再⽣成される IUUQTNVMUJUISFBEFETUJUDI fi YDPNCMPHKFUQBDLDPNQPTFSFDPNQPTJUJPO

Lambda式の再⽣成を防ぐ 案2 Lambda式を明⽰的に 
 rememberする 案3 関数参照を渡す 案1 ViewModelに@Stableを追加

ഒ଎ ߋ৽͞ΕͨΞΠςϜͷΈ SFDPNQPTF͞ΕΔ

Stateの監視場所を変える 4

εϥΠμʔͷ஋ Ҿ਺Ͱঢ়ଶΛड͚औΔ ഒ଎ εϥΠμʔ͕ॏ͍ͨ

State Hosting 4IPQQJOH-JTU1BHF "EE%JBMPH 4MJEFS 3FDPNQPTF 3FDPNQPTF 3FDPNQPTF 状態は呼び出し元で管理し、 Single Source of Truthを実現する ⼦をrecomposeするために、 すべての親がrecomposeされている IUUQTEFWFMPQFSBOESPJEDPNKFUQBDLDPNQPTFTUBUFTUBUFIPJTUJOH

Stateの監視とrecomposeの範囲 4UBUFͰड͚औΔ ͜͜Ͱ؂ࢹ ͜͜Ͱ؂ࢹ

-BNCEBࣜͰड͚औΔ 他の記述⽅法 ಠࣗ4UBUFΛ༻ҙ͢Δ

4UBUFͰอ࣋͢Δ ഒ଎ վળʂ

Stateの取得を遅らせる 🛫 必要になるまでStateの値の取得を遅らせることで、 必要最⼩限のスコープで再実⾏ができる skippableの対応のほうが体感効果が⾼い スクロール、ドラッグ、アニメーション等、 
 毎フレーム値が変わる場合におすすめ

まとめ $PNQPTJUJPO パフォーマンスはボトルネックを発⾒し、改善を⽬指す よくある修正⽅法 - derivedStateOfを使う - skippableにする - Stateの監視場所を変える パフォーマンスの調査⽅法 - 不要なrecomposeが - ないか確認する - Pro fi lerで詳細を⾒る