はじめての Kotlin Multiplatform 2024/07/13 Java Doでしょう #25 トリ

⾃⼰紹介 トリ ● Androidエンジニアをしています ● JavaDoスタッフです ● 暑いです ⿃モチーフのものが好きです（焼き⿃も好きです）

今⽇の流れ ❶ Kotlin Multiplatformって何？ ❷ 開発環境をセットアップしてみる ❸ アプリを動かしてみる（デモ） ❹ ソースコードをみてみる

Kotlin Multiplatformって何？ Kotlinで「複数プラットフォームの アプリケーションを開発できる技術」です ※いわゆるクロスプラットフォーム開発ができる。React Native, Flutterみたいな 対応： iOS / Android / Desktop / Web（Alpha）

公式サイト ：https://www.jetbrains.com/ja-jp/kotlin-multiplatform/

Kotlin Multiplatformって何？ https://kotlinlang.org/docs/multiplatform.html

Kotlin Multiplatformって何？ https://kotlinlang.org/docs/multiplatform.html Kotlin Multiplatform

Kotlin Multiplatformって何？ https://kotlinlang.org/docs/multiplatform.html これは？

Kotlin Multiplatformって何？ https://kotlinlang.org/docs/multiplatform.html Compose Multiplatform

Compose Multiplatformって何？ JetpackComposeという宣⾔型UIフレームワークで 「複数プラットフォームアプリケーションのUI を共通化できる技術」です

公式サイト：https://www.jetbrains.com/ja-jp/lp/compose-multiplatform/

開発環境をセットアップしてみる Android Studio 開発ツール https://developer.android.com/studio?hl=ja Xcode [macOS only] iOSアプリを作るなら、App Store / Web から https://developer.apple.com/jp/xcode/resources/ JDK AndroidStudio付属のJDKで問題なし 別でJDKインストールでもOK Required Required

開発環境をセットアップしてみる Kotlin Multiplatform plugin Android Studioの ｢Settings > Plugins｣ から インストール Kotlin plugin Android Studio で初期インストール済み 最新版にアップデートしておく Browsers Webに対応するなら ｢Wasm Garbage Collection｣ サポート必須 Chrome / Firefox / Safari でOK Required Required

開発環境をセットアップしてみる KDoctor [macOS only] Kotlin Multiplatformの環境が整っているか チェックできるツール $ brew install kdoctor Github でダウンロードする https://github.com/Kotlin/kdoctor Homebrew でインストールする

環境設定をチェックする $ kdoctor Environment diagnose (to see all details, use -v option): [✓] Operation System [ ✖ ] Java ✖ Java not found Get JDK from https://www.oracle.com/java/technologies/javase-downloads.html [✓] Android Studio [✓] Xcode [ ! ] CocoaPods ! CocoaPods configuration is not required, but highly recommended for full-fledg ✖ System ruby is currently used CocoaPods is not compatible with system ruby installation on Apple M1 compu Please install ruby via Homebrew, rvm, rbenv or other tool and make it default Failure..

環境設定をチェックする $ kdoctor Environment diagnose (to see all details, use -v option): [✓] Operation System [✓] Java [✓] Android Studio [✓] Xcode [✓] CocoaPods Conclusion: ✓ Your operation system is ready for Kotlin Multiplatform Mobile Development! Success!!

公式のKotlin Multiplatformウィザードでつくる https://kmp.jetbrains.com/

公式のKotlin Multiplatformウィザードでつくる https://kmp.jetbrains.com/ Android Studioから [new project] すると Compose Multiplatformの設定がない... （2024-07-07時点）

アプリを動かしてみる デモ

ソースコードをみてみる

ソースコードをみてみる ● composeApp ● server ● shared をみてみる

ソースコードをみてみる：composeApp 編 composeApp には UIの実装コードがあります

ソースコードをみてみる：composeApp 編 composeApp には UIの実装コードがあります ● androidMain ● commonMain ● deskTopMain ● iosMain ● wasmJsMain

composeApp > commonMain > App.kt

composeApp > commonMain > App.kt

composeApp > 各プラットフォーム > main Android iOS Desktop Web

composeApp > 各プラットフォーム > main Android iOS Desktop Web 基本 App() を呼ぶだけ

ソースコードをみてみる：shared編 shared には Logicの実装コードがあります

ソースコードをみてみる：shared編 shared には Logicの実装コードがあります ● androidMain ● commonMain ● iosMain ● jvmMain ● wasmJsMain

shared > commonMain > Greeting.kt

shared > commonMain > Platform.kt

shared > androidMain > Platform.android.kt

shared > androidMain > Platform.android.kt

shared > iosMain > Platform.ios.kt

shared > iosMain > Platform.ios.kt

shared > jvmMain > Platform.jvm.kt

shared > jvmMain > Platform.jvm.kt

shared > jvmMain > Platform.jvm.kt

ソースコードをみてみる：server編 server には Serverの実装コードがあります

ソースコードをみてみる：server編

公式サイト ：https://ktor.io/

ソースコードをみてみる：Buildの違い Android AndroidGradlePluginでGradleビルド https://developer.android.com/build?hl=ja iOS Kotlin/Native https://kotlinlang.org/docs/native-overview.html Desktop / Server Kotlin/JVM KotlinをJVMで動作するようにコンパイルする Web Kotlin/Wasm https://kotlinlang.org/docs/wasm-overview.html

試した感想 ● Kotlinが扱いやすいので楽 ● Webも開発できるの嬉しい stable待ってます

さいごに Kotlin Multiplatformの発展が楽しみです みんなもKotlinでアプリ作ろう！