【Xcode】ワークスペースの名称について

maharu

この記事はワークスペースの名称と便利なショートカットキーについて紹介する記事です。
Xcodeを使用し始めの頃、エリアの名前もわからないし、消えた時の対処法も分からなくて苦労したな〜

haru

maharu

私もそうでしたので、そのような方々のために参考になれば嬉しいです。笑

ワークスペースについて

ワークスペースは下記画像の色分けされた5つの構成からなります。

ナビゲーターエリア(青のエリア) ファイルの一覧やプロジェクトの設定、検索等を行うエリア。
エディターエリア(緑のエリア) ソースファイル、ストーリーボードの編集を行うエリア。
ユーティリティエリア(黄色のエリア) オブジェクトのプロパティを設定するエリア。
デバッグエリア(朱色のエリア) デバックのログ、エラーを表示するエリア。
ツールバーエリア(赤のエリア) ビルド、実行、各エリアの表示制御をするエリア。

 

ナビゲーターエリア

ナビゲーターエリアはファイルの一覧やプロジェクトの設定、検索等を行うエリアで、詳細は下記の通りになります。

Project navigator

・ファイルツリーが表示されます。
・workspaceファイル(ツリーの一番上のプロジェクト名)をクリックするとプロジェクトの設定画面が表示されます。
・swiftファイルをクリックするとエディターエリアにファイルの内容が表示されます。
・Main.storyboardをクリックするとiPhoneのレイアウトを編集するストーリーボードが表示されます。
※ファイル名をダブルクリックするとエディタが別ウィンドウで開かれるので注意して下さい。

Source Control navigator

 

・Git管理ができます。

Symbol navigator

・Class、Method、変数の一覧が表示されます。
・変数等の対象をクリックするとエディターエリアに該当の箇所が表示されます。

Find navigator

・検索フォームに文字列を入力すると該当する文字列が含まれる結果が出力されます。
・結果の部分をクリックするとエディットエリアに対象のソースファイルが表示されます。

Issue navigator

・エラーや警告があった場合に表示されます。

Test navigator

・テストを表示する項目です。

Debug navigator

・実行するとデバック情報が確認できます。
・CPU、Memory、Disk、Networkそれぞれをクリックするとエディットエリアに詳細が表示されます。

Breakpoint navigator

 

・ブレイクポイントを張った一覧が表示されます。
・対象をクリックしてDeleteキーで削除することもできます。

Report navigator

・ビルド、デバックした記録が表示されます。

エディターエリア

エディターエリアはソースファイル、ストーリーボードの編集を行うエリアになります。

ナビゲーションエリアのファイル一覧からMain.StoryboardをクリックするとStoryboard画面が表示される。ここからボタンやラベルを設置することができます。

swiftファイルをクリックするとソースコードが表示され編集することが出来ます。画面右上①をクリックし、②のAssistantに✅を入れると、画面上にストーリーボードとソースコードが分割して表示される。各パーツの紐付けやアクションを紐付ける際にドラッグアンドドロップする時に利用したりします。

ユーティリティーエリア

ユーティリティーエリアはオブジェクトのプロパティを設定するエリアになります。

Main.Storyboardにて設置したパーツの情報を確認することが出来る。また、文字の大きさや色、背景色、配置位置の変更をしたりすることも可能になります。

・インスペクタバー

アイコンをクリックするとインスペクタペインの内容が切り替わる。目的によって選択して編集する。

各項目の詳細については下記画像下に記載します。

・インスペクタペイン

文字の大きさや配置位置、Outletの確認などなどができる。

Show the File inspector

選択したパーツやswiftファイルの情報が表示さます。

Show Quick help inspector

選択しているパーツのクイックヘルプが表示されます。

Show the identity inspector 

選択したパーツのクラスやアイデンティティを編集する。例えばViewControllerとかでこのswiftファイルを使うなどの設定ができます。

Show the Attributes inspector 

選択したパーツの文字の大きさや色、背景色を設定することができます。

Show the Size inspector 

選択したパーツのサイズ、配置位置を設定、確認できます。

オートレイアウトの設定情報もここから削除や編集ができます。

Show the Connections inspector 

アクションやアウトレットの接続状況が確認できます。

ツールバーエリア

ツールバーはビルド、実行、各エリアの表示制御をするエリアになります。

下記画像の状態で  ボタンをクリックすると、プログラムはビルドされ、iPhoneの実機にインストールされ実行されます。⌘Rでもビルドができます。

上記画像のiPhoneの箇所をクリックすると、下記画像のように選択可能なシミュレーターが表示されます。iphone11を選択するとiphone11のシミュレーターが起動します。

下記画像①のボタンを押すと②が表示され、LabelやButton等をstoryboardにドラックアンドドロップし配置することができます。

下記画像①のボタンを押すとエディターエリアが2分割になります。もう一度押すと1画面に戻ります。

下記画像の①のボタンを押すと②のユーティリティーエリアが非表示になります。もう1度おすと再表示されます。

デバックエリア

デバッグ領域には、デバッグ実行時に、変数やレジスタの値、コンソールなどのプログラムの状態が表示されます。また表示だけでなく、一時停止したプログラムをステップ実行することも可能です。

以下はブレイクポイントで一時停止している状態のデバッグ領域です。たくさんの機能があるのですが、よく使うのは次の3つの部位です。

一時停止したプログラムを少しずつ実行していくには、ステップ実行を用います。ステップ実行しながら変数の内容を見ていくことでデバッグしやすくなります。

コンソール表示ではNSLog関数などで出力した内容が確認できます。

まとめ

Xcodeを使い始めの頃、ユーティティーバーが消えて困ったり、調べるのに時間がかかったりで苦労しましたので、参考にしていただけましたら幸いです。
Xcodeの便利なショートカットキー等についても今後の記事で書いていきたいと思います。

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です