KMPを使ってみて感じた良いところ・ツラいところ

Slide 1

Slide 1 text

Chatwork株式会社モバイルアプリケーション開発部中山龍 2023年10月6日 KMPを使ってみて感じた良いところ・ツラいところ

Slide 2

Slide 2 text

自己紹介中山龍 (なかやまりゅう) ● Chatwork株式会社 ○ iOSエンジニア ○ 2023年4月新卒として入社 ○ 社内最年少 (2002年6月生まれの21歳) ● 愛知県在住 ○ フルリモート勤務 ○ 最近名古屋市内に引っ越しました 2 @ryu_develop

Slide 3

Slide 3 text

注意

Slide 4

Slide 4 text

このLTの趣旨 4 このLTは『普段iOSネイティブを触っているエンジニアがKMP を体験してみたよ』という話です KMPに関する深い知見を持っている立場ではないことにご注意ください

Slide 5

Slide 5 text

各モバイル開発手法の比較

Slide 6

Slide 6 text

①ネイティブ

Slide 7

Slide 7 text

①ネイティブ 7 iOS / Androidそれぞれに専用のプログラムを書いて実装する iOS Android

Slide 8

Slide 8 text

メリットネイティブの特徴 8 デメリット ● 標準のUIやOSの新機能を使える ○ OSによって提供される最新機能も使用可能 ● 高いパフォーマンスが期待できる ● 各OSでの開発が必要 ○ iOS/Androidに合わせて2つ作成することが必要となる ○ 各OSで開発者に必要な技術が統一できない

Slide 9

Slide 9 text

②クロスプラットフォーム ※ ※ ここでは共通のソースコードのみで各 OSのアプリがビルド可能になるものを指す

Slide 10

Slide 10 text

②クロスプラットフォーム 1つのプログラムでiOS / Androidそれぞれ動作するようにする 10 iOS / Android など

Slide 11

Slide 11 text

メリットクロスプラットフォームの特徴 11 デメリット ● １つのソースコードで各OSの開発ができる ○ ネイティブでの開発と比べて開発コストが低く済む ● OSの機能や最新技術が利用できない場合がある ● 複雑な機能には各ネイティブのコードを書く必要がある場合がある ● ネイティブに比べてパフォーマンスが落ちる場合がある

Slide 12

Slide 12 text

12 ネイティブのように標準のUIやOSの最新機能を使いたいけど、クロスプラットフォームのように共通のコードで楽したい...

Slide 13

Slide 13 text

13 ネイティブのように標準のUIやOSの最新機能を使いたいけど、クロスプラットフォームのように共通のコードで楽したい... そこで、部分的に共通化するという選択肢

Slide 14

Slide 14 text

KMPを導入する

Slide 15

Slide 15 text

KMPって何？

Slide 16

Slide 16 text

KMPって何？ KMP = Kotlin Multiplatform 16

Slide 17

Slide 17 text

KMPって何？ KMP = Kotlin Multiplatform 17 Kotlinを使って、クロスプラットフォームプロジェクトの開発を簡素化する技術

Slide 18

Slide 18 text

KMPって何？少し前だと... KMPを使って、モバイル開発に特化した機能や技術を実現したものをKMMと呼んでいた ↓ 名称がKMPに統一された 18

Slide 19

Slide 19 text

KMPって何？本LTでの『KMP』という表現は従来の『KMM』のイメージ 19

Slide 20

Slide 20 text

部分的に共通化する

Slide 21

Slide 21 text

ネイティブの開発をしていると 21 ネイティブで各OSをそれぞれ開発していると... こう考えることもあるのではないでしょうか？ ● iOSもAndroidもドメイン知識は共通なのになぁ... ● アプリ特有のこの処理、共通なのになぁ...

Slide 22

Slide 22 text

ネイティブの開発をしていると 22 ネイティブで各OSを開発していると... こう考えることもあるのではないでしょうか？ ● iOSもAndroidもドメイン知識は共通なのになぁ... ● アプリ特有のこの処理、共通なのになぁ... でも ● OS標準のUIや新機能を使って実装したい部分もある...

Slide 23

Slide 23 text

ネイティブの開発をしていると 23 ネイティブで各OSを開発していると... こう考えることもあるのではないでしょうか？ ● iOSもAndroidもドメイン知識は共通なのになぁ... ● アプリ特有のこの処理、共通なのになぁ... でも ● OS標準のUIや新機能を使って実装したい部分もある... 部分的に共通化するのに使えるのがKMP

