SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ミニアプリを作って楽しく学ぶSwift

【ミニアプリを作って楽しく学ぶSwift】 愚痴を思う存分に吐き出すためのアプリを作ろう

ミニアプリを作って楽しく学ぶSwift入門 第5回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 Swiftは、Appleが開発したプログラミング言語でiPhoneやiPad、MacやApple Watch、最近ではApple Vision ProなどさまざまなApple製品向けのアプリ開発に使われています。この連載では、面白いミニアプリを作りながらSwiftでのアプリ開発を学んでいきます。今回は、 愚痴を吐き出すためのアプリです。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 前回は、アプリ「やるのかやらないのかコイントス」アプリを作りました。コイントスで即決できるようになったでしょうか? 私は決断に迷ったらいつも助けてもらっています。

 アプリ作成の第3弾は「愚っ痴る - ここが私の愚痴を吐き出す場所」を作ります。人間生きていれば、愚痴りたい時だってあります。人目を気にせず、思い切って愚痴ることができる場所があればいいなと思ったことはありませんか?今回はそんなあなただけの愚痴る場所を作っていきましょう!

開発環境

 この連載では、次の環境を使用しています。

  • macOS Sequoia 15.1
  • Xcode 16.1

プロジェクトの立ち上げる

 今回も前回と同じように、作ったプロジェクトの中に新規ファイルを作成して進めていきます。それでは、Xcodeからプロジェクトを開いて、アプリ作りを進めていきましょう。

アプリ 「愚っ痴る - ここが私の愚痴を吐き出す場所」を作る

ファイルを新規作成

 愚っ痴る用のコードを記述するためにファイルを新規作成します。

  1. Xcode上部メニューバーからFileNewFile from Template…を選択します。
  2. テンプレートを選択する画面が表示されます。①プラットフォームはiOSを選択し、User Interface下の②SwiftUI Viewを選択、③Nextを押します。
  3. 保存先を選択する画面では、④のファイル名にComplaintViewを入力し、⑤の項目が同様の値になっていることを確認し、⑥Createを押します。
  4. 作成が完了すると、Xcodeのナビゲーターエリアに作成したComplaintView.swiftファイルが表示されます。
  5. 変数bodyのコードを以下のコード[1]に書き換えて下さい。
  6. 次のようなプレビューが表示されます。
[1] 置き換えるコード
import SwiftUI
struct ComplaintView: View {
    var body: some View {
        VStack {
            Text("Good Chill")
            .font(.system(size: 56))
            .fontWeight(.black)
            .foregroundStyle(.red)
           
            
            Button(action: {
                // ボタン押下時の処理
            }, label: {
                Text("愚痴る")
                    .font(.largeTitle)
            })
        }
    }
}

Viewを横に並べる

 Viewを横に並べるには、HStackを使用します。すでに学んでいるVStackと使い方は同じです。Text(“Good Chill”)を二つのTextに分解して、HStackを使用して配置してみます。

struct ComplaintView: View {
    var body: some View {
        VStack {
            // ここを変更↓
            HStack(spacing: 16) {
                Text("Good")
                .font(.system(size: 56))
                .fontWeight(.black)
                .foregroundStyle(.red)
                
                Text("Chill")
                .font(.system(size: 56))
                .fontWeight(.black)
                .foregroundStyle(.red)
            }
            

 Textを横並びに配置できました。HStackでもspacingに値を設定することで、配置している各要素のスペースを設定することができます。

View内の全ての要素にモディファイアを適用する

 HStack(spacing: 16) {内のモディファイアをみると、.font(.system(size: 56)).fontWeight(.black)など同じモディファイアがそれぞれに記述されているため、コードの整理をしていきます。

 次のようにモディファイアをHStack}後ろに移動させます。

struct ComplaintView: View {
    var body: some View {
        VStack {
            // ここを変更↓
            HStack(spacing: 16) {
                Text("Good")
                
                Text("Chill")
            }
            .font(.system(size: 56))
            .fontWeight(.black)
            .foregroundStyle(.red)
            

 重複したモディファイアは無くなりましたが、プレビューの見た目は変わりません。これはHStack側にモディファイアを付けることでその中の全要素にもモディファイアの効果が適用されるためです。

 ただし、中の要素にすでに別のモディファイアが付いている場合は、外側のモディファイアの効果がその要素に反映されることはありません。実際に、Text("Chill")に色をつけて確認してみましょう。

struct ComplaintView: View {
    var body: some View {
        VStack {
            HStack(spacing: 16) {
                Text("Good")
                
                Text("Chill")
                    // ここを変更↓
                    .foregroundStyle(.yellow)
            }
            .font(.system(size: 56))
            .fontWeight(.black)
            .foregroundStyle(.red)
            

 プレビューを確認すると、HStack側のforegroundStyle.redにしていますが、Text("Chill")につけた.foregroundStyle(.yellow)の変更も正しく反映されているのが確認できます。

ボタンにスタイルを適用する

 愚痴るボタンにスタイルを適用して、よりボタンのような見た目に変更していきます。Buttonには.buttonStyleというモディファイが用意されており、任意のスタイルを設定することで、ボタンの見た目を変更することができます。

 次のように.buttonStyleを設定すると、ボタンにスタイルが適用されます。

Button(action: {
    // ボタン押下時の処理
}, label: {
    Text("愚痴る")
        .font(.largeTitle)
})
// ここを追加↓
.buttonStyle(.borderedProminent)

次のページ
iOSで使用できるボタンスタイル

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ミニアプリを作って楽しく学ぶSwift連載記事一覧

もっと読む

この記事の著者

リルオッサ(リルオッサ)

 ブレイクダンサー、時々iOSエンジニア。元ブレイクダンス世界2位。 現在は、楽しいことを追い求め、iOSアプリを作ったり、ビールを飲んだり、絵を書いたり、技術記事を書いたり、海外登壇チャレンジしたり、ブレイクダンスの大会を企画したりしています。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/20802 2025/03/14 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング