こんにちは！Apple信者のiOSエンジニアです。
この記事では「Xcode（エックスコード）」の初歩的な使い方を解説していきます。
Xcodeについて勉強をしてみたい方や、業務上の理由で早急にXcodeを触る必要に迫られている方には必見の記事です。
最後までお読みいただければ、実際にXcodeを動かして「Hello, Xcode!」を画面に出力できるようになります。ぜひ挑戦してみてください！
なおXcodeがなんなのかを詳しく知りたい方は、まずこちら「Xcode（エックスコード）とは？IDEとは？Apple信者の現役iOSエンジニアが徹底解説！」の記事からご覧ください。
用意するもの・作業環境
記事を参考にXcodeを触っていくにあたり、お手元に用意すべきものを下にまとめてみました。
①Mac
あまり古いものでなければiMacでもMac miniでもMacBookでも何でも大丈夫です。
Catalina,Big Sur,MontereyあたりのmacOSを積んでいるものなら、なおのことバッチリです。
②Apple ID
普段使っているAppleIDでも問題ないと思いますが、開発用として普段使いとは別にAppleIDを用意しておくと良いかもです
もし開発を始めたい方は、以下のものたちを用意してから読み進めていただければ幸いです。
ちなみに、本記事執筆時点での僕の環境は以下の通りです。
macOSのバージョンは11.4（Big Sur）、使用中のXcodeのバージョンは12.5になります。
お手元の環境とOSやソフトウェアのバージョンなどが異なると、Xcodeのデザインなど異なる部分があるかもしれませんが、基本的なボタンなどの位置やチュートリアルの作業手順は変わりません。
ですので、そこまで気にしなくて大丈夫ですよ。
Xcodeをダウンロードしてみよう
さて！ここからは実際にXcodeを触ってみましょう。
Macが手元に用意できている方は、よろしければ読み進めながらポチポチと作業してみてください。
まずは、Xcodeのダウンロードからです。
もしもうすでにXcodeをMacにインストールしている方は、この手順はスキップしてしまって大丈夫です。
アプリ開発を始めるんだと意気込むと、なんだか難しいことがたくさんありそうですよね。
しかしXcodeをダウンロードするのは、ほんとうに簡単。
iPhoneにApp Storeからアプリを落とすような感じで、Mac App Storeからダウンロードしましょう。
こうして検索すると、いちばん上に出てきます。
Xcode自体の容量が十数GBあるので、もしかするとダウンロード＆インストールに時間がかかるかもしれません。気長に待ちましょう。
なお初めてインストールをしたり、久しぶりにXcodeを立ち上げようしたりするとき、稀に「Install additional required components?」というメッセージダイアログが表示されることがあります。
これはXcodeに追加で必要なComponent（ツールや部品）のダウンロードを促すもの。
怪しいものではなく、むしろ追加のインストールが必要な場合に出るので、そのまま「Install」ボタンをタップしてください。
そのあとにMacにログインする際のパスワードを求められることもありますので、そちらも指示に従って入力しましょう。
Xcodeで開発者アカウントを登録しよう
Xcodeがダウンロードできたら、Xcodeで用いるアカウントを作成していきましょう。
このアカウントが、あなたの開発者アカウントになります。
まずはXcodeを開いて、下記画像を参考に「Xcode」→「Preferences…」を選択しましょう。
そして、下の画面のように「Accounts」を選択。
僕の場合はすでにアカウントが登録されているのでモザイク処理をしているのですが、初めての場合にはここは空っぽになっていて大丈夫です。安心して進めていきましょう。
できたら、左下の「+」ボタンをクリックしましょう。
そうしたら、このように追加するアカウントの種類を選択する画面が出てきますので、ここでは「Apple ID」を選択して、予め準備しておいたApple IDを登録しましょう。
Xcodeでアプリ（プロジェクト）を作ってみよう
アカウントまで設定できたら、いよいよプロジェクトを作っていきましょう。
このプロジェクトというのが、一つの単位になります。基本的に、1プロジェクト＝1つのアプリになります。
はじめに、上の画面で赤丸で囲っている「Create a new Xcode Project」をクリックしてみてください。
Xcodeで新しいプロジェクトを作る際には、ここをクリックして始めます。
そうすると、上のような画面になるはずです。
いろいろ選択できるアプリのテンプレートが出てきて、デフォルトでは左上の「App」が選択されていると思います。
今回はこの「App」のテンプレートを使用しますので、そのまま右下の「Next」をクリックしてください。
「Next」をタップすると、今度は上のようなApp情報を入力する画面が現れます。
画像でモザイクがかかっている部分には、先程あなたが登録したアカウントが入っているかと思います。
入力画面のいちばん上の「Product Name」欄に、あなたがこれから作るプロダクト名を入力します。
こちらは単語を大文字で区切ったアルファベットで入力するのが一般的です。大文字区切りというのは、「DigitalAppleFarm」「TestSample」「AppleStore」「MacBook」のような感じですね。
大文字区切りのアルファベットのことをアッパーキャメルケース（upper-camel-case）といいます。
「AppStore」「DigitalAppleFarm」のように、大文字がポコポコあってラクダのコブのように見えることから、キャメルという名前がつけられているわけです。
いっぽうで「iPhone」「iMac」「macOS」など先頭が小文字でそのあとが大文字区切りになる書き方のことを、ローワーキャメルケース（lower-camel-case）と呼びます。
プロジェクト名はデフォルトではそのままアプリ名になりますが、AppStoreやiPhoneに表示したいアプリ名はあとから改めて設定できます。
なので、ここであまり悩みすぎなくて大丈夫ですよ。
たとえば本を探すアプリを作るとなった場合。
プロダクト名は仮に「BookSearchApp」とかにしておいて、あとから「本検索アプリ」などと本当につけたいアプリ名をつけられるので安心してください。
ここでは仮に、プロダクト名を「DigitalAppleFarmSample」としてみました。
iOSアプリ開発をする際、「Storyboard」を使う方法と「SwiftUI」を使う方法とがあります。
今回は「Storyboard」を使う開発スタイルで作っていきたいので、「Interface」は「Storyboard」に、「Life Cycle」は「UIKit App Delegate」に、画像を参考に選択してください。
書いていく言語「Language」も上の画像のとおりに「Swift」に指定されていることを確認しましょう。
下のチェック項目について、「Use Core Data」はアプリにデータを保存する際にCore Dataという仕組みを使う場合に、「Include Tests」はテストツールをアプリに含める場合にチェックをつけます。今回はチュートリアルなので、チェックは画像のようにデフォルトのままで問題ありません。
できたら「Next」ボタンをタップしましょう。
そうすると以下の画像のように、Macのどのフォルダに保存するかを選択できる画面が表示されます。
「Create Git Repository on my Mac」のチェックは、バージョン管理ツールのGitを使うかどうかを選択するもの。
このチュートリアルでは使いませんので、チェックは入れても外してもどちらでも良いですよ。
任意の保存場所を選んだら、右下の「Create」をクリックしましょう！
上のような画面が表示されたら、おめでとうございます！
無事にあなただけのプロジェクトを作ることができました。これで準備はバッチリです。
Xcodeを開いてみよう
プロジェクトが無事に立ち上がった余韻に浸りつつ、早速ですが今回コードを書く画面を表示させてみましょう。
左側のファイル一覧から「ViewController.swift」をクリックして選択してみてください。
そうすると、真ん中にコードを書くエディタが表示されて、以下のような画面になるはずです。
またざっくりとですが、Xcodeの全景についてここで見ていきましょう。
大きく分けると、Xcodeは次の4つのエリアに分かれます。
①ナビゲーターエリア
ここはファイルの選択や、階層的にプロジェクト内のファイルの確認ができるエリアです。またその他にも、アプリが起動しているときのメモリの使用量や、ビルドエラーなどのWarning（警告）を一覧で確認できます。
②エディタエリア
ここはコードを書いたり、Storyboardを使ってアプリを組み立てたり、アプリバージョンの指定やビルド設定が行えるエリアです。今回のチュートリアルでは、このエディタエリアを使ってコードを記述していきます。
③デバッグエリア
ここでは、アプリが動いている際のログ（記録）を確認したり、必要な文字列やデータを表示させることができます。今回のチュートリアルでは、このデバッグエリアに「Hello, Xcode!」と表示させていきますよ。
④ユーティリティエリア
このエリアは、UI部品の色や形を設定したり、コードとUI部品を紐付けたりしていきます。今回は使いませんが、自分で画面を追加したりするときに必要になるので、そんなものもあるのかぁくらいの感じでなんとなく覚えておきましょう。
Xcodeでコードを書いてみよう
できたらいよいよコードを書いていきましょう。
Xcodeを初めて触る方には、これが記念すべき初のコードです。おめでとうございます！
先程開いていただいたViewController.swiftのエディタには、デフォルトで下のようなコードが書かれていると思います。
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
}そのコードの中に、
print("Hello, Xcode!")というコードを書き足してみてください。
正しく書き足すと、以下のようになります。
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
print("Hello, Xcode!")
}
}このprint(“Hello, Xcode!”)というコードを正しい位置に書き足せたでしょうか？
これで、Xcodeのコンソールに「Hello, Xcode!」を表示させる準備が整いました！
ちなみにここで深くは触れませんが、このprint（”好きな文字列”）という記述は、Xcodeのコンソールに文字列を出力させるための書き方です。
print関数と呼ばれるもので、ソースコードを書きながら処理の状態を目で確認したいときなどに用いられる書き方ですね。
ビルド（Run）してみよう
それでは、ビルドするためにまず任意のシミュレーターを選んでみましょう。
下の画像を参考に、ターゲットデバイスのボタンをクリックしてみてください。
そうすると、プルダウンで様々なデバイスが出てくると思います。
今回はiPhoneであればどれでも構いませんので、思い入れのあるiPhoneだったり、歴代のシリーズの中で好きなiPhoneだったりを選んでみてください。
シミュレーターとは、仮想デバイスのこと。
Mac上でiPhoneを動かせるという、夢のようなツールです。
電話をしたりAppStoreからアプリをダウンロードしたりはできませんが、自分が作っているアプリがiPhoneでどのように動くのかを手っ取り早く確認できるのが、このシミュレーターなんです。
シミュレーターを選べたら、上の画像の矢印で示している再生ボタン（Runボタン）をクリックしてみましょう。
問題なければあなたが書いたコードがコンパイルされて、うまくいけば上のような「Build Succeeded」というダイアログが表示されるはずです。
そして少し待つと、先程選んでもらった「シミュレーター」が立ち上がります。
上の画像のような感じですね。今回は画面描画の処理は行っていないため、画面は真っ白の状態で立ち上がります。
では、本当に目的が達成できたかどうかを確認してみましょう。
デバッグエリアを確認して、下の画像のように「Hello, Xcode!」が出力されていれば成功です。
おめでとうございます！
もしもビルド成功したけどデバッグエリアが表示されてないよという方は、デバッグエリアが非表示になっている可能性があるので、下の画像で示しているボタンを押してみてください。
これが、デバッグエリアの表示/非表示の切り替えボタンになります。
また「command」+「shift」+「Y」 のショートカットでも、デバッグエリアの表示切り替えが可能です。
またデバッグエリアはあるけど何も表示されずに真っ白だよという方は、デバッグエリアの右側が表示されていない可能性があります。
その場合には、下の画像で矢印で示した部分（ゴミ箱アイコンの隣りにあるボタン）を押して確認してみてください。
ここで、デバッグエリアの左右の表示切り替えのオンオフができますよ。
以上で、Xcodeを使ってコンソールに「Hello, Xcode!」を表示させるチュートリアルは終了です。
大変お疲れ様でした！
さいごに
今回の記事では、コンソールに「Hello, Xcode!」を出力するまでをご紹介してきました。
内容としては難しいものではないかもしれませんが、実際に自分の書いたコードがAppleのプラットフォームの中で動く様子は、本当にワクワクしますよね。
今回はXcodeの簡単な使い方をご紹介してきましたが、次はもっと実際のアプリ開発に近い様子をお伝えできればと思います。
少しでも楽しいと感じられた方は、ぜひ他の記事にも挑戦していただければ幸いです。
最後までお読みいただき、ありがとうございました！