IT図書館

プログラミング解説

NEW ARTICLE
【Swift/SwiftUI】ゲッターとセッター
  1. HOME
  2. SwiftUI
  3. 【SwiftUI】オブジェクトとモディファイアの基本

【SwiftUI】オブジェクトとモディファイアの基本

オブジェクトとモディファイアはSwiftUIでプログラミングを行う上で必ず押さえておく必要がある基本的な要素です。

本記事では具体的なオブジェクトとモディファイアの例を挙げながら解説を行なっていきます。

目次

オブジェクトとは

オブジェクトとは、SwiftUIにおいてアプリ上で様々な動作を行うための機能のことです。

プロジェクト作成時に最初に書いてあるText()もオブジェクトの1つです。

Textのような画面に描画をするためのオブジェクトは多く存在しており、これらはHTMLで画面に要素を表示するのと同じような役割を担っています。

ここから実際にいくつかのオブジェクトを例に解説していきます。

プロジェクトの立ち上げ方について知りたい方はこちらの記事を参考にしてみてください。

IT図書館
2023.05.05
【Swift基礎】Xcode開発環境の構築
https://jinluvman.com/archives/2023/05/05/1186
本記事ではXcodeを利用してSwiftでの開発環境を構築、プロジェクト作成までの流れを解説していきます。XcodeとSwiftを用いてiosアプリを開発する際には基本的にはWindowsではなくMacが必要となる点にご注意ください。XcodeとはXcodeは、AppleがAppストアにて提供している開発ツールです。iphoneをはじめとして、ipadやmac,apple watch向けのアプリケーションの開発を行うことができる統合開発環境です。開発言語としては、SwiftやObjective-Cが使用できることで有名ですが、JavaやC言語でのアプリケーション開発にも利用できます。ipho...

Textオブジェクト

画面に任意のTextを表示させるためのオブジェクトです。Textオブジェクトで実際に文字を表示させる例を見ていきます。

VStack {
            Text("今年の夏はとても暑いです。")
        }

実行結果

Textオブジェクトは、括弧()の中にダブルクォーテーションで囲んで入れた文字を画面に表示することができ、画面中央に指定した文字が表示されていることがわかります。

Imageオブジェクト

画面に画像を表示するためのオブジェクトです。任意の画像を指定して画面に表示させる例を見ていきます。

VStack {
            Image("mountains")
        }

実行結果

例では、自分で「mountains.jpg」という画像をXcodeプロジェクト内にアップロードし、その画像をImageオブジェクト内で指定しただけです。非常に簡単に画像を表示することができます。

ここまで説明してきたようにオブジェクトとは、SwiftUIに組み込まれているアプリ開発に必要な機能のことを示しています。

モディファイアとは

オブジェクトに対して、色々な設定の変更やカスタマイズができるコードのことです。

画面に描画するオブジェクトをHTMLと表した場合、モディファイアはCSSやJavaScriptのような役割を担っています。

画面に描画したオブジェクトに対して、色やサイズを変更したり、表示位置を指定することができるのがモディファイアです。

Textオブジェクトのモディファイア

textオブジェクトでは、文字の色を変更したり文字のサイズやフォントを変更するためのモディファイアを使用することができます。

VStack {
            Text("今年の気温について").font(.title)
            Text("今年の夏はとても暑いです。").foregroundColor(.red)
        }

実行結果

例では、フォントサイズと文字色を変更するモディファイアを使用しました。

.font(.title)はフォントを変更するためのモディファイアである.font()を使用し、括弧内でフォントサイズを指定しました。.titleはSwiftUI側で定義されている文字のサイズの値で、他にもtitle2やdefaultを指定することもでき、titleはHTMLで言うところの<h1>のような位置付けだと認識すると覚えやすいです。

font()モディファイアには他にも任意の数値でフォントサイズを変更したりフォントを指定することをも可能です。

続いてforegraundColorモディファイアでは文字色を赤色に変更しました。こちらもシステム登録されている.redという値を指定しましたが、自分で任意のRGBの値を指定して色を変更することも可能です。

Imageオブジェクトのモディファイア

Imageオブジェクトでは、サイズの変更、画像の枠組みを指定したり、画像の表示範囲を指定することが可能です。

今回は縦横比を維持しつつサイズを変更する例を見ていきます。

VStack {
            Image("mountains")
                .resizable()
                .scaledToFit()
                .frame(width: 300, height: 300)
        }

実行結果

実はImageオブジェクトを紹介した際の例では、大きいサイズの画像をそのまま表示していたために画面から大きくはみ出てしまっていました。モディファイアを使用することでその画像を画面内に綺麗に収めることができました。

まず、resizebleモディファイアで画像のサイズ変更を可能にします。scaledToFitモディファイアで画像が元々の縦横の比率を守ることを保証します。最後にframeモディファイアで画像を表示する量一の縦と横の長さを指定します。

この3つのモディファイアにより、指定した範囲内で縦横比を維持したまま画像を画面内にきれいに収めることができました。このようにモディファイアは1つのオブジェクトに対し複数指定することができます。

モディファイア使用時の注意点

モディファイアは、1つのオブジェクトの対して様々用意されており、複数使用可能です。

1つのオブジェクトに対して色々なモディファイアを使用することで自由にカスタマイズをすることが可能ですが、使用する上で2点ほど注意点がございます。

モディファイアは上から実行される

1点目はモディファイアは、上から順番に実行されてその効果が適用されます。最終的に全て適用されるのだから同じではないか？とお思いだと思いますが、順番は非常に重要です。

先ほどのImageオブジェクトへのモディファイアへの例を見ていきます。先ほどのモディファイアは以下の順番で適用していました。この順番で記述することで縦横比を維持したまま画像のサイズを変更することが可能でした。

  1. 画像サイズの変更を可能にする(resizeble)
  2. 画像の縦横の比率を維持する(scaledToFit)
  3. 画像を表示する枠サイズの指定(frame)

これを以下の順番で書き直してみます。

  1. 画像サイズの変更を可能にする(resizeble)
  2. 画像を表示する枠サイズの指定(frame)
  3. 画像の縦横の比率を維持する(scaledToFit)
VStack {
            Image("mountains")
                .resizable()
                .frame(width: 300, height: 300)
                .scaledToFit()
        }

実行結果

ご覧のように画像の縦横比が崩れて正方形の画像に変わってしまいました。

原因はframeで画像の表示サイズを300×300に変更してしまった後にscaledToFitを指定してしまったことで、すでに300×300の画像サイズに変更された画像に対して縦横比を維持する効果を適用してしまったためです。

このようにモディファイアを適用する順番は非常に重要になるため常に意識しておきましょう。

同じモディファイアは一番上が優先して適用される

1つのオブジェクトに対し、複数の同じモディファイを指定してしまった場合、一番上に書いたモディファイアが優先して適用されます。

VStack {
            Text("今年の夏はとても暑いです。")
                .foregroundColor(.red)
                .foregroundColor(.blue)
        }

実行結果

文字色に赤、青の順番で指定をしているため、最初に書いてある赤色が適用されていることが確認できます。

例えば、赤い文字色を後から青に変更しようと思ったけれども赤に指定した記述を消さずに後ろに青に指定してしまい、文字色が変更されずに困ってしまう場合などがあるかもしれません。

最後に

本記事では、オブジェクトとモディファイアがどのようなものであるかと、その関係性について解説してきました。

各オブジェクトについてや図形の表示方法やStackViewについても他の記事で詳しく解説していきますので、ご覧ください。

IT図書館
2023.07.13
【SwiftUI】基本図形(四角や丸)を簡単解説
https://jinluvman.com/archives/2023/07/13/1311
本記事では、SwiftUIで標準で使用できる図形について解説していきます。図形を表示するところから、色の変更、サイズを変更する方法まで触れていきます。四角円形の図形を描画する際にはRectangle()を使用します。Rectangle()の後ろにてforegroundColor()プロパティで色を変更し、frame()プロパティで図形のサイズを指定します。各プロパティについては下の章で説明していきます。VStack { Rectangle() .foregroundColor(.blue) .frame(width: 200, height: 200) } .padding()...
IT図書館
2023.06.07
【SwiftUI基礎】Stack View徹底解説(VStack・HStack・ZStack)
https://jinluvman.com/archives/2023/06/07/1326
本記事では、SwiftUIの基礎であるVStack ,HStack,ZStackについての特徴と使い方を実際のコードと画面を出しながら紹介していきます。Stack ViewとはSwiftUIで利用可能な、ボタンやテキストボックスといった要素を縦や横などに並べて配置することのできるViewのことです。Stack Viewの中に要素を入れることで好きに並べていくことができ、一覧表示するメモアプリなどの機能を作成することができます。ここから実際に、要素を縦に並べる、横に並べる、前後に並べるStackViewについて順に解説していきます。VStackVStackは、中に配置した...