Swift初心者が簡易的なログイン画面を作ってみた！
目次
1. 自己紹介
2. UIの設置
3. プログラムを書く
4. シュミレーターで動かす
1. 自己紹介
こんにちは！１回目のブログという事もあり、しっかり自己紹介しようと思います！
僕は最近、Swiftを触り始めた、平凡な大学生です。
Swiftを始めた理由としては、使っているPCがMacBookということが第一にあります。他には、Xcodeを用いて、UIを仮想のiPhoneの上に設置し、プログラムを組んでいくシンプルな操作でアプリを作れるというところに惹かれました。まだまだ初心者ですので、知らない事もたくさんです！ここでアウトプットして、あなたと情報を共有したいと思っています。
Swiftの他にも、JavaやC++なども少し触っているので、何かアウトプットするものがあれば、書いていきたいと思います。
2. UIの設置
まずは、プロジェクトを作成し、Xcode上のiPhoneにUIを設置していこうと思います。
完成図をみてから、画面ごとのUI設置を書いていこうと思います。
2.1 完成図
上記の写真が僕が作った簡易ログイン画面の図である。全3画面を用いており、最初の画面が「画面１」です。初めてのログインの人は１で何を打ち込んでも、ログインすることはできません。なので、「初めてログインの方」から「画面3」に行き、登録をする。そして、「完了」を押すと、ユーザーのデータが登録され、１に戻る。再び、１で登録した、ユーザー名、パスワードを入力し、「ログイン」すれば、「画面２」に遷移するようにしました。
2.2 画面1のUI設置
最初に、使いたい画像を「Assets.xcassets」に入れます。
次に、「Main.storyboard」で既に用意されているView ControllerにImage View を全部覆うように貼ります。
そこに、好きな画像を設定します。右の欄のimageから好きな画像が選べます。さらに、Image Viewの上からボカシを入れるために、Visual Effect View with Blurを全体に被せます。これだけでボカシが入ることに驚きました。
では、テキストボックスなどの部品を設置していこうと思います！必要なのは、ImageViewを1つ、TextFieldを2つ、Buttonを2つ、ログイン失敗時に注意のテキストを出すLabelを1つです。
ログイン失敗時に出すLabelは文字を入れていないので、一見、見えないですが、パスを書くTextFieldの下にあります。
設置はできましたが、作成者以外の人が見たときには、TextFieldに何を書けば良いのか、Buttonはどういうボタンなのか分からないので、分かるように記入していきます。
ボタンは簡単に記入できますが、TextFieldには、文字を書くわけにはいかないので、それをせずにユーザーに何を記入するのか伝えるため、「Placeholder」に情報を打ち込みます。これをすると、薄く情報が記入されて、何を記入するのか分かるようになると思います。
画面１は以上で完成となります！
2.3 画面２のUI設置
この画面はログイン成功時に遷移する画面なので、使っているのはLabelを1つだけです。
2.4 画面３のUI設置
画面3のUIは画面１と同じような形にしました。
ボカシを入れた画像上に、Labelを5つ（1つは条件を満たさない時に表示する何も書かれていないもの）と、TextFieldを3つ、Buttonを２つ用意します。
画面２はこれだけです。特にTextFieldの中で薄い文字で伝えなくても分かると思うので、書かなくて大丈夫だと思いました。
3. プログラムを書く
この簡易ログイン画面の作成では、「ViewController.swift」と「nextViewController.swift」の二つで作成しました。
3.1 ViewController.swiftのプログラム
まずは、画面の部品とプログラムをつなげました。
あと、登録されたユーザー名、パスワードを入れる配列、ログイン時に必要となるフラグを宣言しました。
「初めての方へ」ボタンを押した時は、単に、画面遷移するようにしました。
重要なログインのボタンを押した時の処理を下記の画像に載せました。userInfoとpassInfoには、画面３で保存されたユーザー名とパスワードが入っているので、画面１で記入したユーザー名、パスワードとfor文で照らし合わせて、一致すれば、loginphotoの画像を変え、画面２に遷移するようにしました。
3.2 nextViewController.swiftのプログラム
まずは、画面の部品とプログラムの接続から行きます。
「Back」ボタンは画面を戻るだけなので、省略しています。
「完了」ボタンを押すと、まず、ユーザー名、パスワード、確認用パスワードが全て入力されているかを調べ、入力されていれば、次は、パスワードと確認用パスワードが一致しているかの確認をする。全て条件を満たせば、作成したプロトコルを用いて、画面１にデータを送る。
4. シュミレーターで動かす
完成したので、iPhoneXRで動かしてみます！
ログイン画面で登録もしていないユーザー名、パスワードを打っても、入れません。
そこで、まずは、ユーザー登録を行います。
これで、ユーザー名「a」、パスワード「a」が登録されたはずなので、もう一度、ログイン画面に戻って、入力してみます。
ログインに成功しました！これで、完成です！！
今回は、Swiftを少し学んで、画面間でのデータの交換や簡単なforやifを使ってログイン画面を作成してみました！まだまだ、勉強不足なので、どんどんインプット、アウトプットをしていきたいと思います！
