読者です 読者をやめる 読者になる 読者になる

ベティーのブログ / 作曲、ボカロ、主に結月ゆかり

ベティーです。歌を作っています。Vocaloid、主に結月ゆかり。

変数とは?その2 - 実際に変数を使ってみよう

iPhoneアプリ開発

変数について、その2です。

前回は概念的な話でしたが、今回はXcodeで実際に変数を使ったアプリを動かしてみましょう。

まずはプロジェクトを作成してください。手順はこちらです。

swift-bettychang.hatenadiary.jp

プロジェクト名は適当でよいです。私は、「varTest」としました。

なお、「変数」は英語で「variable」というため、varと略されたりします。プログラムで使われる用語は英語なので、元の英語を把握すると意味がわかりやすいです。

 

ViewController.swiftを選択する

プロジェクトを新規作成したら、左のツリーでViewController.swiftを開いてください。

f:id:bettychang:20160110142001p:plain

右側にファイルの中身が表示されます。

すでにプログラムが書かれていますが、これが初期状態です。

ViewController.swiftはiPhoneやiPad画面に表示されるアプリ画面をコントロールするためのプログラム本体です。とりあえず、ここになにか書くと画面をいろいろと操作できるくらいのイメージでよいです。

 

では、変数を使ってみましょう。

変数を使ってアプリの画面に自分の名前を表示する

では、アプリに自分の名前を表示するというのを目標にやってみましょう。

画面イメージをお絵描きアプリで書いてみました。

f:id:bettychang:20160110143846p:plain

あまりにもひどいイメージですが、使っているお絵描きアプリにテキスト入力機能がないので許してください。

では、やってみましょう。その前に全体の作業の流れを確認しておきましょう。

  1. 変数を宣言する
  2. 変数に文字(自分の名前)を代入する
  3. ラベルを用意する
  4. ラベルから変数を参照する
  5. 実機で確認

 

1で変数を用意し、

2で変数に中身を入れます。

そして、3でアプリの画面に名前を表示するためのラベルを用意し、

4でラベルから変数を参照し、名前を表示します。

 

前回の内容を再確認していただけるとわかりやすいです。

swift-bettychang.hatenadiary.jp

 

変数を宣言する

変数を宣言するとは、変数を用意するということです。では、書いてみましょう。下記の場所にvar と書いてください。

var

f:id:bettychang:20160110145838p:plain

 そうすると、自動的にドロップダウンリストのようなものがでると思います。これはXcodeの補完機能です。プログラムに使う単語を全て覚えなくともXcodeが入力した文字から予想して候補を示してくれているわけです。varを選んでエンターを押しましょう。

varというのは、変数を宣言するためのきまり文句です。言語と同じように、プログラムにも文法があります。このばあいのvarは「変数を宣言します」というときに書くきまりです。varはvariable(変数)の略ですね。

続けます。

var name:String

f:id:bettychang:20160110150657p:plain・name

これは変数の名前です。なにごとも名前がないと呼ぶときに困りますので、変数にも名前をつけてやります。nameでも、namaeでもaaaaaでもNamaeWoIreruHensuuでもなんでもよいのですが、役割を想像させるものがよいです。

*変数名のつけ方には作業環境によっていろいろときまりがありますので、業務で使用する場合や複数人作業の場合は既存のルールに気を配ったほうがよいです。一人でアプリを作るケースなどは自分がわかりやすければ好きなようにつけてしまってもまったく問題ないです

 

・:String

これは変数の型を指定しています。変数名、コロン、型名、という順に並べて書くきまり(文法)です。Stringとは文字を表す型です。つまり「この変数には文字を入れるのに使います」いう意味です。そうするとXcodeがname変数を文字を入れるのに都合がよいようにセッティングしてくれます(私たちにはそのような作業はなにも見えませんが)。

これで変数が宣言(用意)できました。

 

変数に文字(自分の名前)を代入する

