[SwiftUI]ChatGPTを使って単語からSF Symbolsを提案させコピペでPreviewを生成させる

# SF Symbolsの検索をChatGPT使って効率化した

iOS開発してたら、アイコンとしてSF Symbolsはよく使います。

SF Symbolsの公式サイト
https://developer.apple.com/sf-symbols/

黙示で似てるのを探すのも大変なので検索したいテーマを入れるとSF Symbols を提案しPreviewまで自動生成してくれるPromptを作成しました。

音楽で生成させたコードが以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/7948076e-dea6-cdef-9bb8-d845ea6cb177.png)


実行環境はChatGPT : GPT - 3.5です


# 実際に動作してるLink
ChatのLink
https://chat.openai.com/share/401d78cf-1019-4231-94f3-a8da62af8287


# Prompt

現在音楽に関するSF Symbols を提案する例です。
「」内の単語を任意の単語に書き換えてください。


```
以下の手順で作業を行なって


1. SF Symbols において「音楽」に関連するものを箇条書きででなるべく多くリストアップして、近い表現のEmojiがあれば”Emoji”：SFSymbolの名前　って形式でおしえて
2. 1で取り上げたものをSwiftUIのArray形式で保存して
3. 2 で作成したArrayをCodeBlockに含めて視覚的に確認できるコードをSwiftUIで作成して。この時、コードをそのままコピペできるように2で作成したリストも含めて一つのコードブロックで生成して、Viewの名前は、SymbolListViewで ContentViewは使用しないで

以下のCodeを使用して

    var body: some View {
        VStack {
            Text("Symbol List")
                .font(.title)
                .padding()

            ScrollView {
                VStack(alignment: .leading, spacing: 10) {
                    ForEach(symbolList, id: \.self) { symbol in
                        HStack {
                            Image(systemName: symbol)
                                .font(.title)
                            Text(symbol)
                                .font(.body)
                                .padding(.leading, 10)
                        }
                    }
                }
                .padding()
            }
        }
    }
}

上記の手順をStep-by-stepで行っていきましょう

```


# 出力

出力は以下の通りになります

---

Step 1:
SFSymbol において「音楽」に関連するものを箇条書きででなるべく多くリストアップして、近い表現のEmojiがあれば”Emoji”：”SFSymbolsの名前”形式で教えて

- 🎵：music.note
- 🎶：music.note.list
- 🎙️：mic
- 🎚️：slider.horizontal.3
- 🎛️：slider.horizontal.below.rectangle
- 🎤：mic.fill
- 🎧：headphones
- 🎼：musical.note
- 🎹：pianokeys
- 🥁：drum

Step 2:
1で取り上げたSFSymbolsの名前をSwiftUIのArray形式で保存して

```
let symbolList: [String] = [
    "music.note",
    "music.note.list",
    "mic",
    "slider.horizontal.3",
    "slider.horizontal.below.rectangle",
    "mic.fill",
    "headphones",
    "musical.note",
    "pianokeys",
    "drum"
]
```

Step 3:
2で作成したArrayをCodeBlockに含めて視覚的に確認できるコードをSwiftUIで作成して。この時、コードをそのままコピペできるように2で作成したリストも含めて一つのコードブロックで生成して、Viewの名前は、SymbolListViewでContentViewは使用しないで

```
import SwiftUI

struct SymbolListView: View {
    let symbolList: [String] = [
        "music.note",
        "music.note.list",
        "mic",
        "slider.horizontal.3",
        "slider.horizontal.below.rectangle",
        "mic.fill",
        "headphones",
        "musical.note",
        "pianokeys",
        "drum"
    ]
    
    var body: some View {
        VStack {
            Text("Symbol List")
                .font(.title)
                .padding()

            ScrollView {
                VStack(alignment: .leading, spacing: 10) {
                    ForEach(symbolList, id: \.self) { symbol in
                        HStack {
                            Image(systemName: symbol)
                                .font(.title)
                            Text(symbol)
                                .font(.body)
                                .padding(.leading, 10)
                        }
                    }
                }
                .padding()
            }
        }
    }
}

struct SymbolListView_Previews: PreviewProvider {
    static var previews: some View {
        SymbolListView()
    }
}
```

以上のコードは、SymbolListViewというViewを作成し、`symbolList`という配列を使用して音楽に関連するSFSymbolsとその名前を表示します。ビューはスクロール可能で、それぞれのシンボルにはアイコンと名前が表示されます。これにより、コードをコピペして使用することができます。

---

表示されたコードを実装すると以下のようになります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3352230/1687ca6d-244e-4d0f-f593-8b175b66da04.png)


二回目以降は途中で出力されるListをコピペするのが早いかもしれません



# まとめ

SF Symbolsの検索からPreviewの作成できるPromptを作成しました。


いいね、ブックマーク、フォローしていただけると勉強の励みになりますので是非お願いします。😉

追伸　--
Twitterで日々の学習風景を投稿してます。

@Ren_yello