harublog 
maharu
haru
maharu
ワークスペースについて
ワークスペースは下記画像の色分けされた５つの構成からなります。
| ナビゲーターエリア（青のエリア） | ファイルの一覧やプロジェクトの設定、検索等を行うエリア。 |
|---|---|
| エディターエリア（緑のエリア） | ソースファイル、ストーリーボードの編集を行うエリア。 |
| ユーティリティエリア（黄色のエリア） | オブジェクトのプロパティを設定するエリア。 |
| デバッグエリア（朱色のエリア） | デバックのログ、エラーを表示するエリア。 |
| ツールバーエリア（赤のエリア） | ビルド、実行、各エリアの表示制御をするエリア。 |
ナビゲーターエリア
ナビゲーターエリアはファイルの一覧やプロジェクトの設定、検索等を行うエリアで、詳細は下記の通りになります。
・ファイルツリーが表示されます。
・workspaceファイル(ツリーの一番上のプロジェクト名)をクリックするとプロジェクトの設定画面が表示されます。
・swiftファイルをクリックするとエディターエリアにファイルの内容が表示されます。
・Main.storyboardをクリックするとiPhoneのレイアウトを編集するストーリーボードが表示されます。
※ファイル名をダブルクリックするとエディタが別ウィンドウで開かれるので注意して下さい。
・Git管理ができます。
・Class、Method、変数の一覧が表示されます。
・変数等の対象をクリックするとエディターエリアに該当の箇所が表示されます。
・検索フォームに文字列を入力すると該当する文字列が含まれる結果が出力されます。
・結果の部分をクリックするとエディットエリアに対象のソースファイルが表示されます。
・エラーや警告があった場合に表示されます。
・テストを表示する項目です。
・実行するとデバック情報が確認できます。
・CPU、Memory、Disk、Networkそれぞれをクリックするとエディットエリアに詳細が表示されます。
・ブレイクポイントを張った一覧が表示されます。
・対象をクリックしてDeleteキーで削除することもできます。
・ビルド、デバックした記録が表示されます。
エディターエリア
エディターエリアはソースファイル、ストーリーボードの編集を行うエリアになります。
ナビゲーションエリアのファイル一覧から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にドラックアンドドロップし配置することができます。
下記画像①のボタンを押すとエディターエリアが２分割になります。もう一度押すと１画面に戻ります。
下記画像の①のボタンを押すと②のユーティリティーエリアが非表示になります。もう1度おすと再表示されます。
デバックエリア
デバッグ領域には、デバッグ実行時に、変数やレジスタの値、コンソールなどのプログラムの状態が表示されます。また表示だけでなく、一時停止したプログラムをステップ実行することも可能です。
以下はブレイクポイントで一時停止している状態のデバッグ領域です。たくさんの機能があるのですが、よく使うのは次の３つの部位です。
一時停止したプログラムを少しずつ実行していくには、ステップ実行を用います。ステップ実行しながら変数の内容を見ていくことでデバッグしやすくなります。
コンソール表示ではNSLog関数などで出力した内容が確認できます。
まとめ
Xcodeを使い始めの頃、ユーティティーバーが消えて困ったり、調べるのに時間がかかったりで苦労しましたので、参考にしていただけましたら幸いです。
Xcodeの便利なショートカットキー等についても今後の記事で書いていきたいと思います。
