Go to Qiita Advent Calendar 2024 Top
LoginSignup
11
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

TDCソフトAdvent Calendar 2024

Day 6
@m1k50118(佐藤 真)inTDCソフト株式会社

VS CodeでiOSアプリ開発をする~Github Copilotを添えて~

Last updated at Posted at 2024-12-05

はじめに

これはTDCソフト株式会社アドベントカレンダー2024 の6日目の記事です。
とある記事でVS CodeでiOSの開発をしている記事1を見つけたので、そちらを参考にさせていただきつつ、Copilotを導入し、サクサク開発できる環境を作ってみました。

環境

  • MacOS
    • Sequoia 15.1
  • Xcode 16.1
  • VS Code 1.95.3

SweetPadの環境構築

SweetPad2の公式ページから導入する
https://sweetpad.hyzyla.dev/docs/intro
VS CodeのMarketplaceでSweedpadをインストールします。

プロジェクトの作成

SweetPadのインストールが完了したら、VS Codeで開くためのプロジェクトを作成します。
作り方としては、Xcodeでプロジェクトを作る or CLIで作るになります。
Xcodeから作るのはいつでもできる、かつ、簡単にできるのでCLIでやってみます。
公式に書いているのは、XcodeGen or Tuist3というCLIでした。
XcodeGenは過去にやったことあるからTuistでやってみます。

Tuistの環境構築

Tuistのページを見つつ、順番に実行していきます。
一旦Homebrewでインストール

brew tap tuist/tuist
brew install --formula tuist

Homebrew経由でインストールしたのでZshのシェル補完を設定する

mkdir .oh-my-zsh/completions
tuist --generate-completion-script > ~/.oh-my-zsh/completions/_tuist

Tuistでプロジェクトの作成

Tuistが使えるようになったので、プロジェクトの作成作業に入っていきます。
まずは、アプリのプロジェクトファイルを作成するディレクトを作成しておきます。
私はホームディレクトリにDevelopというフォルダを作成し、そこで作業しました。

mkdir SweetpadSample
cd SweetpadSample
tuist init --name SweetpadSample

initすると下記のように自動でディレクトリが構成される

ls
Project.swift  SweetpadSample Tuist Tuist.swift
  • Project.swift
    • ライブラリの依存関係、ローカライズされたリソースファイル、その他の構成オプションが設定されている
    • Package.swiftと一緒
  • Tuist.swift
    • プロジェクトスコープのTuistの構成が含まれている
    • 何のこっちゃよく分からない
  • SweetpadSample
    • アプリのソースファイルが含まれているディレクトリ

プロジェクトファイルを作成する準備が出来たので、生成してみましょう。
プロジェクトファイルを生成するコードを実行するコマンドを打ちます。

tuist generate

.xcodeprojと.xcworkspaceが作成されます。

ls
Derived Project.swift SweetpadSample SweetpadSample.xcodeproj 
SweetpadSample.xcworkspace Tuist Tuist.swift

Deriverdというディレクトリも作成されているが、何のためにあるのか分からないので、一旦スルーします。（ちゃんと勉強します、、、）

直接開いて編集できるXcodeプロジェクトとは異なり、Tuistプロジェクトはマニフェストファイルから生成されることに注意してください。つまり、生成されたXcodeプロジェクトを直接編集しないでください。

下記は、Tuistのページに書いてあったおまけです。

Tuistの一般的なコマンド（おまけ）

アプリのビルド

tuist build

アプリのテスト

tuist test

ここまでやってようやくVS Codeに移れます

VS CodeでSweetPadの設定をする

Tuistで作成したプロジェクトファイルのルートファイルをVSCodeで開きます
image.png

SweetPadを正常にインストール出来ていれば、左のサイドバーにキャンディーのアイコンがあり、それをクリックすると、ビルド＆Runするアイコンと、実行できるSimulatorとデバイスのリストが表示される。
Destinationsで任意のSimulatorにカーソルを当てると再生ボタンが表示され、クリックするとそのSimulatorでアプリが実行されます。
image.png

ここまで出来たら開発可能な環境のセットアップは完了です。
とはいえ、ここまでだったらXcodeでいいじゃんとなるので、その他の機能も追加していきましょう。

オートコンプリート機能の設定

  1. MarketPlaceでSwiftのインストール
    1. image.png
    2. インストールするとCodeLLDBを使うのに、GlobalかWorkspaceで使うかを聞かれたが、一旦怖いのでWorkspaceに設定しました。
  2. xcode-build-serverをHomebrewでインストール 
    brew install xcode-build-server --head
  3. コンフィグファイルをVS Codeのコマンドパレットから作成する
    1. SweetPad: Generate Build Server Config
    2. image.png
  4. キャンディマークのスパナのアイコンをクリックし、ビルドをするとSuggestが出るようになる
    1. image.png

デバッグ

プロジェクトのルートディレクトリにある.vscodeの中に、launch.jsonファイルを作成します。
公式ページに記載されているjsonをコピペし、F5を押すとデバッグビルドが実行されます。
ブレークポイントなどで変数などの確認はできますが、画面の構成や、Memory Graphは見られなさそうなため、そこはXcodeを使った方が良さそうです。

コードフォーマット

