CursorでiOSアプリを開発してみよう！ホットリロードもできちゃうよ！

## はじめに
アプリ開発にはCursorはあんまり関係ないかな〜。なんてったって我々にはXcodeがいますからね！という気持ちがあり、Cursorには触れてきていませんでした。

しかし、やっぱりAIの力を借りられるのなら借りたい！爆速開発したい！個人開発ももっと高速でやりたい！そう思いCursorでのモバイル開発の可能性を探りに行きました。

## Cursorとは
VSCodeライクなAIエディターです。普段VSCode使ってるよという人は移行しやすいと思います。

モバイルエンジニアズの我々はあまりVSCodeに馴染みがない人もいるかもしれません。でも初期設定時にAndroidStudioっぽくショートカットを設定することもできます。残念ながらXcodeは選択肢にありませんでした。

とりあえず触ってみる！くらいであれば無料なのでぜひ使ってみてください。
今回の記事で紹介する機能を使うのも無料で使えます。

https://www.cursor.com/


## Cursorの便利な機能
いろんな機能がありますが個人的にこれめちゃよい！と思ったものを紹介しておきます。

### Docs
Docs機能は自分の好きなドキュメントを読み込ませてそれについて、教えてもらえる機能です。

Editor右側にあるChat機能で```@docs```と打ちDocsを選択します
![スクリーンショット 2024-10-26 17.22.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/00998f69-3c1d-cf90-3501-39bfbb230b9b.png)

```+Add new doc```を選択します
![スクリーンショット 2024-10-26 17.24.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/5c1cc246-5569-7617-ed8a-196ad3a3cb40.png)

ページのURLを入力し、呼び出し時の名前を決めます。
あとは、chatでドキュメントを呼び出して質問すれば回答を得られます

![スクリーンショット 2024-10-26 17.28.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/3396faea-21fa-45fe-c207-c781490a31dd.png)


### Composer
Composerは複数ファイルにまたがってコードを書いてくれる機能です。

```command+i```でComposerのウィンドウを開くことができます。あとはここにプロンプトを書くだけです。Docで読みこんだPokeAPIを使ってみます。MVVMでファイルも分けるように指示すると、その通り作ってくれます。

![スクリーンショット 2024-10-26 18.00.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/8e62c10f-2fbd-9e8d-8e75-f79e8f62d750.png)

こんな感じで生成されます。Acceptを押すとコードの変更が反映されます。コードを修正して欲しい場合は指示をすることで書き直してくれます。

![スクリーンショット 2024-10-26 18.07.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/01153cfd-ad94-62a5-79a0-af3650cb0ad5.png)


## ビルドどうする？
### Xcodeからビルドする
Xcodeからビルドすることはもちろん可能です。
ただ、作成しているプロジェクトが``Folder``管理か``Group``管理かでちょっと手順が変わります。

#### そもそもFolder管理Gruop管理って何？と言う人向け
とりあえず以下の認識でいいと思います。

Xcode16で作ったプロジェクト→Folder管理
Xcode15以前で作ったプロジェクト→Group管理

Folder管理にするとファイル追加とかでコンフリクトしなくなったみたいです。
Group管理しているものもFolder管理に変換する機能がXcode16で追加されているようです。
僕もまだ詳しくは理解していません...

#### Group管理
Group管理の場合はCursorからファイルを追加しても、Xcodeでプロジェクトを開くとファイルが表示されていません。
以下の画像のように```Add Files To```からCursorで作成したファイルを追加してあげることでXcodeから読み込み、ビルドができるようになります。
![スクリーンショット 2024-10-26 16.44.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/2e853118-dd19-c9e4-0992-474f05757139.png)

#### Folder管理
Folder管理の場合はGroup管理の時のようにファイルを追加するという作業を挟む必要がありません。Cursorで追加したファイルはそのままXcode側から参照できます。Cursor開発の場合はFolder管理の方が楽そう。
まだFolder管理にして不便なところがあまりわかってないので、どこかで不便ポイントが出てきたりするかも。

### Cursorからビルド
VSCodeの拡張であるSweetPadを導入することで、Cursorから直接ビルドすることができるようになります。Folder管理しているならこれを使えばサクッとCursorからビルドできるはずです。

https://sweetpad.hyzyla.dev/

### 手順
#### Sweetpadのインストール
Cursorエディタ内のマーケットプレイスからSweetpadをインストールします。

![スクリーンショット 2024-10-2616.51.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/4f4f2433-a194-b8ca-5e72-0b7f06c9393d.png)


エディタの下部にプロジェクト名の表示があり、そこからビルドスキームを変更できます。また、シミュレーターの機種も変更できます。僕は現在iOS18の端末と実機では端末ではビルドできていますが、iOS17のシミュレーターでビルドしようとするとそんなのないと言われてしまいます。
![スクリーンショット 2024-10-26 17.02.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/497af381-2900-f43f-01bd-d93a03b457e4.png)

#### ビルドする
```command+shift+p```で以下のような、実行コマンドの一覧がでるので、ここで```SweetPad: Build & Run (Launch)```を選択し、実行します。

歯車からショートカットキーを設定することもできます。僕は``control+command+r``にしました。(``command+r``は他のとバッティングする)

