KC Blog

Compose Multiplatform 実践：リラックスして、CMPの初歩を探る

6 min read
CrossPlatform#CMP#Kotlin

はじめに

こんにちは

このシリーズのテーマはCompose Multiplatform 実践：Kotlinでゼロからクロスプラットフォームアプリを開発するです

今回はAndroidとiOSのクロスプラットフォームアプリ開発に焦点を当てます

最終日には研究結果と感想を共有します

目次

  1. Compose Multiplatform実戦：リラックスして、CMPを初探索
  2. Compose Multiplatform実戦：初戦、CMP環境をインストールしよう
  3. Compose Multiplatform実戦：続戦、WizardでCMPプロジェクトを作成
  4. Compose Multiplatform実戦：Android・iOSシミュレーターでCMPプロジェクトを実行
  5. Compose Multiplatform実戦：CMPのプロジェクト構造理解とビルド設定
  6. Compose Multiplatform実戦：CMPでのクロスプラットフォームAndroid・iOSコードのエントリーポイント
  7. Compose Multiplatform実戦：CMPのComposeでMaterial Design3 Themeを使用
  8. Compose Multiplatform実戦：CMPでComposeを使ってクロスプラットフォーム画面を実装
  9. Compose Multiplatform実戦：expectとactualを使ってクロスプラットフォームコードを実現
  10. Compose Multiplatform実戦：CMPでCompose Navigationページ切り替えを実装
  11. Compose Multiplatform実戦：CMPでStateFlowを通じてUI状態を管理
  12. Compose Multiplatform実戦：CMPでNavigationBar底部バーを実装
  13. Compose Multiplatform実戦：CMPでkoinを使って依存注入Dependency Injection
  14. Compose Multiplatform実戦：CMPでクロスプラットフォームデータベースSqlDelightを実装
  15. Compose Multiplatform実戦：CMPでROOMを使ってクロスプラットフォームデータベース開発＆疑問解決

Compose Multiplatformの紹介

まずはCompose MultiplatformとKotlin Multiplatformについて簡単に理解しましょう

Multiplatformという言葉自体はMulti+platform

文字通りマルチプラットフォームという意味です

そしてCompose Multiplatformは

現在JetBrainの公式サイトの説明によると

KotlinにおけるCompose宣言型UIを使って

アプリケーションを開発することをサポートしています

現在サポートされているプラットフォームはiOS、Android、Desktop、Webの4つです

また、KMM (Kotlin mobile multiplatform)

あるいはCMP (Compose Multiplatform)、KMP (Kotlin Multiplatform)とも呼ばれています

以下ではCMPを使ってCompose Multiplatformを表現します

冗長さを避けるためです

ご了承ください！

CMPとKMPの違いは何ですか？

実際、両者はクロスプラットフォームプロジェクトの開発を簡素化し

異なるプラットフォーム向けに同じコードを書いて維持する時間を減らすことを目的としています

Gradleの設定を通じて

共通のソースコード開発と組み合わせて開発時間を短縮できます

例えばcommonMainを通じてクロスプラットフォームコードを開発します

Compose UIはこのレイヤーで開発されます

主な違いは次のとおりです：

KMPでは、ターゲットアプリのUIレイアウトを作成するためにネイティブプラットフォームのコードを使用する必要があります

例えば：

Androidではxmlを使用してレイアウトを実装するか

最近ではComposeを使用してUIを実装しています

iOSではSwiftUIを使用して実装します

一方、CMPはKMPの概念を拡張し

同様に共通コードを書くことができ

さらにComposeを使用して複数のプラットフォーム向けの画面を完成させることができます

プレビュー

下の画像のように、Composeだけでマルチプラットフォームの画面を一度に作成できます

Cover

もちろん、これはMaterial Design 3で作られた画面です

iOSの規格と異なることを気にする人もいるかもしれません

しかし過去の実務経験から言えば

プロジェクトを行う際

ほとんどのUIデザインは

iOSの画面をベースにすることが多いです

そのため、各プラットフォーム固有のコンポーネントを除けば

丁寧に作り込めばiOSと非常に似た画面を作ることができます

ですから、この部分は各自のユースケースによって

気にするかどうかを決めればいいでしょうXD

目標

最後に

この30日間で、以下のテーマを中心に共有していきます

まとめ

明日から

Compose Multiplatformについてより理解を深めるためのノートを書き始めます

またCMPは常に更新されています

Googleが発表した記事を見ると

CMPに

より多くのサポートが徐々に追加される

可能性があり、期待できます

Cover
（画像出典：Google Blog）

CMPは比較的新しいものなので

様々な状況に遭遇する可能性があります

ネット上の情報もそれほど豊富ではありません

ですから問題に遭遇した場合は議論して、お互いに学び成長しましょう