この記事では、iOS開発に欠かせないツール「Xcode(エックスコード)」について解説していきます。
Xcodeとは、iOSアプリを作る際に欠かせないツールのこと。
そんなXcodeについて詳しく知りたい方に向けて、現役でiOSエンジニアとしてお仕事をさせてもらっている僕が細かくご紹介していきます。
Xcode(エックスコード)とは
Xcode(エックスコード)とは、Appleが開発したIDE(統合開発環境)のこと。
さらに平たく言えば、Appleのプラットフォーム(iOS, iPadOS, macOS, watchOS, tvOS)の上で動くソフトウェアを作るためのMacアプリです。
Mac OS X (v10.3)がリリースされた2003年に、初めて登場しました。
Xcodeは、ネイティブiOSアプリケーションを開発する際に使われるSwiftやObjective-Cという言語に対応しています。
またその他にも、C言語やC++、JavaやAppleScriptを記述し開発を行うことが可能です。ちなみに最後のAppleScriptとは、Macでショートカットを作成する際などに使われる言語のことです。
なおXcode登場以前にMac OS Xで開発を行う場合には、Project BuilderというIDEが使われていたようですね。
つまり、Xcodeは前身のProject Builderの技術の粋を用いて、さらに発展させたものといえるでしょう。
IDEとは?
IDE(統合開発環境)というのは、ひとことで言うとアプリを作るためのソフトウェアです。
「Integrated Development Environment」の略ですね。
「ソースコードを書いたり、アプリケーションをビルド(=組み立てる)したり、アプリケーションが動く上でバグがないかチェックしたりする機能がまとめて入っているツール」のことをIDEと言います。
なおIDEは、Xcodeの他にもいろいろあります。
有名なものではAndroidアプリを作るためのAndroid Studio(アンドロイド・スタジオ)、Javaプログラマーの中で人気の高いIntelliJ IDEA(インテリジェイ・アイデア)などが有名どころでしょうか。
エディタとIDEの違いは?
ソースコードを書く際に使われる似たツールとして、サクラエディタや秀丸などの「エディタ」と呼ばれるものが使われることもあります。
プログラミングといえば、これらのエディタツールを思い浮かべる方も少なくないでしょう。
ただiOSアプリ開発においては、シンプルなエディタが積極的に使われることはあまりありません。
たしかにエディタはソースコードの入力をよりわかりやすくアシストしてくれる便利なツールですが、IDEと違って実際にiOSアプリケーションを動かしたり、画面レイアウトが崩れるなどのバグがあるかどうかをそのまま確かめたりはできないからです。
XcodeのようなIDEならば、書いたコードをすぐにコンパイル(人間が読みやすいソースコードからパソコン語に変換)し、すぐにアプリケーションを立ち上げて目で確かめられます。
基本的なバグのチェックからアプリのテストなども、XcodeというIDEを使うことで視覚的にわかりやすく作業できるんです。
Xcodeでできることって?
先程の説明と一部重複してしまいますが、XcodeではiOS向けのアプリ(iPhoneアプリ)だけではなく、Apple製品の上で動くアプリケーションの多くを開発できます。
Appleのプロダクトでネイティブに動くアプリ(OSに最適化されたアプリ)を作るためには、このXcodeが必要になります。
ゲームアプリなど複雑なソフトウェアを作るとなれば、他のツールを積極的に活用していくべき場面もありますが、基本的にはXcodeさえあればいつでもどこでもAppleのプラットフォーム向けのアプリ開発ができるということ。
ちなみにAndroid向けのアプリ開発、クロスプラットフォーム開発(iOSでもAndroidでもWebでも動くアプリの開発)をする際には、Android StudioやEclipseというIDEが主に使われます。
Xcodeでできることはなにもソースコードを書いたりアプリを動かしたりすることだけではありません。開発したアプリをみんな大好きAppStoreに提出する際にも、このXcodeが良い仕事をしてくれます。
AppStoreにiOSアプリを提出するためには、電子証明書に署名をしたりプロファイルを用意したり本番環境向けにアーカイブしたりと、様々な作業が必要です。
証明書に署名…などと、文字にしてみるとなんとも面倒で難しそうに感じる作業ですよね。
しかしこれもXcodeに備わっている機能を使って行うことで、開発者にとって極力負担にならないよう配慮されているんですね。
Xcodeを手に入れるには?
Xcodeは、Mac App Storeからボタン一つでダウンロードできます。Macを持っている人ならば、誰でも今すぐにXcodeを試せますよ。
ちょっと大げさですが、Macさえあれば今この瞬間からiOS開発の奥深く楽しい世界へと踏み出せるんです!
ただあまりに古いバージョンのmacOSだと、最新のXcodeをダウンロードできない場合があります。
一からiOSアプリ開発について学びたいと考えている方は、最新OS(2021年末執筆時点ではmacOS:Monterey)に対応しているMacを用意するのが最善ですね。
またAppleのDeveloperサイトからは、バージョン別にXcodeをダウンロードすることも可能です。
開発を始めたばかりでは、複数バージョンのXcodeが必要になる場面はあまりないかもしれませんが、記憶の片隅にでも覚えておくと後々スムーズに対応できるでしょう。
なおXcodeは、macOS上のみでしか動作しません。
そのため、もしiOS開発を始めたいと思っている方でWindowsPCをお使いの場合には、新しくMacを用意していただく必要があります。
具体的にXcodeを見てみよう
簡単にではありますが、Xcodeの特徴的な機能について説明していきますね。
文章だとピンとこないことも、実際に目にするとイメージがしやすいかもしれません。
なのでここでは画像など交えながら、Xcodeについて知っていただきたい機能や構成などについてざっくりとまとめてみました。
XcodeのStoryboardについて
Xcodeに備わっているツールとして印象的なものといえば「Storyboard」でしょう。
Storyboardというのは、ドラッグ&ドロップでアプリ部品(UI部品)を配置していくためのツールです。
たとえば部品を追加する場合には、UI部品一覧から選択して目的の場所にドラッグ&ドロップするだけで配置できるんです。
2019年から発表された「SwiftUI」というフレームワークを使った開発では、Storyboardを使わないこともあります。
またプロジェクトによってはStoryboardを使わずに、コードのみで開発を進める手法を採用している場合もありますね。
しかしアプリ開発を始めたばかりの人にとっては、Storyboardで直感的にアプリ画面を作れると完成イメージが付きやすいですし、大きなメリットだと僕は感じますよ。
UI部品とは
上の説明の中にUI部品という言葉が出てきたと思うのですが、これはボタンやラベルなどのアプリ内のパーツのことです。
UIというのは、User Interface(ユーザインタフェース)の略。
ユーザがアプリを動かしたりする上で不可欠になるのが、このUI部品です。
XcodeではStoryboardやソースコードなどを使ってこのUI部品を組み合わせて、アプリケーションを作成します。
画像やボタン、テキスト入力パーツやリスト表示部品など、多くの種類が用意されているんです。
たとえばApple Musicを例にとってみてみましょう。
簡単にではありますが、UI部品に当たる部分のいくつかを色線で囲んでみました。
この画面だけでも、たくさんのUI部品があることがわかりますね。
普段Apple Musicを利用している人にはおなじみの再生画面。この画面に使われているUI部品を、簡単に解説してまいりましょう。
レッドの線で囲っているUI部品はボタン(UIButton)です。
iOS開発ではとても良く使われるパーツです。ボタン自体をデザインすることも、ユーザーにタップされたときに特定の処理を走らせることもできます。
ブルーの線で囲っている部分はラベル(UILabel)です。
これもiOSアプリでは必ずと言っていいほど使うおなじみのパーツですね。ユーザーのタップなどを受け付けることはできませんが、上で言うと「アヴィーチー」のように文字列を表示させるために使われます。
グリーンの線で囲っている部分はスライダー(UISlider)です。
Apple Musicの音楽再生画面では音量調整や再生位置の調整などですね。ユーザーの操作でなめらかに値を変化させる場合に主に使われます。
ピンクの線で囲った部分は、イメージビュー(UIImageView)です。
これは画像を表示させるためのUI部品であり、iOSアプリ開発でいえば額縁のようなものかもしれません。この部品を使うことによって、好きな画像をアプリ内に表示させることができます。
Auto Layoutとは
Storyboardについてお話する上で欠かせないのが「Auto Layout(オートレイアウト)」という機能です。これはUI部品をアプリの中で適切にならべるためのもの。
様々なメーカーによって製造されているAndroidに比べれば少ないですが、それでもiPhoneは機種によっていくつもの画面サイズがあります。
またiPadやMacにもアプリを対応させるとなると、それぞれの画面サイズに応じて適切にレイアウトを張る作業が必要。
とはいえ、画面サイズごとにすべてレイアウトを指定していたら膨大な時間がかかりますし、Appleから新製品が発売されるたびに、いちからレイアウトを考え直してUI部品を置いていかなければなりません。
それはあまりにもしんどいですよね。
そこでこのAuto Layoutの出番です。以下の画像をご覧ください。
この例では、ボタンをX軸Y軸ともに中央に揃えるというConstraints(制約)をつけています。
そのため、たとえば表示デバイスを上のiPhoneからiPadに変えてみても…
このように、ボタンはしっかり中央に固定されています。
これは極端にシンプルな例ですが、このようにしてAuto Layoutを使うことで、画面サイズによって自動的に適切なレイアウトに切り替えてくれるわけです。
また開発者側で、画面ごとのレイアウトについて細かく指定していくこともできますよ。
Auto Layoutはとても奥が深い機能でもありますので、別の記事にて詳しくご紹介していければと思います。
Xcodeのエディタについて
Xcodeには、超高性能なコーディングエディタが備わっています。
Xcodeのエディタのなにが素晴らしいのかと言うと、コーディングをしながらほぼリアルタイムで、SwiftやObjective-Cの文法チェックを行ってくれたり、自動補完をしてくれたりするということ。
下は、print関数を実行しようとしたときのエディタを切り取ったものです。これは書いている途中であり、構文が完璧ではないため赤いマーカーとWarning(注意)文言で知らせてくれます。
同時に、「あなたが書きたいのはこれですか?」というふうに、入力内容のサジェストを表示してくれる。
こういった文法チェックなどを行ってくれるエディタは、なにもXcodeのエディタだけではありません。
Android Studioなどにも同じ機能がありますし、他のエディタでも設定によって同じようなことができる場合もあります。
しかし僕の設定が間違っているのかもしれませんが、自動補完においてはAtomやVSCode、Android Studioなどと比べてもXcodeはとても精度が高いように思います。
Xcodeのデバッグ機能について
Xcodeには、強力なデバッグツールも同梱されています。LLDBと呼ばれるデバッグツール(デバッガ)です。
Xcodeを触りはじめたばかりではそうたくさん使う機会はないかもしれませんが、アプリ開発においてデバッグ(不具合がないか調べたりバグを直したりする工程)は不可欠。
下の画像では、処理を途中で止めてViewというUI部品の高さを調べる際の記述例です。これはXcodeのデバッグエリアに表示されます。
iOSエンジニアとしてアプリのクラッシュ(異常終了)に遭遇したとしましょう。
どれほど腕の良いエンジニアであっても、熟練者であっても、原因を調べるために何百ファイルあるうちのすべてのソースコードを見直すのは現実的ではないですよね。
このLLDBが備わっていることによって、いつどのタイミングで、何が原因でアプリがクラッシュしてしまったのかを解析できるんです。
こうした機能もまたXcodeの素晴らしい特徴であり、XcodeさえあればiOSアプリ開発がスムーズになると言われる所以だといえるでしょう。
さいごに
この記事では、Xcodeについてざっくりと説明をしてきました。
なんとなくでも、Xcodeがどういうものなのか分かっていただけたなら幸いです。
なお実際にXcodeを触ってみたい、アプリ開発を始めてみたいという方には、こちらの記事「Xcodeを使ってみよう!「Hello, Xcode!」を出力するまでをApple信者の現役iOSエンジニアが解説!」で実際の使い方を詳しくご説明しています。
お時間があるときに是非見てみてくださいね。
最後までお読みいただき、ありがとうございました!
楽しいiOS開発ライフを!