Visual Studio開発者のためのXcodeによるデスクトップアプリ開発

　Windows で開発してきた Visual Studio 開発者の中にも、Mac でのデスクトップアプリ開発を行いたい方がいるかと思います。この記事では、Visual Studio の用語と概念をベースとして、Xcode で簡単なデスクトップアプリを作成する手順を説明します。

## 対象
- Visual Studio での開発経験はあるが、Xcode に触れたことが無い方
- Xcode でデスクトップアプリを作成したい方（モバイルアプリは扱いません）

## 目標
　簡単なデスクトップアプリ（テキストフィールド、ラベル、ボタンのみで構成）を作成する。

## 要点
- フォームの追加は Story Board で行う。
- コントロールオブジェクトの追加は Story Board から View Controller へコントロールキー＋ドラッグ [(*1)](#ctrl+drag) で行う。
- イベントハンドラの追加は Story Board から View Controller へコントロールキー＋ドラッグ [(*1)](#ctrl+drag) で行う。

<div id="ctrl+drag">*1 コントロールキーを押したまま、マウスの左ボタンでドラッグすることを意味します。</div>

## 手順
### 1. プロジェクト作成
- Xcode を起動します。
- Create a new Xcode project をダブルクリックします。  
![project1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/3d669ea7-3c97-9d76-7bdf-4909b09b0df2.png)   
　
- Cocoa Application を選択し、Next をクリックします。  
![project2.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/10662fa0-67d9-568b-1f21-36a80328bc1b.png)  
　
- Product Name と Organization Name は任意で記入します。Language で Swift を選択し、Use Storyboards をチェックし、Next をクリックします。  
![project3.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/9ddc9ca7-8893-5ce4-5568-6efd0911190d.png)  
　
- 次に、プロジェクト作成場所を任意で選択します。その後、プロジェクトが開始します。

### 2. フォーム追加
- 左側のナビゲータより Main.storyboard を選択します。
- 右下の Show the Object library より Text Field （以降テキストフィールドと表記）を選択します。  
![form1-1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/ec446622-ede6-d9e8-72e2-8337354db2b8.png)  
　
- View Controller にドラッグ＆ドロップすることで、テキストフィールドのフォームが追加されます。  
![form2-1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/77c26ef1-543d-852e-9a4f-b6ee355ecd79.png)  
　
- Round Rect Button （以降ボタンを表記）と Label （以降ラベルと表記）も同様に実行します。
- フォームデザインの変更は右上の Show the Attributes inspector で行います（本記事では扱いません）。  
![form3-1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/1a9a2121-9233-5d45-980d-35787fe4ae9e.png)

### 3. コントロールオブジェクト追加
- 前回とは異なる画面ですが、作業が行いやすいようにヘッダー右側の Hide or show the Navigator と Hide or show the  Utilities でナビゲータとユーティリティを隠しています。
- 更に、本作業のために Show the Assistant editor を選択しています。  
![controlobject0-1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/eb7ff11e-11fc-cae3-9c96-e75641a4afb8.png)  
　
- Main.storyboard よりテキストフィールドを選択し、コントロールキー＋ドラッグ [(*1)](#ctrl+drag) で View Controller クラスへドロップします。
- Connection で Outlet を選択し、Name を任意で記入し、Connect をクリックします。  
![controlobject1-1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/0e4cf97d-8e53-1b47-7fbe-a5b65032ec21.png)  
　
- これで、テキストフィールドのコントロールオブジェクトが作成されました。  
![controlobject2-1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/0d38dd42-e440-16ed-d3f6-bd84b9ecd05e.png)  
　
- ボタンとラベルも同様に実行します。  
![controlobject3-1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/c537e847-6b4d-8ded-7af3-4d9786c8f26f.png)

### 4. イベントハンドラ追加
- Main.storyboard よりボタンを選択し、コントロールキー＋ドラッグ [(*1)](#ctrl+drag) で View Controller クラスへドロップします。
- Connection で Action を選択し、Name を任意で記入し、Connect をクリックします。  
![eventhandler1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/b93e63f4-74d8-da84-cdd3-129c75152d0e.png)  
　
- これで、ボタンのクリックイベントハンドラが作成されました。  
![eventhandler2-1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/15ab15da-681e-c41d-b3ec-7e11ec11da26.png)  
　
- クリックイベント以外のイベントハンドラに関しては delegate を用いて作成します（本記事では扱いません）。

### 5. アプリ実行
- 先ほどのイベントハンドラに簡単な処理を記載します（テキストフィールドの値をラベルの値に引き渡します）。  
![eventhandler3-1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/8b69f66f-68c3-bd94-3d85-2732186dc311.png)  
　
- ヘッダー左側の再生ボタン (Built and then run the current scheme) をクリックします。
- アプリが実行されます。  
![window1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/f6200166-45c2-a5c4-ab63-d18d683b8a37.png)  
　
- ボタンをクリックすると、正しく処理するのが確認できると思います。  
![window2.PNG](https://qiita-image-store.s3.amazonaws.com/0/94701/ab600dae-dca6-d26e-68d9-0745ae10f4c1.png)  
　
- これにて、本記事による説明は終了です。お疲れさまでした。