ReactエンジニアがSwiftUI書いてみてﾁｮｯﾄﾜｶﾙになるまで

ReactエンジニアがiOSアプリを書いてみたお話です。

----
TypeScriptとC#をやってきたWebエンジニアがSwift Tourを読んでみたログ（重要項目抜き出してみた）
https://deflis.hatenablog.com/entry/2024/06/22/190129
SweetPad
https://sweetpad.hyzyla.dev/

【悲報】お嬢様系底辺ダンジョン配信者、配信切り忘れに気づかず同業者をボコってしまう～けど相手が若手最強の迷惑系配信者だったらしく動画がアホほどバズって伝説になってますわ!?
https://kakuyomu.jp/works/16817330658027210412
やり込んだ乙女ゲームの悪役モブですが、断罪は嫌なので真っ当に生きます
https://kakuyomu.jp/works/16816927861422152332

Transcript

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