Slide 24

Slide 24 text

KMP(共通部分) 部分的に共通化共通化する部分はKMPで書き、必要な部分はそれぞれのネイティブで書く 24 iOS Android

Slide 25

Slide 25 text

KMPを使うことで... 25 ● ネイティブ開発と比べて労力を抑えられる ○ それぞれのOSに合わせて作る部分を減らすことができる ● OSの機能や標準のUIを呼び出すことが可能 ○ 呼び出したい部分はネイティブで記述する

Slide 26

Slide 26 text

実際に使ってみた

Slide 27

Slide 27 text

実装してみる題材

Slide 28

Slide 28 text

実装してみる題材 ● UIにはそれぞれ以下のもので実装する ○ iOS: SwiftUI ○ Android: Jetpack Compose 28 TODOアプリを作る ● TODOを一覧表示でき、新規に追加ができる ○ 入力欄に文字を入力し、追加ボタンを押す ● TODOの達成・未達成を切り替えることができる ○ 表示されているTODOの横のアイコンをタップすることで切り替えられる iOS / Androidどちらも実装する

Slide 29

Slide 29 text

共通化する部分 29 TODOのロジックプレゼンテーションロジックプレゼンテーションロジック UI(SwiftUI) UI(Jetpack Compose)

Slide 30

Slide 30 text

実装してみた

Slide 31

Slide 31 text

アプリ起動時 iOS 31 Android

Slide 32

Slide 32 text

iOS Android テキストフィールドに内容を入力 32

Slide 33

Slide 33 text

iOS Android 追加ボタンを押すとリストに追加される 33

Slide 34

Slide 34 text

iOS Android 同様に2件目も追加できる 34

Slide 35

Slide 35 text

iOS Android アイテム右のアイコンタップで赤丸→チェックになる 35

Slide 36

Slide 36 text

サンプルコードのリポジトリ https://github.com/Ryu-nakay/todo-app-with-kmp 36

Slide 37

Slide 37 text

KMPを使ってみての感想

Slide 38

Slide 38 text

󰢏良いと思ったところ1 共通のロジックを書かなくて済む 38 KMP(Kotlin)を使って書くことで、Swiftで再度書き直す手間が省けた今回は、『TODOの表現や振る舞いを定義するコード』を共通化した ● 1件のTODOを表す型 ● 完了・未完了切り替えの処理 ● 複数のTODOの集合を表す型 ● TODO追加の処理など

Slide 39

Slide 39 text

OS間も含めた『コードの重複』を減らし、高い変更容易性を実現できる 󰢏良いと思ったところ2 39 共通化した部分は仕様の変更が楽 ● TODOの表現を変える ○ ex)『期限』を追加する ● TODOの振る舞いを変える ○ ex) 『削除』を可能にするといった変更が今後あったとしても... KMP(Kotlin)で共通化したコードを変更するだけで変更を実現可能

Slide 40

Slide 40 text

󰢃ツラいところ1 40 iOS側では型が期待したものではないまた、KotlinArrayの要素数すら、型はIntではなくInt32 KMP(Kotlin) Swift Int Int32 Array KotlinArray 一部を挙げると、以下の表のような型になってしまう SwiftからKMPを呼び出した際の型がなかなか不自由... この問題を解消するために何かしら手を打たないとツラい

Slide 41

Slide 41 text

󰢃ツラいところ2 41 Xcodeではサジェストが弱い・コード定義も見られないその型が持っているプロパティ・メソッドがサジェストされるかは割と気まぐれ → サジェストしてもらうというのは期待しない方がよいまた、KMPの型やメソッドの実装を見たいと思っても、KotlinやSwiftのコードで見ることはできない😱 　(KMPの実装をiOS側で使用する際に、 ObjCヘッダーファイルとして生成されてしまうため ) 実装を見ようとするとツラいものが見える

Slide 42

Slide 42 text

使ってみてのまとめ『部分的に共通化する』という考え方はとても良いものだと思った → だが、KMPには良いところだけでなく、ツラいポイントも存在している 42 しっかりと知見を持って ● KMPを導入することで得られるメリットが大きいかどうか ● KMPを導入するのなら、どのようにツラいポイントと向き合うのかを考える必要があると感じた。 󰢃『何も考えずKMPを導入すればハッピー』

Slide 43

Slide 43 text

働くをもっと楽しく、創造的に