Skip to content

Commit e50ab60

Browse files
ma91nma91n
authored
Merge pull request #1492 from future-architect/feature
VS Coode x Swift
2 parents b473d46 + 4eeb60c commit e50ab60

6 files changed

+272
-1
lines changed

‎source/_posts/20250413a_春の入門祭り2025.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ lede: "春の入門連載は2020年から始めた連載で、以下のテーマ
4646
| 4/22（火） | 柴田健太 | [初めてのStreamlit](/articles/20250422a/) |
4747
| 4/23（水） | 金森翼 | [チームを異動で環境が変わった後の立ち上がりについて](/articles/20250423a/) |
4848
| 4/24（木） | 小橋昌明 | AI駆動開発入門 |
49-
| 4/25（金） | 清水雄一郎 | Git Hook入門 or VSCodeによるSwift開発 |
49+
| 4/25（金） | 清水雄一郎 | [VS CodeによるSwift開発](/articles/20250425a/) |
5050
| 🦋 | | |
5151
| 4/28（月） | SKIP | GW（ゴールディンウィーク） |
5252
| 4/29（火） | SKIP | GW（ゴールディンウィーク）、昭和の日 |

‎source/_posts/20250425a_VS_CodeによるiOSアプリ開発入門〜ビルド＆ラン〜.md‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
---
2+
title: "VS CodeによるiOSアプリ開発入門〜ビルド＆ラン〜"
3+
date: 2025/04/25 00:00:00
4+
postid: a
5+
tag:
6+
- VSCode
7+
- Swift
8+
- iOS
9+
- Xcode
10+
category:
11+
- Programming
12+
thumbnail: /images/20250425a/thumbnail.png
13+
author: 清水雄一郎
14+
lede: "SwiftにおけるiOS開発といえば、やはりXcodeを使っている方が多いと思います。ただ最近は、VS Codeに魅力的な拡張機能（特に生成AIを活用したもの）が多く、活用していきたいと思うようになりました。"
15+
---
16+
## はじめに
17+
18+
こんにちは。HealthCare Innovation Group(HIG)の清水雄一郎です。
19+
VSCodeだと思っていたのですが、厳密（？）にはVS Codeであることに気づいた今日この頃です。
20+
21+
<details><summary>参考画像: MicrosoftのVS Codeダウンロードサイトでの表記</summary>
22+
23+
https://azure.microsoft.com/ja-jp/products/visual-studio-code
24+
<img src="/images/20250425a/image.png" alt="image.png" width="842" height="518" loading="lazy">
25+
</details>
26+
27+
[春の入門祭り2025](/articles/20250413a/) 10日目の記事です。
28+
29+
SwiftにおけるiOS開発といえば、やはりXcodeを使っている方が多いと思います。
30+
31+
ただ最近は、VS Codeに魅力的な拡張機能（特に生成AIを活用したもの）が多く、活用していきたいと思うようになりました。
32+
33+
「Xcodeを最小限に抑えて、VS CodeでiOSアプリ開発してみたらどうなるんだろう？」という好奇心から、今回ちょっとした実験をしてみることにしました。
34+
35+
この記事では、VS Code（周辺ツール）だけでどこまでiOSアプリ開発するためにどのような準備が必要か、検証した記録をまとめていきます。
36+
37+
## 環境
38+
39+
- MacBook Air (M2, 2022)
40+
- macOS 15.4.1
41+
- Xcode 16.3
42+
43+
## 事前準備
44+
45+
VS Code上で、次の拡張機能をインストールします。
46+
47+
- [Swift - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=swiftlang.swift-vscode)
48+
49+
また、検証用にXcode上で`TechBlogSpring2025`というiOSアプリプロジェクトを作成しておきます。
50+
51+
- [Creating an Xcode project for an app | Apple Developer Documentation](https://developer.apple.com/documentation/xcode/creating-an-xcode-project-for-an-app)
52+
53+
## ゴール
54+
55+
iOSアプリがビルド＆実行できるようになること。
56+
※テストやコード補完などは、本記事では扱いません。
57+
58+
### ビルド
59+
60+
まずはビルドです。Xcode上では、`⌘ + B` に相当するものです。
61+
62+
VS Codeにはそういったショートカットキーはないため、CLIから実行していきます。
63+
64+
Xcodeがインストールされている場合は、`xcodebuild`コマンドが利用できると思いますので、そちらを利用して実行します。
65+
66+
今回サンプルで用意したプロジェクトを用いてiOSシミュレータ用にアプリをビルドする場合、次のようなコマンドになるかと思います。
67+
68+
```sh
69+
xcodebuild -workspace TechBlogSpring2025.xcodeproj/project.xcworkspace \
70+
-scheme TechBlogSpring2025 \
71+
-sdk iphonesimulator \
72+
-configuration Debug \
73+
build
74+
75+
~~ 省略 ~~
76+
77+
** BUILD SUCCEEDED **
78+
79+
```
80+
81+
無事ビルド成功しましたが、毎回このコマンドを打つのは手間です。解消するために、VS Codeには外部ツールを実行する方法としてタスクを登録できる[^1]ため、そちらを用意します。
82+
83+
```json tasks.json
84+
{
85+
"version": "2.0.0",
86+
"tasks": [
87+
{
88+
"type": "shell",
89+
"label": "Xcode Build - Debug",
90+
"detail": "xcodebuild debug",
91+
"command": "xcodebuild",
92+
"args": [
93+
"-workspace",
94+
"TechBlogSpring2025.xcodeproj/project.xcworkspace",
95+
"-scheme",
96+
"TechBlogSpring2025",
97+
"-sdk",
98+
"iphonesimulator",
99+
"-configuration",
100+
"Debug",
101+
"build"
102+
],
103+
"group": "build"
104+
}
105+
]
106+
}
107+
```
108+
109+
タスクを登録しておくと、`⌘ + ⇧ + B` で簡単にビルドを実行できるようになります🎉
110+
111+
<img src="/images/20250425a/スクリーンショット_2025-04-25_7.03.56.png" alt="" width="1200" height="194" loading="lazy">
112+
113+
### 実行
114+
115+
次は実行です。これが結構手間でした。
116+
117+
Xcode上では、`⌘ + R` に相当するものです。実行するスキーマと端末（今回はシミュレータ）を選択して`⌘ + R`を押せばアプリがビルドされ、シミュレータ上でアプリが起動します。
118+
119+
<img src="/images/20250425a/スクリーンショット_2025-04-25_7.30.55.png" alt="" width="1200" height="750" loading="lazy">
120+
121+
見慣れた光景ではあるのですが、Xcodeなしで同じことをやろうとするといくつかのステップが必要です。
122+
123+
> アプリがビルドされ、シミュレータ上でアプリが起動します。
124+
125+
これを分解すると、次のようなステップになります。
126+
127+
1. アプリをビルドする
128+
1. 実行したい機種のシミュレータを起動する
129+
1. 起動したシミュレータにアプリをインストールする
130+
1. シミュレータでアプリを起動する
131+
132+
それぞれ順にCLI上で実行する場合は、次のようになります。
133+
134+
```sh アプリをビルドして、シミュレータ上で起動する
135+
xcodebuild -workspace TechBlogSpring2025.xcodeproj/project.xcworkspace \
136+
-scheme TechBlogSpring2025 \
137+
-sdk iphonesimulator \
138+
-configuration Debug \
139+
-derivedDataPath .build/ \ # シミュレーターにアプリをインストールする際に必要なので、出力先を任意の場所に指定する
140+
build
141+
xcrun simctl boot "iPhone 16 Pro" # 実行したい機種のシミュレータを起動する
142+
xcrun simctl install booted build/Debug-iphonesimulator/TechBlogSpring2025.app # 起動したシミュレータにアプリをインストールする
143+
xcrun simctl launch booted "com.example.TechBlogSpring2025" # シミュレータでアプリを起動する
144+
```
145+
146+
これで晴れてビルドしたアプリをシミュレータ上で確認できます！
147+
148+
ただし、ビルドの時と同様にこれらを毎回実行するのは手間なのでVS Codeのタスクに登録してしまいましょう。
149+
150+
今回は4ステップあったので、4つのタスクを実行する必要があるのか？と思いました。
151+
152+
しかし、VS Codeのタスクには`dependsOn`プロパティを利用することで、登録した複数のタスクを1つにまとめて実行できるみたいです👏
153+
154+
以下はtasks.jsonの例です。
155+
156+
<details><summary>変更後のtasks.json</summary>
157+
158+
```json tasks.json
159+
{
160+
"version": "2.0.0",
161+
"tasks": [
162+
{
163+
"type": "shell",
164+
"label": "Xcode Build - Debug",
165+
"detail": "xcodebuild debug",
166+
"command": "xcodebuild",
167+
"args": [
168+
"-workspace",
169+
"TechBlogSpring2025.xcodeproj/project.xcworkspace",
170+
"-scheme",
171+
"TechBlogSpring2025",
172+
"-sdk",
173+
"iphonesimulator",
174+
"-configuration",
175+
"Debug",
176+
"-derivedDataPath",
177+
".build/",
178+
"build"
179+
],
180+
"group": "build"
181+
},
182+
{
183+
"type": "shell",
184+
"label": "Boot Simulator",
185+
"command": "xcrun",
186+
"args": [
187+
"simctl",
188+
"boot",
189+
"iPhone 16 Pro"
190+
],
191+
"group": "test"
192+
},
193+
{
194+
"type": "shell",
195+
"label": "Run App on Simulator",
196+
"command": "xcrun",
197+
"args": [
198+
"simctl",
199+
"install",
200+
"booted",
201+
".build/Build/Products/Debug-iphonesimulator/TechBlogSpring2025.app"
202+
],
203+
"group": "test",
204+
"dependsOn": "Xcode Build - Debug"
205+
},
206+
{
207+
"type": "shell",
208+
"label": "Launch App on Simulator",
209+
"command": "xcrun",
210+
"args": [
211+
"simctl",
212+
"launch",
213+
"booted",
214+
"yu1Ro5.TechBlogSpring2025"
215+
],
216+
"group": "test",
217+
"dependsOn": "Run App on Simulator"
218+
},
219+
{
220+
"type": "shell",
221+
"label": "Build and Run Sequence",
222+
"dependsOn": [
223+
"Xcode Build - Debug",
224+
"Boot Simulator",
225+
"Run App on Simulator",
226+
"Launch App on Simulator"
227+
],
228+
"dependsOrder": "sequence",
229+
"group": "test"
230+
}
231+
]
232+
}
233+
```
234+
235+
</details>
236+
237+
<div class="note warn" style="background: #fdf9e2; padding:16px; margin:24px 12px; border-radius:8px;"><span class="fa fa-fw fa-check-circle"></span>
238+
239+
シミュレータを起動後に、再度起動するタスクを実行すると既に起動しているためエラーとなり、2回目以降はシミュレータの起動をスキップするタスクを別途構成する必要がありそうです。
240+
241+
</div>
242+
243+
## 試してみて
244+
245+
今回チャレンジできなかった部分も含めて、XcodeとVS Code(w/ 拡張機能)で開発する場合、次のように使い分けようかと考えています。当初はXcode離れしたいモチベーションがありましたが、PreviewやInstrumentsなど、代替が見つけられなかった機能もあるため、適宜使い分けることができるといいなと思います。
246+
247+
- Xcodeを使う時
248+
- Preview[^2] 機能を使って、UIを作り込む
249+
- アプリのアップロードなど、アプリ署名に関わる操作をする時
250+
- Instruments[^3] 機能を使って、アプリのパフォーマンスを測定する時
251+
- アプリの開発用証明書やプロビジョニングプロファイルの管理や設定時
252+
-> Xcodeのプロジェクトファイルは、人間が目で見てわかるものではないため
253+
- VS Codeを使う時
254+
- 業務ロジックやテストなどのUI以外の実装時
255+
-> 生成AI活用した拡張機能使いやすいだけでも、使う価値あると思いました
256+
- MarkdownやJSON、YAMLなど、Swiftファイル以外を編集する時
257+
258+
## まとめ
259+
260+
Xcodeの利用を最小限に抑えて、VS CodeでiOSアプリ開発してみようという話でした。
261+
262+
本記事で挑戦した範囲では、Xcodeを使わずにVS Codeを開発業務に利用するというレベルまでは到達していません。しかし、アプリをビルド＆実行するまでの内部的な仕組みの理解度が高まるいいきっかけになりました。
263+
264+
一方、執筆にあたり試行錯誤する中で、SweetPad[^4]という今回準備した諸々をいい感じにセットアップしてくれるVS Code拡張機能に出会いました。この記事で詳しく紹介するまで辿り着けなかったですが、興味ある方はぜひ調べてみてください。
265+
266+
最後まで読んでいただき、ありがとうございました。
267+
268+
[^1]: https://code.visualstudio.com/docs/debugtest/tasks
269+
[^2]: https://developer.apple.com/documentation/xcode/previewing-your-apps-interface-in-xcode
270+
[^3]: https://help.apple.com/instruments/developer/mac/current/
271+
[^4]: https://sweetpad.hyzyla.dev/

‎source/images/20250425a/image.png‎

139 KB
Loading

‎source/images/20250425a/thumbnail.png‎

49.7 KB
Loading

‎source/images/20250425a/スクリーンショット_2025-04-25_7.03.56.png‎

38.7 KB
Loading

‎source/images/20250425a/スクリーンショット_2025-04-25_7.30.55.png‎

472 KB
Loading

0 commit comments

Comments
 (0)