Apple公式のフォーマッタであるswift-formatやその他の拡張機能を⌘+Sで機能させます
.vscode/settings.jsonに下記を追記します

{
  "[swift]": {
    "editor.defaultFormatter": "sweetpad.sweetpad",
    "editor.formatOnSave": true,
  },
}

自分の環境だとすでに他の設定がされているため、こんな感じで追記しました。

{
    "lldb.library": "/Applications/Xcode.app/Contents/SharedFrameworks/LLDB.framework/Versions/A/LLDB",
    "lldb.launch.expressions": "native",
    "[swift]": {
        "editor.defaultFormatter": "sweetpad.sweetpad",
        "editor.formatOnSave": true,
    },
}

これで⌘+Sを押すと自動的にフォーマットされるようになりました。
swift-formatが気に入らず、swiftformatを使いたい時は、

{
  "sweetpad.format.path": "swiftformat",
  // The "--quiet" flag is important here to ignore output that "swiftformat" writes to stderr.
  // Otherwise, the extension thinks that the formatting failed and shows an annoying error message
  "sweetpad.format.args": ["--quiet", "${file}"],
}

と書けばいいらしいです。
swift-formatのフォーマットのルールを変えたい場合は、.swift-formatというファイルを作成し、その中にルールを記載すればいいですが、割愛します。詳しくはこちらをご覧ください。

VS CodeからTuistを操作する

コマンドプロンプトでTuistのコマンドが打てます。

  • sweetpad.tuist.generate
    • SweetPad: Generate an Xcode project using Tuist
    • プロジェクトの作成
  • sweetpad.tuist.install
    • SweetPad: Install Swift Package using Tuist
    • パッケージをインストールする
  • sweetpad.tuist.clean
    • SweetPad: Clean Tuist project
    • クリーン
  • sweetpad.tuist.edit
    • SweetPad: Edit Tuist project (Open project in Xcode)
    • Tuistの何かを編集できる
      .vscode/settings.jsonに
"sweetpad.tuist.watcher": true

としておくと、.swiftファイルを消したり追加した際に自動的にプロジェクトファイルを再生成してくれるようになるようですが、ビルドをするとファイルを追加しても認識されなかったので、この設定だけでは不十分な可能性があります。
（"sweetpad.tuist.autogenerate": trueでもダメでした）
その他にも、設定した方がいいことはありますが、ただでさえ長くなっているのであとはこちらのページから設定してください

Github Copilotでコードを書いてみる

  1. Github Copilotの購入
    1. Github Copilotのページから住所やらクレジットカードを記入する
  2. ボタンをぽちぽちして、VS Codeにインストールする的なリンクを押すと、Githubの認証が入り、認証が通るとVS Codeが開く
  3. MarketplaceでGithub Copilotをインストールする

これでCopilotの設定は一旦OKです

コードを生成してみる

  1. 新しいファイルを作成します
    1. image.png
  2. ⌘+Sを押して、適当にLoginView.swiftと命名します
  3. ⌘+iを押して、Copilotの会話Viewを表示します
  4. 命令してみる
    1. image.png
  5. 作成されたコードに同意する
    1. image.png
  6. ContentView.swiftから先ほど作成したLoginViewに遷移するコードを書いてもらう
    1. image.png
  7. LoginViewを新しく作成してしまっているので、いい感じのところをコピペする
    1. image.png
  8. 実行してみる
  9. ビルドエラー、、、
  10. LoginViewがないと怒られていたので、ファイルを追加しても認識してくれていなかった
  11. VS CodeからTuistを操作するでやった自動的にプロジェクトファイルを再生成するのが、機能していなかったので、仕方なくコマンドパレットでSweetPad: Generate an Xcode project using Tuistをして、プロジェクトを再生成しました
  12. 再度実行したら表示された！
    1. image.png
  13. ボタンを押したら、ちゃんとLoginViewに遷移できていますね
    1. image.png
    2. LoginViewもちゃんと動いてそうです
    3. image.png
      細かい部分は自分で手を加える必要がありますが、大枠を作成してもらうのは、非常に楽になりましたね。（ものすごく今更実感していますが、、、）

まとめ

だいぶ長くなってしまいましたが、VS CodeでiOSアプリを開発する方法でした。
1番の利点としてはコード生成が1つのエディタで出来るようになったことだと感じています。
一応Github Copilot for Xcodeがありますが、サードパーティのXcode入れるのに抵抗があったので、今回VS Codeでアプリ開発が出来るようになったのは、喜ばしい限りでした。（なぜ抵抗あるのかと言われてしまうと、なんとなくになってしまうのですが、XcodeはAppleがいい、、、）
ただし、Hierarchy ViewやGraph Memoryが使えない点などを挙げると、Xcodeを全く使わなくて済むようになるかと言われるとまだまだそこまでではないと思います。
今後機能が増えることを信じて、個人開発ではVS Codeに移行してみようかなと思いました！
感想や指摘をコメントで頂けると勉強になりますので、ぜひお願いいたします！

参考文献

  1. aromarious. もうVS Codeなしでは生きていけない. https://zenn.dev/aromarious/articles/sweetpad-extension-introduction. 2024/12/02. (参照 2024/12/06) ↩

  2. Sweetpad. https://sweetpad.hyzyla.dev/ ↩

  3. Tuist. https://tuist.dev/ ↩

11
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?