Composable関数にViewModelを渡したいが…

JetpackComposeで実装していると、
Composable関数の引数がだんだん多くなり辛くなる経験をした人は多いと思います。
それを解消するために、Composable関数にViewModelを渡したくなりました。

が、しかし
Composable関数にViewModelを渡して良いのでしょうか？

そもそも何に困っていたのか

↓この程度の引数なら、まあ気にならない。

// Hoge.kt

@Composable

fun Hoge(

  hogeUiState: HogeUiState,

  onClickFuge: (String) -> Unit,

  onChangeHage: (Int) -> Unit

) {

  // ...省略...

}

↓このあたりから、引数が多くて辛くなってくる。

// Hoge.kt

@Composable

fun Hoge(

  hogeUiState: HogeUiState,

  onClickAge: (Int) -> Unit,

  onClickFuge: (String) -> Unit,

  onClickSage: (Int) -> Unit,

  onClickUndo:  (Int) -> Unit,

  onChangeFuge:  (Float) -> Unit,

  onChangeHage: (Int) -> Unit,

  onChangeBar:  (Int) -> Unit

) {

  // ...省略...

}

↓呼び元のComposable関数の引数はもっと多くて辛くなる。

// ParentContent.kt

@Composable

fun ParentContent(

  parentUiState: ParentUiState,

  onClickAge: (Int) -> Unit,

  onClickFuge: (String) -> Unit,

  onClickSage: (Int) -> Unit,

  onClickUndo:  (Int) -> Unit,

  onChangeFuge:  (Float) -> Unit,

  onChangeHage: (Int) -> Unit,

  onChangeBar:  (Int) -> Unit,

  // 呼び出し元の引数は特に多い...Hoge以外の引数も必要になる

) {

  Hoge(

    hogeUiState = parentUiState.hogeUiState,

    onClickAge = onClickAge,

    onClickFuge = onClickFuge,

    onClickSage = onClickSage,

    onClickUndo = onClickUndo,

    onChangeFuge = onChangeFuge,

    onChangeHage = onChangeHage,

    onChangeBar = onChangeBar

  )

  // ...省略...

}

UiStateはまとまっているが、イベントリスナー（onXxx系）の引数が多いのが辛い。

どう解消したのか？

ということで
↓のようなintefaceを作りイベントリスナーをまとめる。

interface HogeEventsInterface {

  fun onClickAge: (Int) -> Unit

  fun onClickFuge: (String) -> Unit

  fun onClickSage: (Int) -> Unit

  fun onClickUndo:  (Int) -> Unit

  fun onChangeFuge:  (Float) -> Unit

  fun onChangeHage: (Int) -> Unit

  fun onChangeBar:  (Int) -> Unit

}

↓HogeEventsInterfaceを引数にすることで、引数を大幅に減らすことに成功。

// ParentContent.kt

@Composable

fun ParentContent(

  parentUiState: ParentUiState,

  hogeEventsInterface: HogeEventsInterface,

  // ...省略...

) {

  Hoge(

    hogeUiState = parentUiState.hogeUiState,

    hogeEventsInterface = hogeEventsInterface

  )

  // ...省略...

}

なぜComposable関数にViewModelを渡したいのか？

HogeEventsInterfaceをViewModelに実装する

// MainPageViewModel.kt

class MainPageViewModel(): HogeEventsInterface {

  // ...省略...

}

ルートのComposable関数（今回はMainPage）でViewModelを保持。

この時に
ParentContentの引数にHogeEventsInterfaceを実装したViewModelを渡したくなる！！！

…

記事の続きは下のリンクをクリック！

https://rightcode.co.jp/blogs/46967

エンジニア積極採用中です！

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら：https://rightcode.co.jp/blogs?category=life

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。

【コーポレートサイト】https://rightcode.co.jp/

【採用募集】https://rightcode.co.jp/recruit（こちらからの応募がスムーズ）

【wantedlyぺージ】https://www.wantedly.com/companies/rightcode