もしこれでビルドが失敗する場合は``xcodebuild``のコマンドラインツールを最新にするなどしてみてください。

![スクリーンショット 2024-10-26 17.05.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/06e6c2e5-cc23-01a0-a3be-c99ef278fdb8.png)

※XcodeGenのコマンドもSweetPad内にあったので、XcodeGen使ってればGroup、Folder関係なくビルドできそうだなぁと思いつつ試してはいません。

## ホットリロード
ホットリロードが動いている様子は以下から。

<blockquote class="twitter-tweet" data-media-max-width="260"><p lang="ja" dir="ltr">ついにCursorでホットリロードまでできてしまう。すげ。 <a href="https://t.co/qopaHMwYBF">pic.twitter.com/qopaHMwYBF</a></p>&mdash; どこぞの  iOSエンジニア (@dokozon0) <a href="https://twitter.com/dokozon0/status/1850052766510764185?ref_src=twsrc%5Etfw">October 26, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


### 導入方法

このツールを使ってホットリロードを実現します。

https://github.com/krzysztofzablocki/Inject?ref=rudrank.com

### 手順
#### パッケージを入れる
ここはサクッと行きます。
SPM
```
https://github.com/krzysztofzablocki/Inject.git
```

cocoapods
```
pod 'InjectHotReload'
```

#### BuildSettingsを編集
Xcodeを開いてPROJECT>Build Settingにある**Other Linker Flags**の**Debug**に``-Xlinker``と``-interposable``を追加します。このとき「""」(ダブルクウォーテーション)でそれぞれが囲われていない状態にしてください。おそらく最初入力した時は自動で入ってしまいます。

![スクリーンショット 2024-10-26 15.56.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/a989f8b4-78d6-2a95-ad2d-f900d90cf885.png)

#### アプリのダウンロード
- リンクから**InjectionIII.app.zip**をタップして最新のアプリをダウンロードします

https://github.com/johnno1962/InjectionIII/releases


- アプリはmacの``Applications``フォルダ配下においてください。Applications配下に配置すると画像のようにLaunchPadに表示されます。使用しているXcodeも同じようにApplications配下に置いておく必要があります。
 
![スクリーンショット 2024-10-26 16.05.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/98c44b00-2065-7f5a-e3be-5d2764811389.png)


#### Injectionアプリの起動

- アプリを起動し、Open Projectからホットリロードをしたいプロジェクトのフォルダを選択してください。選択したとき特に何か表示が出たりはしません。選択するのは``xcodeproj``とかではないのでお気をつけください。画像の2枚目参照
- ファイルを選択したら、もう一度メニューを開き``Prepare Project``を選択します。
- アラートが出るので「Go ahead」を押します

![スクリーンショット 2024-10-26 16.13.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/d921001d-d1e7-88f3-370b-9af671d2e1f6.png)

![スクリーンショット 2024-10-26 16.14.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/a6fef71a-79e5-42e4-3957-cb0750bb8977.png)

#### 動かしてみよう
Cursorからプロジェクトを開いてみましょう。Prepare Projectが正常に動くと```#if DEBUG```以下のコードが追加されているはずです。

![スクリーンショット 2024-10-26 17.52.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/3f3c74aa-4256-8af3-e5a4-9c6d7c2c90f1.png)


ビルドし以下のような表示が出れば正常に動かせています。
僕はDesktopにプロジェクトファイルを置いていたら権限的に〜的なことを言われたので、別のディレクトリに移動させました。




![スクリーンショット 2024-10-26 16.21.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/7594f974-b21d-a8f6-e950-4c073a57a762.png)

あとはCursor側でコードを変更して、``command+s``を押せばシミュレーターの表示も変わるはずです！いえーい。



## これもやっておくと良い
SweetpadのAutcompleteもやっておくと良さそうです。
これは、以下のようにButtonと打つとXcode上では候補を出してくれると思いますが、Cursorではデフォルトでは出ません。それを解決してくれるのがAutocompleteです。


![スクリーンショット 2024-10-26 17.17.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/30aef608-6d25-5695-aa8b-47aa87a06083.png)

### 手順
以下のコマンドを叩く！
```
brew install xcode-build-server --head
```

Cursorで``command+shift+p``を押して、実行コマンド一覧から```SweetPad: Generate Build Server Config```を実行！!



https://sweetpad.hyzyla.dev/docs/autocomplete


## 個人開発にちょっと使ってみた感想
個人で開発しているアプリ(ファイル数50くらい)のプロジェクトを開いて、アプリがどういうものか説明させるとちゃんと自分のアプリの内容を答えてくれます。

こんな感じの処理ってどこに書いてたっけ？と聞けば該当コードの場所を教えてくれます。そして、こうやって変更したいんだけど、と言うとコードの修正案を出してくれます。

## 触ってみて感じたこと
今のところかなり可能性を感じています。
アプリ開発でネックになるビルドなども、VSCodeの拡張からできるし、ホットリロードもできるし良いっすね。

## おわりに
もう少し触って可能性を深掘ります。
おーわーりー！

あ、よかったらいいねもポチッとお願いします！！！！

## 参考
https://www.rudrank.com/exploring-cursor-building-running-simulator/