第1回 [iPhoneアプリ開発] 中学生でもわかるSwiftUI 入門 Textと変数について

★中学生でもわかるSwiftUI入門 Textと変数について

 本講座からはプログラムを触れたことがない方でもiPhoneアプリを作成できるところまでを解説したいと思います。今回はText(テキスト)と変数について説明します。
 説明する時に実際の動作を見た方が良いと思いますので、iPhoneアプリを開発に必要なXcode(エックスコード)という、統合開発環境環境(トウゴウカイハツカンキョウ)を使って、実際に使用しながら説明したいとおもいます。まずはXcode(エックスコード)を立ち上げましょう。Xcode(エックスコード)アプリがない方はApp Store(アップストア)からApp Store(アップストア)のアイコンに金槌(カナヅチ)がついたものをインストールしてください。

★Xcodeの立ち上げ

それではXcode(エックスコード)をクリックしてください。
そうしましたらこちらのCreate a new Xcode project(クリエイト ア ニュウ エックスコード プロジェクト)をクリックしてください。

そうしましたらこちらの App(アップ)が選択された状態でNext(ネクスト)をクリックしてください。

Project Name(プロジェクトネーム)にはご自身のアプリ名をご記入ください。
ここでは試しにwatsoncamp(ワトソンキャンプ)というアプリ名にします。
Team(チーム)にはご自身のAppleID(アップルアイディー)を選択ください。
Organizaition Identifirer(オーガナイゼーション アイデンティファイア)は、制作するアプリのIDとなるものになります。
ですので、ご自身のアプリだと認識できるようにしましょう。
ここでは試しにwatsoncamp_Beginners(ワトソンキャンプ ビギナーズ)というIDにします。
Inaterfase(インターフェイス)にはSwiftUI(スフィフト ユーアイ)を選択してください。
Life Cycle(ライフ サークル)にはSwiftUI App(スフィフト アップ)を選択してください。
Language(ランゲッジ)にはSwift(スフィフト)を選択してください。
ここまで完了したらNext(ネクスト)ボタンを押下します。


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


しばらくするとシュミュレータのiPhoneが立ち上がり「Hello world」(ハロー ワールド)と表示されていることが確認できます。このシュミュレータを動かして確認することを、プログラムの世界では「実行(ジッコウ)」と呼びます。
シュミュレータのiPhone機種は実行ボタンの右横にあるApp Store(アップ ストア)のアイコンをクリックしますと変更できます。



Xcodeについて簡単に説明すると、左側にあるファイルが管理されているところがナビゲータエリアで、
上側がツールバー、右側がユーティリティーエリア、真ん中のプログラムが書かれているところがエディターエリアと呼びます。

★Textについて

 次にText(テキスト)というものを使ってみたいと思います。まずは、ナビゲータエリアにあるContentView.swift(コンテントビュー スフィフト)ファイルをクリックしてください。実は先ほどのシュミュレーションで表示されている、この「Hello world」というのはContentView.swift(コンテントビュー スフィフト)ファイルにあるText(“Hello world”)を表示しています。それ以外のプログラムは徐々に説明していきますので、今は無視してください。
 では、実際にTextの中身を変更して実行したいと思います。試しにText(“WatsonCampへようこそ”)  に変更して実行してみます。このように「WatsonCampへようこそ」が表示できていることが確認できました。どう言うことかと言いますと。このTextというのは、カッコの中に書かれている言葉をiPhoneに表示してくださいと言う命令のプログラムです。コンピューターさんに「WatsonCampへようこそ」を表示してくだいと命令しているのです。ですので、このようにiPhone画面に表示されました。

ただ注意点として、表示したい言葉にはカッコ内で必ず「ダブルクォーテーション」もしくは「シングルクォーテーション」で囲む必要があります。

ちなみに、このダブルクォーテーションで囲んだ文字を、プログラムの世界では文字列と呼びます。今は成功したプログラムを書きましたが、試しにダブルクォーテーションなしで書いてみます。

これで実行してみます。

