SwiftUIでカスタム評価ビューを自作する（続編）

こんにちは、株式会社Globeeの @toshi0383 です。
前回の記事 の続編です。
SwiftUI Advent Calendarの6日目を埋めさせてもらいました。
宣言通り、⭐️を正式に実装します。

コード

結論から共有しますと、こんなコードになります。
こちらのリポジトリに反映されています。
https://github.com/toshi0383/StarRatingView

struct StarShape: Shape {
    var points: Int = 5
    var innerRatio: CGFloat = 0.5 // The ratio of the inner radius to the outer radius

    func path(in rect: CGRect) -> Path {
        let drawPoints = points * 2
        let outerRadius: CGFloat = min(rect.size.width, rect.size.height) / 2
        let innerRadius: CGFloat = outerRadius * innerRatio
        let center = CGPoint(x: rect.midX, y: rect.midY)

        var path = Path()

        // Start from the top
        let startAngle = (-CGFloat.pi / 2)
        let angleIncrement = .pi / CGFloat(points)

        for i in 0..<drawPoints {
            let radius = i % 2 == 0 ? outerRadius : innerRadius
            let angle = startAngle + (angleIncrement * CGFloat(i))

            let point = CGPoint(
                x: center.x + radius * cos(angle),
                y: center.y + radius * sin(angle)
            )

            if i == 0 {
                path.move(to: point) // move to the start point
            } else {
                path.addLine(to: point) // draw line to next point
            }
        }

        path.closeSubpath()
        return path
    }
}

How to Make a Star

このコードにたどり着いた経緯を紹介します。
前回の実装の後、星のビミョーなマジックナンバー実装をどうしようかと考えていたのですが、散歩中に閃きました。
「プログラムで五芒星を表現するのは難しいが、そういえばWebデザイナーとかはどうやって星のアイコンなどを作成しているのだろう？」

検索すると、YouTubeでこんな動画が見つかりました。

なるほど、内側と外側の円を定義して、あとは※のようなアイコンの値（頂点の数かな）を変化させることでN芒星を描けるようです。
おそらくデザイナーの間では常識的な知識なのだと思いますが、こういった匠の技みたいなのは知識欲を駆り立てられます。

今回は大して難しい内容ではなかったですが、こういった発想の転換というのは普段の問題解決でも大事にしていきたいと思っています。

ChatGPT

さて、作るものが決まりましたので、ここでまたもやChatGPTに登場してもらいます。
ChatGPTとはだいぶ連携してきましたので、直感的に、これは細かい実装詳細の指示など何にも必要なさそうだと理解しました。
上記のスクリーンショットをそのまま渡します。

このFigmaの定義をSwiftUIのShapeにできますか？

何度かコンパイルエラーを直してもらいましたが、無事上記のようなコードに辿り着きました。

コードを読んでみる

少しコードを読み解くと、五芒星であれば5 x 2 == 10個の頂点を順番に描いていることがわかりますね。
N芒星のNも変数になっていますので、これを変えることで簡単に六芒星など他の形にもアレンジできます。

以前のバージョンからはマジックナンバーがなくなり、拡張性も担保され、綺麗なコードになった言えるのではないでしょうか。
強いていえばあと頂点の角丸だけ機能追加したいですね。

まとめ

いかがだったでしょうか。
またもやChatGPTの時短実装オチになってしまいました。

なおStarShapeの実装には納得がいっていませんので、続編で正式にプロのエンジニアっぽい実装にします。

プロのエンジニアだからと言って、ChatGPTを使わないわけではありません。
社会の変化を受け入れ、全力で活用していきましょう。

採用情報

現在株式会社Globeeではエンジニア採用を積極的に行っています。
まずはカジュアル面談にて弊社の「教育」にかける思いや「ものづくり」の考え方についてお話できればと思いますので、皆様お気軽にご応募ください。
https://globee.notion.site/Globee-d184eefc3561480292481299c64b04bc