アプリを作ってみたいがどうすればいいか分からない。
そんな人のためにこんな感じでアプリ作るんだよ〜というのを解説します。
アプリ開発の壁を熟知したゴミプログラマーの僕が初心者の視点に立って分かりやすく解説することを心がけます。
今回は前回のコード編の続きということで、そろそろガチでコードを書きます。
いや、前回でコードを書こうと思ってたところ、下準備で予想以上に時間食ってしまったので、仕方ないんですね。
言い訳は置いといて、では早速やっていきましょう。
ボタンが押されるとラベルの文字が変わる
今回どういうものを作るかというと、ボタンが押されたらラベルの文字が変わるというプログラムを組んでみたいと思います。
簡単なプログラムでも実際にそれが動くのを見ると楽しいです。
その楽しさを味わって、プログラミングってこういうものなんだっていうのを是非体験してください。
それではまず前回からの続きということで、下の画像の赤枠の部分をクリックしてください。
そうすることで、コードとレイアウトで分割された画面が一つの画面に戻り、コード画面のみが表示されるようになります。
ではコードを書きます。
現在下の画像のように、画面には文字がちょろちょろ書かれていますが、testButtonActionと書かれたところにコードを書いていきます。
ここは確かボタンが押された時にどういうアクションをするかを指示できる場所でしたね。
今回やりたいことは「ボタンが押された時にラベルの文字を変える」ことなので、ここにはラベルの文字を変えるという動作を書いていくことになります。
ラベルは先ほどレイアウト画面から矢印で引っ張ってきた「testLabel」というのが画面の上側にあると思います。
現在このラベルには最初からLabelという文字が表示されているので、この文字をTestという文字に変えることにしましょう。
まぁ、ごちゃごちゃ言うだけじゃよく分からないと思うので、testButtonActionの中に以下のような感じでコードを書いてみてください。
@IBAction func testButtonAction(_ sender: Any) {
testLabel.text = "Test"
}
はい、これでプログラムの完成です。
え？これで終わり？と思うかもしれませんが、百聞は一見にしかず。
では試しにこのプログラムを実行してみましょう。
下の画像の赤枠部分をクリックして、iPhoneの画面を表示させます。
iPhoneの画面が表示されたら、画面中央にあるボタンを押してみてください。
するとどうですか？Labelと書かれていた文字がTestに変わったのではないでしょうか。
どうですか？なんか楽しくないですか？
ではコードを見てください。
@IBAction func testButtonAction(_ sender: Any) {
testLabel.text = "Test"
}
ここでやっているのはラベルの文字を変えるということですが、testLabelというラベルは様々な値を持ってます。
ラベルに表示される文字であったり、ラベル自体の大きさであったり、文字の色であったり。
例えばtestLabel.textと書くことで、ラベルの文字を指定することができます。
testLabel.textColorと書くと、文字の色を指定することができます。
そして上のコードで書かれている = というのは等しいという意味ではなく、プログラミングの世界では代入するという意味になります。
なので、
testLabel.text = "Test"
と書くことで、testLabelの文字（text）にTestという文字を入れることができるようになるのです。
iPhoneアプリのプログラミングはざっとこんな感じです。
こんなことを繰り返していきます。
「おぉ、思ってたよりカンタンじゃん！」とか、「うーん、ちょっとムズカシイなぁ」とか、色々な感想があるかと思います。
もし後者の場合でも、初めてやることは慣れていないことであり、よく分からないという印象を抱くのは当然のことです。
プログラミングだけに限らず、世の中の他のことをやる時も初めてやる時は大抵うまくいかないんじゃないでしょうか。
そんなもんです。僕もそうでしたから。
なので焦らず気長にいきましょう。
まずは動かしてみて、こんな感じなんだという感覚を掴むくらいでOKだと思います。
ボタンが押されるたびにラベルの文字を変える
さてコードの話に戻りますが、しかしこれだと2回目以降ボタンを押してもラベルの文字はTestのままです。
なのでボタンを押すたびに文字が変わるようプログラムを修正してみましょう。
コードを次のように修正してみてください。修正箇所としては、画面上側のtestLabelの上に「var flag = true」と追加。そして画面下側のtestButtonAction内を修正します。
import UIKit
class ViewController: UIViewController {
var flag = true
@IBOutlet weak var testLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
@IBAction func testButtonAction(_ sender: Any) {
if flag {
testLabel.text = "Test"
flag = false
} else {
testLabel.text = "Label"
flag = true
}
}
}上記のコードのように修正が終わったら、再びアプリを実行します。下の画像の赤枠部分を押すんでしたね。
iPhoneの画面が立ち上がったら、画面中央のボタンを押しまくってみましょう。
するとラベルの文字が、Label → Test → Label → Test → Label ……という風に切り変わり続けると思います。
少しずつアプリらしくなってきていますね。
では肝心のコードを見ていきたいと思います。
@IBAction func testButtonAction(_ sender: Any) {
if flag {
testLabel.text = "Test"
flag = false
} else {
testLabel.text = "Label"
flag = true
}
}まず書いたコードの最初の一行目に
if flag
とありますが、これは、「もしflagがtrueだったら、ifの下のカッコで囲まれた行
testLabel.text = "Test" flag = false
↑この行を実行する」
という意味です。
まずflagって何？と思うでしょうが、このflagというのは先ほどのコード修正で画面の上側に追加した
var flag = true
のことです。
ここでflagにtrueを代入しているので（= は代入という意味でしたね）、flagはtrueということになります。
なのでもう一度コードを見てみると、下のように一行目はflagがtrueになっているので、ifの下のカッコで囲まれた行が実行されます。
if flag {
testLabel.text = "Test"
flag = false
} else {
testLabel.text = "Label"
flag = true
}↓この行が実行されるんですね。
testLabel.text = "Test" flag = false
ちなみにflagがtrueでなければ、elseの下のカッコで囲まれた行が実行されます。
そしてこのifのカッコ内では以下の二つの処理が行われています。
・testLabelの文字をTestに変える
・flagにfalseを代入する
この二つ目の「flagにfalseを代入する」という処理があるおかげで、もう一度ボタンが押された時にラベルに別の文字を表示することができます。
どういうことかというと、今回flagにfalseを代入したので、次にボタンを押した時はflagがfalseの状態であり、flagはtrueではないので、
if flag {この行は無視されて、
} else {この行に処理が移ります。
なので、今回の場合はelseの下のカッコで囲まれた行が実行されます。
testLabel.text = "Label" flag = true
↑この行のことですね。
そしてtestLabelの文字をLabelに変えて、flagを再びtrueにしています。
こうすることで、再びボタンが押された時はflagがtrueになっているので、ifのカッコ内が実行されます。
testLabelの文字がTestに変わり、flagがfalseになります。
そして次はflagがfalseになっているのでtestLabelの文字がTestに変わり、flagがtrueになる……という感じでずっと文字が切り変わり続けます。
どうでしょうか、結構プログラミングらしいことをしてきたと思います。
プログラミングは、こんな感じで「もし〜だったら〜をする」という処理をよく使います。
この「もし〜だったら〜をする」というのは、上でたびたび出てきた if else という構文で表現します。
最初は慣れないと思いますが、プログラミングは一つ一つ丁寧に考えていくことが大事です。
そうやってコードを書いていくうちに脳みそがプログラミング脳になってきます。そうするとスラスラとコードを書けるようになります。
まとめ
以上4回にわたってiPhoneアプリのプログラミングはどういうものかというのを見てきました。
もしこの記事を読んで理解できなくても大丈夫です。
掛け算の九九なんて今じゃパッとできますが、最初の頃はひーこらひーこら覚えてたと思います。
でも不思議なものでいつかできるようになるんですね。
今回教えてきたことは棒高跳びで5m飛べ！とかいうようなレベルのものではなく、掛け算の九九のようなもので、誰でもいつかはできるレベルのものだと思います。
なのでもし興味が出てきた方は勉強すればアプリが作れるようになると思うので、ネットで色々調べたり、本屋に行ったりして学習を深めていってください。
何よりアプリが作れるようになると本業以外の収入にもできるという点は魅力的ですね。
ぜひアプリで一儲けしましょう。
最後はお金の話になりましたが、これで一旦入門解説を終えたいと思います。
見てくださった方はありがとうございましたmm
コメント