![【徹底解説】Swift初心者のためのXcodeの使い方〜プログラム編〜](https://h-technology.jp/private/wp-content/uploads/2019/06/21f2d85a25dd6928a82e2513aa0fe991-1.jpeg)
お疲れ様です,Hirokiです!
前回の
【徹底解説】Swift初心者のためのXcodeの使い方〜導入・機能紹介〜
は,見て実践していただけたでしょうか?
まだ,見ていないと言う方は
↓こちら↓
是非,試してみてください.
導入・機能紹介編と,このプログラム編を
書いた通りに実行することで,Swift言語での
簡単なプログラミング体験が出来ます.
それでは,まず簡単にプログラミングとは何なのか?
ということについて,ざっと説明していきます.
目次
そもそもプログラミングって?
プログラミングをしたことがない人にとっては
「そもそもプログラミングって何?」
と思いますよね.
私は,プログラミング教育のワークショップの
メンターとしての経験があります.
そこで,プログラミングについて説明するときは
「私たちが日本語で会話しているように,パソコンや機械と会話するための言葉」
と説明しています.
生活のいたるところで,プログラミングは
使われていて,今日あなたが使ったスマホアプリも
今回使っていくプログラミング言語のSwiftで
作ることが出来ます.
それでは,あなたも最初の大きな一歩を
踏み出してみましょう.
Xcodeを使ってみよう①
前回の続きから説明します.
![](https://h-technology.jp/wp-content/uploads/2019/05/6785e0336c5ce7c3571ca1cf88abfb95-1024x768.jpeg)
①Main.storyboardをクリックしてください
そうすると,このようなiPhoneが映った画面が
出てきます.
基本的には,ここでアプリのUI(見栄え)を
設定します.
デザインが良くないと使われないため,実際に開発を
する際には,しっかりと考えてUIを作成しましょう.
それでは,次にいきます.
![](https://h-technology.jp/wp-content/uploads/2019/05/fd653111cb341513bcc6a2879bebafb7-1024x768.jpeg)
①画像のオレンジで囲まれたマークをクリックしてください.
すると下に,様々なマークが出てきました.
これはXcodeが用意してくれているボタンなどのアプリを
作る上で必要なツールです.
私たちはこれをドラッグ&ドロップするだけで,使うことができます.
早速,ボタンなどを配置しましょう.
![](https://h-technology.jp/wp-content/uploads/2019/05/8ae83397df7cf940cbcb37dfb4f2cc0a-3-1024x768.jpeg)
①Buttonを上の四角の位置に配置してください
②Labelを下の四角の位置に配置してください.
今回は,[ Button ]と[ Label ]の2つを使っていきます.
Xcodeでは実際のUIや動作などを実機に転送せずに,
パソコン上にある,シミュレーターで確認できます.
ここで一旦,
①Xcode画面上の再生ボタン[ ▶︎ ]をクリックしてください.
![](https://h-technology.jp/wp-content/uploads/2019/05/56c8d96ab9ee8ed6d0f7fef8824c6e3e-1024x768.jpeg)
このように,実機が出てきたら成功です.
先ほど設置した,[ Label ]と[ Button ]が画面上に表示されましたね?
確認できたら,[ ◼️]を押して停止してください.
ここまでで一区切りで,実際にここからコードを
書いていきます.
Xcodeを使ってみよう②
さて,ここからはSwiftのコードを書いていきます.
その前にまず,コードを書く準備をしましょう.
![](https://h-technology.jp/wp-content/uploads/2019/05/85e9b79f44de9a74d37ff559bb108952-1024x768.jpeg)
①四角で囲まれたところをクリックしてください.
すると2画面表示になりました.
このボタンを押すとXcodeが自動的に,そのTableViewに合った
ViewControllerを表示してくれます.
![](https://h-technology.jp/wp-content/uploads/2019/05/d1a20c36960c3205a106cb6b0b36f1cb-1024x768.jpeg)
そうすると吹き出しが,出てきたと思います.
その吹き出しには,次のように設定してください.
Connection : Action
Object : ViewController
Name : buttonAction
Type : Any
Touch Up Inside
Sender
設定がし終わったら,[ Connect ]をクリックしてください.
すると,[ Button ]とのコードが紐づけられました.
同様に,[ Label ]も同じように紐づけてください.
設定内容は以下のようにしてください.
Connection : Outlet
Object : ViewController
Name : labelText
Type : UILabel
Weak
そうすると,下の画像の四角で囲まれた箇所と同じコードが
入力されたと思います.
![](https://h-technology.jp/wp-content/uploads/2019/05/d174c2a2833750d87e69861b8efaee62-1024x768.jpeg)
Xcodeでは,このように使うパーツ1つ1つをViewControllerに紐づけなければなりません.
理由は最後に説明した方が納得できると思うので,このまま作業を続けてください.
次に,
![](https://h-technology.jp/wp-content/uploads/2019/05/fb6089f6638674b50f640089348afe3f-1024x768.jpeg)
①@IBAction func buttonAction(_ sender: Any) {
➡︎ここに⬅︎
}
labelText.text = "Hello World!"
と入力してください
@IBAction func buttonAction は「ボタンをタップした時の動きを命令する言葉」と,ここでは理解しておいてください.
![](https://h-technology.jp/wp-content/uploads/2019/06/8233eecba81e37d8ae3ed54c51932cfc-1024x768.jpeg)
①オレンジの四角で囲まれた[ ▶︎ ]をクリックしてください.
②シミュレータ上の[ Button ]をクリックしてください.
③[ Button ]をクリックした時に[ Label ]の文字が,変わったことを確認してください.
そしたら成功です!
しかし,[ Label ]の幅が短すぎて[ Hello World! ]が綺麗に表示できていません.
そこで,今から幅や文字の大きさを変えてみましょう.
![](https://h-technology.jp/wp-content/uploads/2019/06/e0aab84e906a354efd3dd93389b7cdcc-1-1024x768.jpeg)
①[ Button ]をクリックして,テキストを[ Swiftの世界へようこそ! ]
フォントサイズを20.0にしてください.
パーツの幅や,文字の大きさは画面右側のユーティリティエリアから変更することができます.
![](https://h-technology.jp/wp-content/uploads/2019/06/b27fd90a724047f00965dbffe9b021e2-1024x768.jpeg)
①[ Label ]の角を引っ張って表示範囲を拡大してください.
②また,文字の大きさも好きな大きさにいじってみましょう.
上の画像のように拡大できましたか?
文字の大きさの変更は,先ほどと同様に右側のユーティリティエリアから行ってください.
ここまでできたら,いよいよシミュレータで実行してみましょう.
![](https://h-technology.jp/wp-content/uploads/2019/06/a8ea405bfa2b5fe3bc467b3af2797ed0-1024x768.jpeg)
①オレンジの四角で囲まれた[ ▶︎ ]をクリックしてください.
②ボタン[ Swiftの世界へようこそ! ]をクリックしてください.
そうすると,綺麗に[ Hello World! ]が表示されたと思います.
ここまでで,「Swift初心者のためのXcodeの使い方〜プログラム編〜」は終了です.
まとめ
やってみてどうでしたか?
プログラミング完全初心者の方でも
意外と簡単だった!
と思うのがほとんどだと思います.
この「Swift初心者のためのXcodeの使い方〜プログラム編〜」を
終えたあなたは,プログラミングへの大きな最初の一歩を踏み出しました.
これを機に,ぜひどんどん学習を進めていって欲しいと思います.
この勢いのまま次のステップに足を踏み入れてみましょう.
![ふわっち](https://www.afi-b.com/upload_image/10970-1563152243-3.jpg)
STEP1
◇Progateに登録しましょう.
Progateは初心者に最適なプログラミング学習サービスです.
スライド形式で簡単に実際に,作りながら学習ができます.
私の中のおすすめの学習サービスの1つです.
STEP2
◇こちらの記事を読んでみましょう.
この記事には,私が1ヶ月半でオリジナルアプリを開発した方法が
書かれています.
ぜひ,これを読んで参考にしてみてください.
______________________
それでは,ここまで読んでいただきありがとうございました.
また,次回お会いしましょう.