【SwiftUI／Xcode】ワークスペース各エリアの解説と使い方
SwiftUIを利用してiosアプリの開発を行う際に使用するXcodeについて解説していきます。
Xcodeで開発を行う画面をワークスペースといい、ワークスペースにはいくつかのエリアが存在しています。本記事では、各エリアごとの役割とだいたいどんなことができるのかについて触れていきます。
プロジェクトの立ち上げ方については以下の記事で解説していますのでご確認ください。
ワークスペース
ワークスペースは、プロジェクトを立ち上げた時に開く画面のことで、ここで開発を行なっていくため、最も目にする画面です。
ワークスペースを構成するエリア
ワークスペースは以下の画面のようになっており、大きく5つのエリアで構成されています。
各エリアは、それぞれ以下の名称で呼ばれています。プロジェクトのファイル一覧の確認やソースコードの記述、プレビューの表示など、エリアごとに役割を持っており本記事でそれぞれの役割について解説していきます。
- ツールバー
- ナビゲータ
- エディタ
- キャンバス
- インスペクタ
エリア
ここからは各エリアの役割と、エリア内の要素の基本的な使い方について解説していきます。
ツールバー
画面上部にあるツールバーでは、主にワークスペースの表示に関わる部分の機能が存在しています。
まず、両端にあるボタンは折りたたみボタンでそれぞれナビゲータエリアとインスペクタエリアを閉じたり開いたりすることができます。これらを折りたたむことで、エディタとキャンバスをより大きく表示させて開発を行うことができます。
次は左上の再生・停止ボタンです。こちらは、iphoneのシミュレータを起動・停止するためのボタンです。シミュレータを使用することでキャンバスよりより実機に近い動作確認を行うことができます。
真ん中にあるエリアは現在のキャンバスとシミュレータに使用されているデバイスの種類を表示しています。このエリアを選択することで以下のようにデバイスの切り替えを行うことができます。
最後は右側のプラスボタンです。このプラスボタンは開発を進める上で非常に便利な機能で、オブジェクトやモディファイア、システム標準の画像などが載っています。これらを選択することでそのまま利用することができます。
オブジェクトやモディファイアについて知りたい方はこちらの記事をご確認ください。
ナビゲータ
画面左端にあるナビゲータについて解説していきます。
ナビゲータはプロジェクトに含まれているファイルが一覧で表示されます。ただ、厳密にはプロジェクトのファイル群がグループ化されて表示されているため、finderなどで確認する実際のディレクトリ構造とは異なる点にご注意ください。
実際のプロジェクトファイルであるContentViewなどを選択している際には右のエリアにはエディタとキャンバスが表示されますが、選択するファイルごとに右側に表示される画面が異なる点にも注意が必要です。
ファイル内の一番上のプロジェクト名を選択した場合、エディタとキャンバスの表示されるエリアにはプロジェクト全体の設定画面が表示されます。ここで、アプリの実行に必要なiphoneのバージョンや開発者の情報など多岐にわたる設定ができます。
続いて一覧の中のAssetsを選択した場合、画像ファイルなどをアップロードすることが可能な画面に切り替わります。
この画面で画像のアップロード、サイズの調整などを行うことができます。
エディタ
続いてはエディタです。ここに実際に動かしたいプロジェクトのソースコードを書いていきます。
画面の上部にあるのは現在開いているファイル名で、開いているファイルが複数存在する場合には複数のファイル名が表示され、現在洗濯中のファイルは青く表示されます。
ここには自分で直接コードを書き込んだり、ツールバーから確認できるオブジェクトやモディファイアを駆使して、実装を進めていきます。
キャンバス
キャンバスはエディタに書き込んだソースコードの内容が反映されて画面表示を確認するためのエリアです。キャンバスでは、書いたソースコードが間違ってないかなどの結果を即座に確認することができ、シミュレータで確認するほどではない表示に関する内容など書きながらリアルタイムで確認できるため非常に便利な機能です。
画面下側にある便利な機能についても触れていきます。右側にあるアイコンたちはキャンバスの表示サイズの倍率に関わる部分で、キャンバス上のiphoneの拡大、縮小ができます。左側の機能については「順番に説明していきます。
一番左の再生ボタンはキャンバスが表示された初期状態で選択されており、他のアイコンの機能を使用しない場合にはここを選択しておきます。
プレビューから対応するソースコードを検索
隣にある矢印ボタンを選択すると、エディタとキャンバスでお互いに対応している箇所を確認することができます。
矢印を選択した後にキャンバス上の球体の画像をクリックした状態が以下の画面になります。エディタ上で、クリックした画像を表示するためのコードが強調して表示されていることが確認できます。
今度は逆にエディタ側でコードをクリックしてみます。エディタ側でTextオブジェクトを選択すると、それに対応するキャンバスの「Hello,world!」が枠で囲まれていることが確認できます。
このように、キャンバス内の矢印を選択することでエディタとキャンバスで対応する箇所を確認しながら開発を進めることができます。プロジェクト開発を進めていってソースコードが何千行、何万行と増えていった際に、キャンバスからこのソースコードはどこにあるのかと探したり、ソースコード側から対象のパーツの表示上の有効範囲を確認する場合などに非常に便利です。
プレビュー表示スタイル一覧を確認
続いて、矢印の右隣のアイコンについて触れていきます。これは、キャンバス上で表示するiphoneの表示の種類のバリエーションを確認することができる項目で選択肢が3つ現れます。
「Color Scheme Variants」は、キャンバス上に表示されるiphoneのベースのカラーの種類を確認することができ、白と黒の2色の表示を確認することができます。
「Orientation Variants」は、iphoneの向きの種類である縦、右向きの横、左向きの横の3つのパターンを表示して確認することができます。
「Dynamic Type Variants」は、画面に表示されるこんてんつサイズ一覧を確認することができます。
プレビュー表示スタイルの変更
次は横のスイッチのようなアイコンの説明です。このアイコンでは、先ほど一覧で確認した一覧の中から使用したいスタイルを選択することでキャンバス上のiphoneの表示を変更することができます。
先ほどのアイコンで表示した際の見た目と名前を確認して、本アイコンで実際にキャンバス上に反映していく組み合わせになっています。
インスペクタ
ワークスペースで一番右に位置するインスペクタについて説明していきます。
インスペクタは、ソースコードで記述しているオブジェクトや関数の情報を確認するのに便利なエリアです。
オブジェクトの設定値を確認・変更
ソースコード上のTextオブジェクトを選択してから、インスペクタ上部の一番右端にある「Attributes Inspector」アイコンを選択すると、表示しているテキストの内容、フォントサイズや文字色などの情報を確認することができ、また、ここで設定値を変更することもできます。
試しにインスペクタのFontのColorを赤(Red)に変更してみます。
するとソースコード上でもTextオブジェクトにモディファイアが追加され、キャンバス上でも文字の表示が赤く変わることが確認できます。「Attributes Inspector」を使用すれば、直接ソースコードを記述しなくてもオブジェクトを変更することができるのです。
オブジェクトのヘルプ情報を参照
次に、「Quick Help Inspector」に触れていきます。これは、選択しているオブジェクトやモディファイアの簡易的なヘルプ情報を表示してくれるインスペクタです。ここで、実装中の機能の詳しい情報を確認することができます。
また、「Quick Help Inspector」の最下部に表示されている「Open in Developer Documentation」リンクをクリックすることで、対象のオブジェクトやモディファイアのドキュメントを表示することも可能です。
対象のオブジェクトの使い方や使用できるモディファイアの情報などが書かれており、まだ使用していない他のオブジェクトについても調べることができるのでとても重要なページになります。
最後に
本記事では、SwiftUIで開発を行う際のXcodeのワークスペースについて解説してきました。他にもSwiftの構文や変数の使い方などについても解説していますのでぜひそちらもご覧下さい。
-
前の記事
【SwiftUI基礎】Stack View徹底解説(VStack・HStack・ZStack) 2023.06.07
-
次の記事
【Swift/SwiftUI】配列の宣言と使用方法 2025.02.11
