【徹底解説】Swift初心者のためのXcodeの使い方〜プログラム編〜

お疲れ様です,Hirokiです!

前回の

【徹底解説】Swift初心者のためのXcodeの使い方〜導入・機能紹介〜

は,見て実践していただけたでしょうか?

まだ,見ていないと言う方は

↓こちら↓

是非,試してみてください.

導入・機能紹介編と,このプログラム編

書いた通りに実行することで,Swift言語での

簡単なプログラミング体験が出来ます.

それでは,まず簡単にプログラミングとは何なのか?

ということについて,ざっと説明していきます.

そもそもプログラミングって?

プログラミングをしたことがない人にとっては

そもそもプログラミングって何?

と思いますよね.

私は,プログラミング教育のワークショップの

メンターとしての経験があります.

そこで,プログラミングについて説明するときは

私たちが日本語で会話しているように,パソコンや機械と会話するための言葉

と説明しています.

生活のいたるところで,プログラミングは

使われていて,今日あなたが使ったスマホアプリも

今回使っていくプログラミング言語のSwiftで

作ることが出来ます.

それでは,あなたも最初の大きな一歩を

踏み出してみましょう.

Xcodeを使ってみよう①

前回の続きから説明します.

①Main.storyboardをクリックしてください

そうすると,このようなiPhoneが映った画面が

出てきます.

基本的には,ここでアプリのUI(見栄え)

設定します.

デザインが良くないと使われないため,実際に開発を

する際には,しっかりと考えてUIを作成しましょう.

それでは,次にいきます.

①画像のオレンジで囲まれたマークをクリックしてください.

すると下に,様々なマークが出てきました.

これはXcodeが用意してくれているボタンなどのアプリを

作る上で必要なツールです.

私たちはこれをドラッグ&ドロップするだけで,使うことができます.

早速,ボタンなどを配置しましょう.


①Buttonを上の四角の位置に配置してください

②Labelを下の四角の位置に配置してください.

今回は,[ Button ]と[ Label ]の2つを使っていきます.

Xcodeでは実際のUIや動作などを実機に転送せずに,

パソコン上にある,シミュレーターで確認できます.

ここで一旦,

①Xcode画面上の再生ボタン[ ▶︎ ]をクリックしてください.

このように,実機が出てきたら成功です.

先ほど設置した,[ Label ]と[ Button ]が画面上に表示されましたね?

確認できたら,[ ◼️]を押して停止してください.

ここまでで一区切りで,実際にここからコードを

書いていきます.

Xcodeを使ってみよう②

さて,ここからはSwiftのコードを書いていきます.

その前にまず,コードを書く準備をしましょう.

①四角で囲まれたところをクリックしてください.

すると2画面表示になりました.

このボタンを押すとXcodeが自動的に,そのTableViewに合った

ViewControllerを表示してくれます.

[ Button ]上で,キーボードの[ control ]キーを押したまま,右画面の四角で囲まれた付近にドラッグ&ドロップしてください

そうすると吹き出しが,出てきたと思います.

その吹き出しには,次のように設定してください.

Connection : Action

Object : ViewController

Name : buttonAction

Type : Any

Touch Up Inside

Sender

設定がし終わったら,[ Connect ]をクリックしてください.

すると,[ Button ]とのコードが紐づけられました.

同様に,[ Label ]も同じように紐づけてください.

設定内容は以下のようにしてください.

Connection : Outlet

Object : ViewController

Name : labelText

Type : UILabel

Weak

そうすると,下の画像の四角で囲まれた箇所と同じコードが

入力されたと思います.

Xcodeでは,このように使うパーツ1つ1つをViewControllerに紐づけなければなりません.

理由は最後に説明した方が納得できると思うので,このまま作業を続けてください.

次に,

①@IBAction func buttonAction(_ sender: Any) {

➡︎ここに⬅︎

} 

labelText.text = "Hello World!"

と入力してください

@IBAction func buttonAction は「ボタンをタップした時の動きを命令する言葉」と,ここでは理解しておいてください.

①オレンジの四角で囲まれた[ ▶︎ ]をクリックしてください.

②シミュレータ上の[ Button ]をクリックしてください.

③[ Button ]をクリックした時に[ Label ]の文字が,変わったことを確認してください.

[ Button ]をクリックすると,[ Label ]の文字が変わりましたね?

そしたら成功です!

しかし,[ Label ]の幅が短すぎて[ Hello World! ]が綺麗に表示できていません.

そこで,今から幅や文字の大きさを変えてみましょう.

①[ Button ]をクリックして,テキストを[ Swiftの世界へようこそ! ]

フォントサイズを20.0にしてください.

パーツの幅や,文字の大きさは画面右側のユーティリティエリアから変更することができます.

①[ Label ]の角を引っ張って表示範囲を拡大してください.

②また,文字の大きさも好きな大きさにいじってみましょう.

上の画像のように拡大できましたか?

文字の大きさの変更は,先ほどと同様に右側のユーティリティエリアから行ってください.

ここまでできたら,いよいよシミュレータで実行してみましょう.

①オレンジの四角で囲まれた[ ▶︎ ]をクリックしてください.

②ボタン[ Swiftの世界へようこそ! ]をクリックしてください.

そうすると,綺麗に[ Hello World! ]が表示されたと思います.

ここまでで,「Swift初心者のためのXcodeの使い方〜プログラム編〜」は終了です.

まとめ

やってみてどうでしたか?

プログラミング完全初心者の方でも

意外と簡単だった!

と思うのがほとんどだと思います.

この「Swift初心者のためのXcodeの使い方〜プログラム編〜」を

終えたあなたは,プログラミングへの大きな最初の一歩を踏み出しました.

これを機に,ぜひどんどん学習を進めていって欲しいと思います.

この勢いのまま次のステップに足を踏み入れてみましょう.

ふわっち

STEP1

◇Progateに登録しましょう.

Progateは初心者に最適なプログラミング学習サービスです.

スライド形式で簡単に実際に,作りながら学習ができます.

私の中のおすすめの学習サービスの1つです.

STEP2

◇こちらの記事を読んでみましょう.

この記事には,私が1ヶ月半でオリジナルアプリを開発した方法が

書かれています.

ぜひ,これを読んで参考にしてみてください.

______________________

それでは,ここまで読んでいただきありがとうございました.

また,次回お会いしましょう.

Twitterでフォローしよう

おすすめの記事