Windows の WSL（Ubuntu）にインストールしたSwiftをVSCodeから使う“やさしい”手順

https://qiita.com/nak435/items/a83fa44b4a2a7f18e87b

↑前回の記事で Ubuntu にインストールした Swift を、Windows の VSCode から使う方法を“図解付き”でまとめます。

以下の環境が Windowsにインストール済みであることを前提とします。

- Visual Studio Code
- WSL（Ubuntu）
- Swift on Ubuntu


# 1. VSCodeに拡張機能をインストール

WSLをリモート操作するため、（ローカルの）VSCodeに WSL拡張機能をインストールします。（検索して「インストール」を押す。）

![scr 2024-06-27 161730.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/4cec3351-c53f-60ad-c59b-f38249fcc131.png)


# 2. リモート側VSCodeに拡張機能をインストールする

Ununtuターミナルを起動し、リモートのVSCodeを起動します。


## 2.1 リモートVSCodeを起動

```terminal
$ code
```

リモート接続に必要なライブラリが自動的にインストールされた後に、リモート接続済みのVSCodeが開く。画面の左下（Ubuntuで実行中）を確認する。

![scr 2024-06-27 165134.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/f407e88c-b773-b6f2-3295-c71a3db47201.png)

## 2.2 Swift拡張機能をインストール

swift拡張機能を検索、「WSL: Ubuntu にインストールする」をクリックする。

![scr2 2024-06-27 165012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/e7cdbd62-9e93-201d-50f4-197c5bdd9928.png)


# 3. Swiftプロジェクトを作成

Ununtuターミナルから、適当なディレクトリでSwiftプロジェクトを作成する。

```terminal
$ mkdir swift-pj
$ cd swift-pj
$ swift package init --type executable
$ code .
```

リモート接続されたプロジェクトフォルダが開いたVSCodeが起動します。

![scr4 2024-06-27 172622.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/3209a9ef-8265-6762-27a8-b2171a058a44.png)

プロジェクトフォルダを初めて開くと、`.build`と`.vscode`が自動で生成されます。

![scr4 2024-06-27 172644.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/31a57962-4b29-75e8-2484-868baafd37ec.png)


では、デバッグ実行してみましょう。


# 4. デバッグ実行する

コードを少し書き換えます。

```swift
let message = "Hello, world!"
print(message)
```

## 4.1 ブレークポイントの設定


行番号のすぐ左側をクリックし、ブレークポイントを設定します。赤い丸「<font color="red">●</font>」です。

![scr5 2024-06-27 173249.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/7f831e86-909d-529d-d92c-834c18adbcec.png)


## 4.2 デバッグ実行開始

左ペインの「実行とデバッグ」をクリック、上部の三角形「Debug Swift」をクリックして、デバッグ実行を開始します。

![scr 2024-06-27 165304.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/ddbb9041-c669-e1b8-9bf9-63a4362b9885.png)


:::note warn
もし、左ペインの「実行とデバッグ」をクリックしたときに、↓このような画面となった場合は、

<img width="300" alt="scr6 2024-06-27 174624.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/43b2ceec-7c03-4559-8d56-8ebe0be27458.png" />

一度、VSCodeを閉じて、再度、VSCodeを起動してください。

<img width="300" alt="scr6 2024-06-27 174718.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/d1490727-023b-2136-00cb-fde11d0f6efd.png" />
:::


すると、設定したブレークポイントで止まります。

「ターミナル」タブの横の「デバッグコンソール」をクリック。
デバッガーのコマンドを入力します。ここでは、変数`message`の内容を確認するために、`p message`を入力しenter。

![scr 2024-06-27 165333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/4c63ec5f-b634-eed0-773e-c94fdafea2a7.png)


すると、変数`message`の内容が表示されました。
String型で中身は"Hello, world!"ですね。Xcodeのデバッガーとほぼ同じです。

画面上部中央にあるデバッガーのツールバーで「続行」をクリックし、プログラムを続行する。最終的にはプログラムが終了する。

![scr 2024-06-27 165338.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/25478a4b-c262-8cfc-29ec-a79eb002148e.png)





プログラムからの標準出力は、「ターミナル」タブに出力されています。

![scr 2024-06-27 173818.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/d7269f68-8ede-6f83-1ff3-15a4d1dc888a.png)





# 5. リモートとの切断

左下の青いところをクリック、上部のメニューから「リモート接続を終了する」をクリック。


![scr 2024-06-27 165445.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/0744b476-48f5-a220-d7f0-fa1d01afcfe0.png)


再び起動する場合は、「最近使用した項目を開く」から Ubuntuプロジェクトを見つけてクリックすればよい。

![scr 2024-06-27 165543.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/85550704-3058-c584-737a-d4eda66abab5.png)

もしくは、ubuntu ターミナル でプロジェクトフォルダに移動後、`code .`で起動します。

![scr7 2024-06-27 182441.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/06ed5478-3b05-1d18-81e9-ffb1355188af.png)

# 関連記事

何回かに分けて、Windows で Swift を使う方法のパターンを紹介しました。
オススメは、Windows で Swift を使うなら、WSL（Ubuntu）をインストールして使うのが、一番簡単で確実な気がします。2番目はSwift公式Dockerですね。
ご参考にしてください。

- Ubunt

https://qiita.com/nak435/items/ae8197de7a7be49f4807

https://qiita.com/nak435/items/a83fa44b4a2a7f18e87b

- Docker
 
https://qiita.com/nak435/items/0e1f2ffed085335b09b9

https://qiita.com/nak435/items/0180c390db39a84a8212

- native

https://qiita.com/nak435/items/478ef704c04520ad7960