このようにエラーが発生します。このエラーというのは、プログラムが間違っているで、プログラムを実行することができませんと言う意味です。
やはり、ダブルクォーテーションがない場合はコンピュータさんは表示してくれないことが確認できました。

ですので、もう一度ダブルクォーテーションを書いて出力して見ます。

★変数について

 次に変数というものを使ってみたいと思います。変数とは、値を一時的に保管できる「箱」のようなものだとイメージしてください。実際にプログラムを書いてみます。このように書きます。

var box = "こんにちは"

 それでは、順番に説明していきます。この先頭のvar(バー)というのは変数の型というものです。swift言語での変数の型は、基本的にはvar(バー)かlet(レット)しかありません。イメージとしては、変数の箱に鍵をするのか、しないのか、を設定するものです。どいうことかと言うと、var(バー)は変数の箱に鍵をしません。ですので 変数の箱を何回も利用できます。
しかし、反対にlet(レット)は変数の箱に鍵をします。ですので、変数の箱には1度しか入れることができません。
今回は「var」ですので箱の鍵が常に開いてる状態になります。
 2番目のboxが変数になりして、箱になります。ここでは例えとして「box」という変数名にしていますが、変数名に関しましては何を書いても大丈夫です。
 3番目の「=」イコールですが、ここはすごく重要です。「=」イコールというのは数学的には、右辺と左辺が同じと言う意味ですが、プログラムでは右辺を左辺に代入するという意味があります。はい、もう一度おさらいしますと

こちらが変数の型で、変数の箱の鍵が常に開いているというイメージでしたね。
で、これが変数、箱になります。


で、イコールは「右辺を左辺に代入する」ですので、
「こんにちは」を「box」という箱に代入するという形になります。

●●●たいち担当)「=」を指す

はい、ですので、今 「box」には「こんにちは」が入っていると思われます。

ここで、本当に変数に値が入っているかを確認するため、先ほど使用したTextで確認しようと思います。

boxは変数ですので、Textで変数の中身を表示したい時はこのように書きます。

Text(“\(box)”)    (テキスト カッコ ダブルクォーテーション スラッシュ ボックス)

この「\」スラッシュはキーボードの「 option(オプション)ボタン + ¥(エンマーク)ボタン」を同時に押下すると入力できます。


これで実行して見ますと
はい、こんにちはと表示されました。

どういうことかと言いますと、プログラムは上から下に向かって走りますので
boxには「こんにちは」が代入されます。そして次にTextがboxを表示させますが、box変数の中身は「こんにちは」が入っているので
シュミュレータには「こんにちは」が表示されました。

★最後に

・1つ目にプログラムの基本原則ですが、必ず半角英数で書いてくだい。
・2つ目にコンピュータさんは賢いですので、大文字小文字を的確に判断します。
ですので、今回もダブルクォーテーションがないと注意されています。
・3つ目にプログラムは世界各国共通ですので教科書通りに書いてください。

★終わり

はい、今回はTextと変数についてということで、TextはiPhoneアプリ画面に文字を表示できるものでした。変数の概念の、値を一時的に保持することから、実際に変数に値を入れて表示まで行いました。次回の講座ではVStack HStack ZStackについての内容となります。是非ご覧ください。はい以上で、[iPhoneアプリ開発]中学生でもわかるSwiftUIを終了したいと思います。
 「ワトソン博士よかったよ〜〜」と思って下さった方は、グッドボタン、バッドボタンどちらでも構いません。
ぜひ押していただけると嬉しいです。コメントもお待ちしております。
※返信はできませんが動画投稿する上で励みになります。
 また、ワトソン博士での[iPhoneアプリ開発]中学生でもわかるSwiftUIの応用編はUdemyでご覧頂けます。
決済システムの導入方法などを講座にしております。是非概要欄をご覧ください。それでは終わります。最後までご静聴頂きありがとうございました。

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

最近の記事

  • 関連記事
  • おすすめ記事
  • 特集記事

コメント

この記事へのコメントはありません。

CAPTCHA


PAGE TOP