Zenn
📖

Compose Multiplatform入門してみた

2024/01/31に公開
Android
tech

この記事は、集まれKotlin好き！Kotlin愛好会 vol. 49@G's ACADEMY TOKYOで登壇した内容を記事化したものです。
登壇資料

Compose Multiplatformに入門してみた

JetBrains Blogを眺めていたら、Compose Multiplatform 1.5.10 – 使い始める絶好のタイミングという記事を目にしたので、チュートリアルを少し触ってみた所感を記載します。

Compose Multiplatformとは

  • 複数のプラットフォーム間でUIを共有できる宣言的フレームワーク
  • KotlinとJetpackComposeをベースに作られている
  • OSS

Androidはもちろん、iOSやDesktopアプリケーション、Webプラットフォーム間でUIを共有できる宣言的フレームワークです。

なぜ絶好のタイミングなのか？

なぜ絶好のタイミングとして紹介されているのでしょうか？以下の理由があるようです。

  • 新規プロジェクト作成時の開始手順が簡略化された
  • Material3のサポート
  • 基になっている技術のKotlin Multiplatformが安定版になった
  • ドキュメントポータルが充実してきた
    など

実際に触ってみた

ドキュメントポータルで紹介されているチュートリアルに沿って触ってみました。

環境構築

以下のツールが必要です

  • Android Studio
  • Xcode
  • KMMプラグイン

KMMプラグインを入れておかないと、iOS用のDebugConfigurationが作成出来なかったので入れておきましょう。

新規プロジェクトの作成

公式のウィザードで対象にしたいプラットフォームを選択するとプロジェクトファイルがzipでダウンロード出来ます。
テンプレートギャラリーなども随時更新されていく様です。便利ですね。

ディレクトリ構成

主に3つのディレクトリに分かれています。

  • composeMain
  • androidMain
  • iosMain

KMMのプロジェクトと同じく、共通のコードをcomposeMainに記載し、プラットフォーム固有なコードはそれぞれandroidMainやiosMainに記載するといった感じです。
チュートリアルでは主に以下の3つのComposableで構成されたアプリを作成します。

  • Text
  • DropDownMenu
  • Button

チュートリアルでは触れられていませんが、画面遷移は現在公式で提供されているものは無くサードパーティ製のライブラリを利用することになるようです。以下のものなどが利用できます。

  • Voyager
  • Decompose
  • Appyx
  • PreCompose

所感

JetpackComposeベースなので、Androidエンジニアであれば、学習コストが低く始めやすいと感じました。
また、画面遷移は何か公式で提供されるものが出てくるといいなと感じました。
動画、音声、各パーミッション周りはOS特有の処理が頻出する部分だと思うのでその辺りの実装はどうなるかなと気になったので機会があれば試してみたいと思います。

Discussion