Compose Multiplatform 実践：初戦、CMP環境をインストールしよう

Compose Multiplatform (略称CMP) UIフレームワークは、Kotlinコード共有能力を新たな高みへと押し上げます
一度ユーザーインターフェースを実装すれば
iOS、Android、デスクトップ、Webを含むすべてのターゲットプラットフォームで使用できます
今日は環境のインストールを一歩一歩進めていきます

マルチプラットフォーム（Android、iOS、Web、Desktop）アプリケーションを作成できるCMPプロジェクトを構築します
まずはCMPプロジェクトの作成方法を理解する必要があります

以下にリストアップした項目に従ってインストールできます
一部はオプションですので
自分のニーズに応じてインストールしてください

• Android Studio
• Java and JDK
• Xcode
• Kotlin plugins
• (Optional) Kotlin Multiplatform plugin
• (Optional) CocoaPods
• (Optional) kdoctor
• (Optional) Browsers

kdoctorは公式が推奨するプラグインです
環境内の必要項目が準備完了しているかをチェックしてくれます

ターミナルでコマンドを使用してkdoctorをインストールします

brew install kdoctor

その後、kdoctorを実行するだけでチェックできます
例えば、私の環境では
Kotlin Multiplatform Pluginがインストールされていませんが
それも検出してくれます

kdoctor

要するに
すべてが[v]と表示されていれば
環境が正しく設定されています

もしkdoctorが環境チェック中に問題を診断した場合：

[x]：修正が必要な失敗したチェック
*マークの後に問題の説明と潜在的な解決策が表示されます。

[!]：警告チェック
必ずしもインストールする必要はないかもしれません
インストールできると通知しているだけかもしれません

CMPを便利に作成するためにAndroid Studioのインストールが必要です

まずAndroid Studio 公式サイトに行き
IDEをダウンロードします

次にMacOSの場合はダウンロードした.dmgを開き
IDEをApplicationフォルダにドラッグします
Windowsの場合は.exeでディレクトリを選択してインストールします

（Macのインストール例）

CMPは主にKotlinを使用して開発します
そのためKotlin Pluginは必須です
ただし、現在のAndroid Studioではすべて統合されているため
インストールするとKotlin Pluginも一緒にインストールされます
（新しいバージョンのIDEではインストール済みです）

次にAndroid Studioを開きます

もし問題が発生した場合は
Tool > Kotlin > Configt Kotlin in Projectを選択して
IDEにインストール状況をチェックさせることができます

実はこのステップも上記と同様です
新しいAndroid Studio IDEではすでにインストールされています

もし不確かな場合は
IDEに組み込まれたものをダウンロードできます
以下の場所でJDKがインストールされているか確認できます
Android Studio > Settingをクリックするか、ショートカットCommand + ,を使用します

Build, Execution Deployment >Build Tools > Gradleを探します

ドロップダウンメニューをクリックして環境内の既存のものを確認する
またはDownload JDKをクリックしてダウンロードします

また
ここではsdkmanの使用をお勧めします（Optional）
コマンドを通じて環境内のSDKを管理できます
ただしCMPの紹介が主題なので
よく使われるコマンドをいくつか紹介します
興味がある方はネットで詳細を調べてください

現在設定されているsdkを確認する

sdk current

利用可能およびダウンロード可能なJava SDKをリストアップする

sdk ls java

JAVA環境を設定する（xxxの名前は上記のsdk lsで見つけることができます）

sdk using java xxx

Android StudioがMultiplatformをより良くサポートするために
Kotlin Multiplatform pluginをダウンロードする必要があります
同様にSetting > Plugin > Marketplaceを開きます

installをクリックしてダウンロードします
完了したらApplyをクリックし、IDEをRestartします

これにより、Android StudioでCreate New Projectを使用して
自動的にKMPの基本的なプロジェクト内容を作成できます
templateを作成する概念に似ています

KMM Plugin公式リリース 必要に応じて参照してください

また、CMPに関して
公式はオンラインでCMP基本プロジェクトを作成する方法も提供しています
（KMPとCMPの違いを忘れた方は1日目の記事を参照してください、Compose Multiplatform 実践：リラックスして、CMPの初歩を探る）

オンラインWebページ
Wizard
を使用して作成し、IDEにインポートします

どちらの方法を使うかは
開発上の主な違いは
KMP：KMM pluginプラグインを使用して作成、Native UI + common logicの開発方法に焦点を当てています
CMP：オンラインWebページKMM Wizardを使用して作成しIDEにインポート、Compose UI + common logicでマルチプラットフォーム開発に焦点を当てています

ここでは簡単に紹介しました
後で詳細なプロジェクト開発時に
Wizardの使用方法について簡単に説明します

macOSのMacを使用していて
iOSアプリを実行したい場合は
Xcodeが必要です

方法は非常に簡単です
App StoreでXcodeを検索して
ダウンロードするだけです

他のオペレーティングシステムを使用している場合は
このステップをスキップできますが
iOSアプリをビルドすることはできないかもしれません
解決方法（ワークアラウンド）もあるかもしれませんが
正規の方法ではないかもしれませんXD

将来的にiOSのフレームワークを使用したい場合は事前にインストールできます
必要ない場合は、後で必要になった時にインストールしても大丈夫です

コマンドを使用してCocoaPodsをインストールします

brew install cocoapods

ただし、brewでインストールするには
より高いバージョンのrubyが必要です

公式サイトによると、少なくとも3.3.4バージョンが必要です

Depends on: ruby 3.3.4 Powerful, clean, object-oriented scripting language

そこで、以下のコマンドで
環境内のバージョンを確認できます

ruby -v 

バージョンが足りない場合は
まずreinstallします

brew reinstall ruby

最後にbrew install cocoapodsを実行します

Webアプリケーションを作成する場合
Wasmガベージコレクション（GC）機能をサポートするブラウザが必要です。

これは公式サイトが提供する情報です
OS内のブラウザのバージョンを確認する必要があります
現在サポートされている環境に関する説明です

ChromeとChromium：バージョン119からサポート。
Firefox：バージョン120からサポート。
Safari/WebKit：Wasm GCは現在開発中です

Safariなどはサポートしていないようです
そのため完全に実行できない可能性があります
Webアプリの開発が必要な場合は
上記の情報に基づいて試してみてください

我總覺得開始一個新的程式語言 或 框架
通常你會不太熟悉怎麼配置他的環境
不過若有人能稍微提點
就能更容易上手

總體來說
不需要之前有Compose Multiplatform、Android或iOS的經驗
從零一步一步開始熟悉Kotlin再到整個CMP也可以慢慢上手

若有任何疑問或問題，歡迎在評論區討論，我們一起學習成長。
這次的內容就到這裡，感謝大家的閱讀和支持！