[iPhoneアプリ開発] 中学生でもわかるSwiftUI 入門 EP.1

第 1 回 中学生でもわかるiPhoneアプリ開発を始めます。
本入門からはSwiftUIを用いて、動画投稿アプリ(Y○utube)を真似したアプリを作成及び解説をして参ります。
上記の動画ではハンズオン形式で解説しておりますので是非興味がある方はご覧ください。٩( ‘ω’ )و

今までにXCodeやプログラミンをしたことがない方やiPhoneアプリを開発したことがない方でも開発できるように解説して参ります。

★まずSwiftUIとは
2019年にApple(アップル社)が発表したフレームワークの一種です。
※フレームワークとは簡単に説明しますとアプリ開発における様々な部品のようなものです。
ここでは簡単にアプリが開発できるようになったものとだけ認識しておいてください。徐々に説明をしていきます。

★VStack,HStack,ZStackとは
まず初めに SwiftUI の一番大事なVStack,HStack,ZStackについて説明させて頂きます。
簡単に説明しますと
VStackはV(Vertical)垂直を意味します。
HStackはH(Horizontal)水平を意味します。
ZStackは特殊ですので第 3 回の講座(SwiftUI 講座 EP.3[中学生でもわかるiPhoneアプリ開発])で説明致します。

まずは実際にコーディングして確認してみましょう。
★Xcodeの立ち上げ

入力しますと下記の画面に移ります。

Xcodeを立ち上げる際はストリーボードではなくSwiftUIでプロジェクトを作成してください。

プロジェクトを作成できたら、わからないプログラムが表示されていますが、現状は消さずに無視していただいて問題ありません。それではまずテストのため現状の状態で「 再生ボタン」 若しくは「 command + R 」キーボタンを押下してみてください。

※これを実行すると言います。
実行しますとシュミレータが起動し下図のように中心にテキストが表示されていることが確認できます。

ここで先ほど勉強したVStack,HStack,ZStackを実際に確認してみましょう。


★VStack(Vertical)垂直の場合

下記のようにコーディングしてみます。

VStack{
    Text("中学生でもわかるiPhoneアプリ開発")
    Text("中学生でもわかるiPhoneアプリ開発")
}

上記を実行してみます。

このように縦に表示できていることが確認できます。

★HStack(Horizontal)水平の場合

下記のようにコーディングしてみます。

HStack{
    Text("中学生でもわかるiPhoneアプリ開発")
    Text("中学生でもわかるiPhoneアプリ開発")
}

上記を実行してみます。

このように横に表示できていることが確認できます。

★ZStackの場合
ZStackは特殊です。
ZStackはView(表示)を重ねることができます。ここでは「重ねることができるんだ〜」とだけ認識していてください。

番外編(下記は応用ですので理解する必要はありません)
★上記を踏まえた上でVStack,HStack,ZStackで少しデザインしてみます。
ログイン入力画面を下記のようにコーディングしてみます。

VStack{
    Text("中学生でもわかるiPhoneアプリ開発")
    Text("ログイン画面")
    HStack{
        Text("苗字 :")
        TextField("入力ください", text: $lastname)
            .frame(width: 240)
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
    HStack{
        Text("名前 :")
        TextField("入力ください", text: $firstname)
            .frame(width: 240)
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
    HStack{
        Text("年齢 :")
        TextField("入力ください", text: $age)
            .frame(width: 240)
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
}

このように、ちょっとしたログイン画面が作成できます。
次回は番外編で触れたテキストフィールドについて説明して参ります。興味がある方は是非次回の入門講座もご覧ください。

以上で
第 1 回 中学生でもわかるiPhoneアプリ開発を終了致します。ご視聴いただきありがとうございました。(#^.^#)

参考文献
VStack(Apple Developer Documentation)
HStack(Apple Developer Documentation)
ZStack(Apple Developer Documentation)

※個人の見解による意見でございます。参考程度にお願い致します。
著作者 Nishimura Taichi , Kurogi Misato