アプリ 「毎日いいことカウンター」を作る
ファイルを新規作成
毎日いいことカウンター用にコードを記述するためのファイルを新規作成します。
-
Xcode上部メニューバーから
File＞New＞File from Template…を選択します。
-
テンプレートを選択する画面が表示されます。①プラットフォームは、
iOSを選択し、User Interface下の②SwiftUI Viewを選択、③Nextを押します。
-
保存先を選択する画面では、④のファイル名に
GoodCounterViewを入力し、⑤の項目が同様の値になっていることを確認し、⑥Createを押します。
-
作成が完了すると、Xcodeのナビゲーターエリアに作成した
GoodCounterView.swiftファイルが表示されます。
Viewを理解する
SwiftUI Viewのテンプレートを使用してファイルを作成すると、View構造体が自動で作成されます。
このViewがアプリのUIを構築する基本的な要素になります。
現在は次のコードになっていますが、この変数bodyの中に画面に表示したいレイアウトや要素を記述します。
import SwiftUI
struct GoodCounterView: View {
var body: some View {
Text("Hello, World!")
}
}
試しに変数bodyの中にあるTextの文字列を次のように変更してみましょう。
var body: some View {
Text("いいことカウンター") // ここを変更
}
変更すると、エディターエリアのライブビューに即座に反映され、いいことカウンターという文字が画面上に表示されました。
このようにViewの変数body内に画面に表示したいレイアウトや要素を記述していき、ひとつの画面やUIパーツを作成していきます。
モディファイアを理解する
モディファイアとは、SwiftUIにおいてViewの外観や動作をカスタマイズするための修飾子です。このモディファイアを使用することで、次のような操作が可能です。
- 色やフォント、サイズなどの外観を変更する
- パディングやマージンを設定し、レイアウトを調整する
- ユーザーのタップやジェスチャーに反応する動作を設定する
また、Viewに対して複数のモディファイアを連続的に続けて記述することもできます。次のように変数bodyの中を変更してください。
var body: some View {
Text("いいことカウンター")
.font(.largeTitle)
.bold()
.foregroundStyle(.pink)
}
例で使用したモディファイアにそれぞれ次のような効果があります。
| 名称 | 効果 |
|---|---|
| .font | Textに指定したフォントを適用する |
| .bold | Textをボールドのフォントウェイトを適用する |
| .foregroundStyle | Viewに前景色を適用する |
次のようなプレビュー結果になります。
ぜひ、.foregroundStyleには好きな色を適用して遊んでみてください。
Viewを縦に並べる
Viewを縦に並べるために、VStackというViewを使用します。これは、VStackの中に含まれるViewを縦に並べることができるViewです。
変数bodyのコードを次のように書き換えます。
var body: some View {
VStack {
Text("いいことカウンター")
.font(.largeTitle)
.bold()
.foregroundStyle(.pink)
Text("100") // 新しく追加
}
}
プレビュー結果でTextが縦に並んでいることを確認できます。
フォントを理解する
標準のフォントスタイルを知る
モディファイアを理解する章で、.font(.largeTitle)でフォントスタイルを適用して外観を変更しました。
iPhoneアプリ開発で使用できるフォントスタイルには次のスタイルがあります。
| 名称 | 概要 |
|---|---|
| largeTitle | 大きなタイトルスタイル |
| title | 標準的なタイトルスタイル |
| title2 | 階層的な見出しの2番レベル |
| title3 | 階層的な見出しの3番レベル |
| headline | 主要な見出しのスタイル |
| subheadline | 見出しの補足情報を表すサブスタイル |
| body | 標準的な本文スタイル |
| callout | 説明や注記に使うスタイル |
| caption | 小さな説明を表すキャプションスタイル |
| caption2 | 代替のキャプションスタイル |
| footnote | 脚注や補足情報を表すスタイル |
Text("いいことカウンター")の.fontのスタイルもお好みで変更してみてください。
任意のフォントサイズを設定する
デフォルトで用意されているフォントスタイルを適用する他に任意のフォントサイズを指定することができます。
前の章で追加したText(“100”)のフォントサイズを変更するために次のようにコードを加えてください。
Text("100")
.font(.system(size: 80))
.font(.system(size: ))は、デフォルトで用意されているフォントに対して任意のサイズを適用させることができます。実際にプレビュー結果でも、テキストが大きくなっているのを確認できます。
80以外の値も設定してみて、どのように変化をするか確認してみてください。
Buttonを理解する
いいことカウンターでは、いいことをカウントするためのボタンが必要です。SwiftUIでは、ButtonというViewが用意されており、そのButtonを使用することでボタンを表現できます。
今回は、次のようなButtonを使用します。
Button(action: {
// 実行したい処理を記述
}, label: {
// ボタンの見た目を記述
})
action:の{}の中に実行したい処理を記述して、label:の{}の中にはボタンの見た目を記述します。
label:にはViewを記述できるため、こちらでもTextを使用します。
次のようにButtonを変数bodyに追加します。
struct GoodCounterView: View {
var body: some View {
VStack {
Text("いいことカウンター")
.font(.largeTitle)
.bold()
.foregroundStyle(.pink)
Text("100")
.font(.system(size: 80))
// ↓ここを追加
Button(action: {
// 実行したい処理を記述
}, label: {
// ボタンの見た目を記述
Text("👍")
.font(.system(size: 100))
})
}
}
}
プレビュー結果でも追加したButtonが確認できます。まだ実行したい処理を記述していないため、何も起こりませんが、ボタンを押すとアニメーションが発生するので押せている雰囲気は感じとることができます。