変数は用意できましたので、さっそく中身を入れましょう。入れる文字は自分の名前ですね。書き方はこちらです。

f:id:bettychang:20160110152713p:plain

name = "自分の名前"

 

このように書くと、変数nameに好きな文字を入れることができます。

f:id:bettychang:20160110154040p:plain

イコール記号がありますが、算数や数学でいうところのイコールとは意味が違います。

上記のように、このイコールは値を代入する、という意味に使用されます。

*算数的なイコールは==のように、イコール2こで表すきまりになっています

 

文法的な注意点として、イコールの前後には半角スペースを入れることです。

f:id:bettychang:20160110154029p:plain

これで変数に値を代入することができました。 

 

ラベルを用意する

では、文字を表示するためのラベルを用意しましょう。

ラベルはストーリーボードというGUIの設定画面から用意します。画面をストーリーボードに切り替えてください。

f:id:bettychang:20160110154555p:plain  

 ・左のツリーでMain.storyboardを選択する

 ・右下のパーツ群からLabelを選択して中央の画面にドラッグアンドドロップします。

 

ラベルの制約を下記のように設定します。

f:id:bettychang:20160110155039p:plain

・ラベルを選択した状態で

・|呂をクリック

・Horizontally in ContainerとVertically in Containerをチェックする

・Add 2 Constraintsを実行

 

これで画面中央にラベルを設定できました。

ラベルの設定方法についてはこちらにさらに詳しく記載していますのでご参照ください。

swift-bettychang.hatenadiary.jp

 

ラベルから変数を参照する

そのまえに、ストーリーボードで作成したラベルをプログラム内で操作できるように、アウトレットというものを設定します。

f:id:bettychang:20160110155737p:plain

  *option + command + enterでアシスタントエディターが開きます

画面左から2番目のViewController SceneツリーのLabelから下記の位置に右クリックして引っ張ってきます。

 

class ViewController: UIViewController {

  *****ここにドラッグする******

    override func viewDidLoad() {

 

すると下記の画面がでますので、ここではアウトレットの名前を設定します。nameLabelとしました。とにかくたびたび名前をつけることを求められますが、慣れてください。

f:id:bettychang:20160110160205p:plain

Connectをクリックします。

 

nameLabelというラベルのアウトレットがプログラムに設定できました。

f:id:bettychang:20160110160607p:plain

これでラベルをプログラムから操作することができます。

 *ここで注意点ですが、@IBOutlet weak〜などと長い文章が続いていて、端から一つ一つ意味を理解したくなるかもしれませんが、あまり気にしないほうがよいです。目に見えるもの全てを理解しながら進んでいくと、往々にして本来の目的である「アプリ作成」にまでたどり着けずに力尽きてしまいますので、極力無視して先に進み、慣れてきて余裕ができたときに覚えましょう

 

では、準備ができたので、ラベルから変数の値を参照してみましょう。

f:id:bettychang:20160110162309p:plain

 

nameLabel.text = name

参照、などと書きましたが、先ほどの変数に値を代入する方法と同じですね。細かく見ていきましょう。

  • nameLabel

これはラベルのアウトレットにつけた名前です。つまりラベルです。

  • .text

これはラベルが表示する文字を意味します。ドットを「の」と訳すとわかりやすいです。「ラベルのテキスト」です。

  •  = 

イコールは代入ですね。

  • name

 用意した変数名です。

 

意味は、「nameLabelのtextにnameを代入する」となります。

これでラベルに名前が入ったはずです。実機で確認してみましょう。

 

実機確認

ではiPhoneかiPadをMacに接続して、下記のように表示されたら再生ボタンを押しましょう。

f:id:bettychang:20160110163526p:plain

 

こちらが実行結果です。 

f:id:bettychang:20160110163621p:plain

うまく実行できましたでしょうか。次回ももう少し変数について触れようかと思っています。

以上です。ご覧いただきありがとうございました。