Share
Embed
Slide 1
Slide 1 text
Reactエンジニアが
SwiftUI書いてみて
ﾁｮｯﾄﾜｶﾙ になるまで
id:deflis55
はてなエンジニアセミナー #33
1
Slide 2
Slide 2 text
自己紹介
● id:deflis55(でふりす)
● x.com/deflis
● github.com/deflis
● カクヨムアプリのiOS
版の開発を担当してい
ます。
2
Slide 3
Slide 3 text
自己紹介(2)
● 好きなライトノベル
○ 【悲報】お嬢様系底辺ダンジョン配信者、配信切り忘れ
に気づかず同業者をボコってしまう～けど相手が若手
最強の迷惑系配信者だったらしく動画がアホほどバ
ズって伝説になってますわ!?
○ やり込んだ乙女ゲームの悪役モブですが、断罪は嫌な
ので真っ当に生きます
3
Slide 4
Slide 4 text
自己紹介(3)
● 仕事としては何でも屋をしてきた
○ その中でも React/TypeScript は好きでいろいろ書い
ています。
● Android 2.3ぐらいのころのスマホアプリ経
験はあります。
○ スマホ黎明期ですが、ライフサイクルの考えはネイ
ティブアプリで共通で役に立ちました。
4
Slide 5
Slide 5 text
5
はてなではWebアプリ
ケーションエンジニアか
らのリスキリングプログ
ラムがあります。
Slide 6
Slide 6 text
はてなリスキリングプログラム
はてなでは、Webアプリケーションエンジニア
を対象にしたモバイルアプリ開発スキルを習得
するためのリスキリングプログラムを実施して
います。
6
Slide 7
Slide 7 text
注意
自分はリスキリングプログラム実施前にWebか
らモバイルに転向したため、今回の発表内容は
リスキリングプログラムの内容とは異なりま
す。
今はもう少し丁寧なステップがあります。
7
Slide 8
Slide 8 text
Reactエンジニアが
SwiftUI書いてみて
ﾁｮｯﾄﾜｶﾙ になるまで
8
Slide 9
Slide 9 text
9
SwiftUI書き始めて約1年
● 昨年5月ぐらいにアプリエンジニアに転向
○ 準備自体は2月ぐらいから
Slide 10
Slide 10 text
10
SwiftUIを
始めるにあたって
Slide 11
Slide 11 text
11
やったこと
1. Swift Tourを読む
2. SwiftUIを書いてみる
3. SwiftUIとUIKitの関係について学ぶ
Slide 12
Slide 12 text
SwiftTourとは
Swift公式が用意しているプログラミング初学者
向けの簡単なSwift入門書
https://docs.swift.org/swift-book/documentation/the-swift-programming-language/guidedtour/
https://www.swiftlangjp.com/welcome-to-swift/a-swift-tour.html
12
Slide 13
Slide 13 text
初学者向けなので読むのが大変
というわけで、経験者向けに要約してみた記事
を出しています。
https://deflis.hatenablog.com/entry/2024/06/22/190129
13
Slide 14
Slide 14 text
特に大事なこと2つ
1. 定数定義が let というのが最初混乱する
○ JavaScriptでは定数が const で変数が let だが
○ Swiftでは定数が let で変数が var となっている
2. async/awaitがある
○ ほぼ想像するとおりのasync/awaitがある
14
Slide 15
Slide 15 text
SwiftUIを書いてみる
本番コードで最初に取り組んだのはUIKitで出来
ているところをSwiftUIに置き換えるところ。
先輩エンジニアにひな形を作ってもらって、中
身を実装するところから始めました。
15
Slide 16
Slide 16 text
Reactの場合
const ReactNode: React.FC = () => {
return
Text
;
}
16
Slide 17
Slide 17 text
SwiftUIの場合
struct SwiftNode: View {
var body: some View {
Text(“Text”)
}
}
17
Slide 18
Slide 18 text
意外と近い
同じ宣言型UIなので、Reactの基礎がわかってい
ればSwiftUI(やJetpack Compose)はなんとな
く読み書き出来る。
18
Slide 19
Slide 19 text
データの受け渡し方
ReactのコンポーネントのProps
≒
SwiftUIのコンポーネントの引数
19
Slide 20
Slide 20 text
結論
フロントエンドエンジニアなら
今のネイティブ開発は意外と似ているので
思ったよりは怖くないよ！
20
Slide 21
Slide 21 text
さらに
しかも、今はAIという力強い味方が…！
21
Slide 22
Slide 22 text
初心者に力強い味方、LLM
ChatGPT/GeminiとかGithub Copilotとか
知らないライブラリなどについて聞くのに最
適。
22
Slide 23
Slide 23 text
VSCode拡張 SweetPad
SweetPadというVS Code拡張で、ある程度使
い慣れたいつものエディタでiOS開発が出来ま
す。
SwiftUIのプレビューなどは出来ないのでXcode
と併用すると吉。
23
Slide 24
Slide 24 text
割とSwiftも読み書き出来る
主にCopilotを使ってます。（たまにClineも
使ってみてます）
あまり活用事例として多くないが、Claude
SonnetやGeminiは、SwiftやKotlinも普通に読
み書き出来ます。
24
Slide 25
Slide 25 text
困ったこと
いわゆるハルシネーションの問題がある。
25
Slide 26
Slide 26 text
具体例
● AI は Apollo Client の React / Kotlin / iOS
を混同する。
○ それぞれのプラットフォームで機能に差異があるが、そ
の差異を認識出来ない。
○ ちゃんとドキュメントを読むしかない。
○ Webのライブラリでも似たような話はあるのでむずい。
26
Slide 27
Slide 27 text
まとめ
いつものVSCodeでAIと一緒に楽しくiOS開発！
（ただしAIも知らないことがある）
27
Slide 28
Slide 28 text
UIKitからの移行の時に考えること
UIKitと共存させたい
→ UIHostingController を使う
28
Slide 29
Slide 29 text
UIHostingController
UIKitの中でSwiftUIを表示するようにする仕組
み。
Reactでいうと部分的なところにマウントするイ
メージ。
29
Slide 30
Slide 30 text
SwiftUI だと表現力が足りない
UIKitを埋め込む
→ UIViewRepresentable などを使う。
黒魔術で裏側のUIKitを触る
→ SwiftUI Introspect などを使う。
30
Slide 31
Slide 31 text
UIKitが埋め込めたりする理由
UIKitなどの既存UIライブラリが裏側にいること
を意識するとちょっと面白いかもしれない。
結構Reactの仮想DOMの考えが役に立つ。
ただし、SwiftUIはUIKitと1:1対応しているわ
けではない。
31
Slide 32
Slide 32 text
Debug View Hierarchy
32
Slide 33
Slide 33 text
足りないときの選択肢
● UIKit の中の部品として使う
○ UIHostingController など
● UIKit を部品として使う
○ UIViewRepresentable など
● どうしても困るなら SwiftUI から UIKit を触
る
○ SwiftUI Introspectなど
33
Slide 34
Slide 34 text
コンバートしてみて
始める前は不安があったけど、今のアプリ開発は思ったよ
りも簡単だった。
バックエンドの知識のあるアプリエンジニアはフロントエ
ンドエンジニアと同じように重宝されがち。
（今もたまにWeb側触ってます）
意外とやってみると面白いので、挑戦すると楽しいかも。
34