SwiftUIでレイアウトや描画をしていると、必ず登場するのが CGRect（シージーレクト） です。
名前の通り「長方形」を表す構造体で、位置と大きさをひとまとめに扱える便利な仕組みです。
UIKit時代からの基本クラスでもあり、SwiftUIでもビューの座標やサイズを扱うときに広く使われています。
この記事では CGRectの基本的な意味や使い方、活用シーン、注意点 までわかりやすく解説します。
CGRectとは？
CGRectは、位置（x・y）とサイズ（幅・高さ）を持つ長方形を表す構造体です。
ちなみに「CG」 は Core Graphics の略のこと。
座標系の原点（左上や左下など環境による）からの相対的な位置に、幅と高さを組み合わせることで「四角形」を定義することができます。
CGRectの定義は次のようになっています。
|
1 2 3 4 5 |
struct CGRect { var origin: CGPoint // 長方形の左上（もしくは左下）の座標 var size: CGSize // 幅と高さ } |
つまり、CGPoint（点）とCGSize（サイズ）を組み合わせたものがCGRectです。
これにより「どこに」「どの大きさで」描画するかを表せます。
具体例：矩形（四角形）を描画してみる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import SwiftUI struct ContentView: View { var body: some View { Canvas { context, size in // 幅100, 高さ50 の四角形を座標 (50, 50) に配置 let rect = CGRect(x: 50, y: 50, width: 100, height: 50) context.fill( Path(rect), with: .color(.blue) ) } .frame(width: 200, height: 200) .border(.gray) } } |
CGRect を使って長方形を定義し、Path に変換して塗りつぶしている例です。
コードのポイント
let rect = CGRect(x: 50, y: 50, width: 100, height: 50)で、左上が(50, 50)、右下が(150, 100)の長方形を「位置と大きさ」を一括で定義Path(rect)は、四角形の設計図（CGRect）を「実際に描ける形」に変換する役割を持つcontext.fill(..., with: .color(.blue))で、その形を青色で塗りつぶしてキャンバスに描画- 結果として、座標
(50, 50)から幅100、高さ50の青い四角形が表示される
CGRect を使うと「どこに（位置）」「どの大きさで（幅・高さ）」をひとまとめで扱えるため、座標やサイズの管理がシンプルになります。
もしx, y, width, heightをバラバラに扱っていたら、コードがかなり煩雑になってしまうのですが、CCRectを使うと、それをシンプルに管理できるのです。
主要なプロパティ
CGRectには便利なプロパティがたくさんあります。
よく使うものを表にまとめました。
| プロパティ | 型 | 説明 |
|---|---|---|
| origin | CGPoint | 四角形の基準点（左上または左下の座標） |
| size | CGSize | 四角形の幅と高さ |
| minX | CGFloat | 四角形の左端の x 座標 |
| midX | CGFloat | 四角形の中央の x 座標 |
| maxX | CGFloat | 四角形の右端の x 座標 |
| minY | CGFloat | 四角形の上端の y 座標 |
| midY | CGFloat | 四角形の中央の y 座標 |
| maxY | CGFloat | 四角形の下端の y 座標 |
| width | CGFloat | 四角形の幅 |
| height | CGFloat | 四角形の高さ |
| isEmpty | Bool | 幅または高さが 0 以下かどうか |
具体例：中央座標を取得
midX や midY を使えば、四角形の「中央の位置」をすぐに計算できます。
|
1 2 3 4 |
let rect = CGRect(x: 0, y: 0, width: 200, height: 100) print(rect.midX) // 100.0 （横方向の中央） print(rect.midY) // 50.0 （縦方向の中央） |
同様に minX, maxX, minY, maxY を使えば「端の位置」も簡単にわかります。
主要なメソッド
CGRectには、四角形同士の関係を調べたり、新しい四角形を作る便利なメソッドもあります。
| メソッド | 説明 |
|---|---|
| intersects(_:) | 2つの矩形が重なっているか判定 |
| contains(_:) | 点や矩形が内側に含まれるか判定 |
| union(_:) | 2つの矩形を含む最小の矩形を返す |
| intersection(_:) | 2つの矩形が重なる部分を返す |
| insetBy(dx:dy:) | 内側または外側に余白を作った矩形を返す |
| offsetBy(dx:dy:) | 位置をずらした矩形を返す |
具体例：矩形同士の関係を調べる
例えば、矩形（四角形）を扱うときには、「重なっているかどうか」や「両方を含む最小の四角形」を求めたい場面があります。
CGRect にはそれを簡単に調べられる便利なメソッドがあります。
|
1 2 3 4 5 6 |
let rect1 = CGRect(x: 0, y: 0, width: 100, height: 100) let rect2 = CGRect(x: 50, y: 50, width: 100, height: 100) print(rect1.intersects(rect2)) // true（重なっている） print(rect1.union(rect2)) // (0.0, 0.0, 150.0, 150.0) |
intersectsは「2つの四角形が重なっているかどうか」を調べるunionは「両方の四角形を含む最小の四角形」を返す
このように、CGRect を使えば四角形同士の関係をとてもシンプルに計算できます。
図形のレイアウトやUI要素の配置を考えるときに便利です。
CGRectの活用シーン
CGRectは実際のアプリ開発では、次のような場面でよく登場します。
- ビューのサイズや位置を取得・調整
→ 画面の中でビュー（ボタンや画像など）が「どこに、どれくらいの大きさで」置かれているかを表すのに使われる。 - 描画やアニメーション
→CanvasやPathで図形を描くとき、基準になるのが CGRect。位置と大きさを指定するだけで四角形が描ける。 - タップされた場所を調べる時（ヒットテスト（当たり判定）など）
→ 例えば「タップがこのボタンの範囲に入っているか？」をcontains(_:)で簡単に判定できる。 - レイアウト計算
→ 四角形をずらしたり、重なりを調べたりして UI をきれいに整えるのに役立つ。
CGRect は、「どこに、どんな大きさで描くか・配置するか」を表す座標の道具です。
ボタンや画像の配置から、図形の描画、タップ判定まで、幅広い場面でとても便利に使えます。
CGRectを使うときの注意点
便利なCGRectですが、初心者がつまずきやすい注意点もあります。
-
座標の基準は左上
SwiftUI ではビューの座標系は左上が原点です。Core Graphics の一部処理などで「左下が原点」のケースもあるので、混乱しやすい点に注意。 -
幅や高さが0以下になることがある
計算の仕方によってはwidthやheightがマイナスになる場合があります。その場合はrect.isEmptyを使って「正しいサイズかどうか」を確認すると安全です。 -
数値はCGFloatで扱う
SwiftUI の座標やサイズは基本的にCGFloat。IntやDoubleを混ぜると計算でエラーや変換が増えるので、CGFloatに統一するのがおすすめです。
このあたりを押さえておくと、バグの少ないレイアウトが作れます。
まとめ
今回は CGRect について解説しました。
- CGRectは「位置（origin）＋サイズ（size）」で長方形を表す構造体
minX, midX, maxXなどの便利なプロパティで中央や端を簡単に取得できるintersectsやunionなどのメソッドで矩形（四角形）同士の関係を計算できる- SwiftUIのレイアウト計算や図形描画、タップ判定など幅広い場面で活躍
- 座標系の違いや負のサイズに注意
CGRectは「UIの土台を支える基本パーツ」といえる存在です。
仕組みを理解しておくと、ビューの位置調整やカスタム描画がとてもやりやすくなります。
ぜひコードに取り入れて、座標やサイズの扱いに慣れてみてくださいね！
