第２回 [iPhoneアプリ開発] 中学生でもわかるSwiftUI 入門 VStack HStack ZStackと変数のスコープ について

第 2 回 [iPhoneアプリ開発]中学生でもわかるSwiftUI VStack HStack ZStack(ブイスタック エイチスタック ゼットスタック)と変数のスコープ について

はい、それでは第 2 回 [iPhoneアプリ開発] 中学生でもわかるSwiftUI(スフィフト ユーアイ)をはじまめます。


本講座からはプログラムを触れたことがない方でもiPhoneアプリを作成できるところまでを解説したいと思います。今回は VStack HStack ZStack (ブイスタック エイチスタック ゼットスタック)と変数のスコープ について説明します。説明する時に実際の動作を見た方が良いと思いますので、iPhoneアプリを開発に必要なXcode(エックスコード)という、統合開発環境環境(トウゴウカイハツカンキョウ)を使って、実際に使用しながら説明したいとおもいます。

★★★
この動画を最後まで見て頂けましたら
このように簡単なIPhone画面を作成できるようになります。
(最終結果動画を差し込む)
★★★

まずはVStack(ブイスッタク)について説明します。
VStack(ブイスッタク)というのは、中括弧で囲った部分を「縦に表示させます」という「プログラム」です。

では、実際にコーディングして縦にTextが表示されるか確認してみます。プログラムを書くことを「コーディング」と呼びます。このように書きます。

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

これで実行してみます。

このように縦に表示できていることが確認できます。
　覚え方は、VStack(ブイスッタク)の頭文字V(ブイ)を、「たてー」とイメージすると覚えやすいと思います。もしくはVStack(ブイスッタク)のV(ブイ)はVertical(バーティカル)垂直に表示するのV(ブイ)とイメージすると覚えやすいと思います。
　補足説明ですが、一度もプログラミングをしたことがない方は、このVStackの { }「中括弧」で囲ったTextというのプログラムが、ずれているように見えるかもしれません。これはインデントというもので、プログラムを書くうえでのルールです。中括弧で囲った部分は「→|」タブを入れて、プログラムをずらして書くルールになります。プログラムのインデントを揃えるのが大変な時は、選択して「 control + I 」ボタンを同時に押下すると、選択された部分が自動でインデントできます。

　次にHStackについて説明します。次にHStack(エイチスッタク)というのは、中括弧で囲った部分を横に「表示させます」という「プログラム」です。では、実際に確認しましょう。このようにコーディングしてみます。

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

これで実行してみます。

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

覚え方は、HStack(エイチスッタク)のH(エイチ)を、「よこー」とイメージすると覚えやすいと思います。もしくはHStack(エイチスッタク)のH(エイチ)をHorizontal(ホライゾンタル)水平のH(エイチ)とイメージすると覚えやすいと思います。

次にZStackについて説明します。ZStack(ゼット スタック)は特殊です。ZStack(ゼット スタック)はView(表示)を重ねることができます。今回では「重ねることができるんだ〜」とだけ認識していてください。
ZStack(ゼット スタック)については後日説明します。

次に変数のスコープについて紹介します。

※「スコープ」とは範囲という意味です。

　前回、変数が箱のようなものだと説明しました。しかし、その箱には箱自体が使える所と使えない所があります。それが変数のスコープというものになります。どのような物か実際にみてみましょう。試しにこのように書いてみます。

VStack{
	
	var box = “ワトソン”

	Text(“\(box)”)
	box = “へようこそ”
}

これで実行します。
　プログラムは上から下に向かって走りますので、boxには「ワトソン」という文字列が入ります。次にテキストでboxの中身を表示しています。ですので、iPhone画面には「ワトソン」が表示されました。ここまでは、前回のおさらいになります。
　ではその下に、もう一度変数を表示してみます。このように書いてみます。

VStack{
	
	var box = “ワトソン”

	Text(“\(box)”)
}
HStack{

	Text(“\(box)”)	
}

そうするとこのようにエラーが表示されました。
　実は、変数というのは{}中括弧に依存しています。どういうことかと言うと{ }中括弧内でしか変数は使用できません。つまり、今回の場合はVStack の { } 中括弧内でしか変数を利用できません。このVStackの { } 中括弧を出てしまうと変数は消えてしまいます。このように「一部の所でしか使えない」というものがローカル変数と呼びます。
　では変数を使用したい場合はどのようにすべきかは、{ } 中括弧の外で変数を使用してください。試しにこのように書いてみます。

struct ContentView: View {
    var box = "ワトソン"
    var body: some View {
        VStack{
            Text("\(box)")
        }
        HStack{
            Text("\(box)")
        }
    }
}

このようにすると、この「box」変数はbodyの {} 「中括弧」 に依存しますのでbodyの {} 「中括弧」内であれば使用できます。
エラーが消えていることが確認できます。

これで実行してみますと
このようにHStackのboxも表示できていることが確認できました。

しかし、これも実はbodyの {} 「中括弧」をプログラムが出るとこの変数は消えてしまいます。
どこでも使えるようにするにはこのファイルないの全ての {} 中括弧の外に書いてください。

試しに書いてみます。
ここに書きます。

var box = "ワトソン"
struct ContentView: View {

    var body: some View {
        VStack{
            Text("\(box)")
        }
        HStack{
            Text("\(box)")
        }
    }
}

　これで実行すると先ほどと同じですが、box 変数は「どこでも使える」グローバル変数となりました。おさらいですが、どこでも使えるというのがグローバル変数と呼び、反対にローカル変数は一部の範囲でしか使えません。

ここからは応用編ですので、理解する必要がありません。

TextFiledについては後日説明します。

★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())
    }
}

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

　はい、今回はVStack HStack ZStack (ブイスタック エイチスタック ゼットスタック)と変数のスコープについてということで、VStackは縦に表示するものでしたね、HStackは横に表示するものでした。
　変数のスコープというのは、変数には使える所と使えない所がありましたね。どこでも使えるのがグローバル変数と言い、一部で使えるのがローカル変数と言いました。次回の講座ではImageとButtonについての内容となります。是非ご覧ください。はい以上で、[iPhoneアプリ開発]中学生でもわかるSwiftUIを終了したいと思います。
　「ワトソン博士よかったよ〜〜」と思って下さった方は、グッドボタン、バッドボタンどちらでも構いません。
ぜひ押していただけると嬉しいです。コメントもお待ちしております。
※返信はできませんが動画投稿する上で励みになります。
　また、ワトソン博士での[iPhoneアプリ開発]中学生でもわかるSwiftUIの応用編はUdemyでご覧頂けます。決済システムの導入方法などを講座にしております。是非概要欄をご覧ください。それでは終わります。最後までご静聴頂きありがとうございました。

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

※個人の見解による意見でございます。参考程度にお願い致します。

2022年 1月10日 著作者 西村太智