Xcode10でUIパーツとコードの関連付け(紐付け)と削除する方法

Xcode10でUIパーツとコードの関連付け(紐付け)と削除する方法


Xcodeをはじめて使う人にとって、iPhone画面のUIパーツとプログラムコードとの関連付け(紐付け)は、とても理解が難しいと思います。
関連付けと、その削除方法を動画で解説しました。

※この記事は、書籍「たった2日でマスターできる iPhoneアプリ開発集中講座 Xcode 10/Swift 4.2対応(2018年10月出版)」 に関して記載しています。

※最新版の書籍は、次のページをご確認ください。

XcodeでUIパーツとコードの関連付け(紐付け)と削除の解説(動画)

XcodeでUIパーツとコードの関連付け(紐付け)でのポイント

UIパーツとコードの関連付けについては、本書のP54で掲載されています。

XcodeでUIパーツとコードの関連付け(紐付け)と削除する方法

① UIパーツをクリックしてしっかりと選択する。

ここでパーツをしっかりと選択していないと、意図していないパーツを関連付けすることになったりして、トラブルの元になる。

② UIパーツを選択した状態で、controlキーを押しながら、クリックしてドラッグします。所定の場所にドラッグしたら、controlキーとクリックキーを外します。外すと、関連付け設定画面が表示されます。

プログラムエディタにドラッグする場所によって、プログラムの動きは変わります。ドラッグする場所を確認することが大切。ドラッグする場所を間違えると、のちのエラーの原因になります。

Xcode10でUIパーツとコードの関連付け(紐付け)と削除する方法

① デフォルトの「Outlet」のまま

② 関連付けの名前を入力します。この名前が、プログラムでこのパーツの使うときの名前になります。

関連付けの設定では、名前を間違えて入力しないように注意します。Xcodeでは、アルファベットの大文字・小文字をしっかりと区別するので、間違えて入力しないように注意。

③ 「connet」ボタンを押す。次のように、「@IBOutlet weak var outputLabel:UILabel!」という、プログラムコードが追加されれば、OKです。

Xcode10でUIパーツとコードの関連付け(紐付け)と削除する方法

XcodeでUIパーツとコードの関連付け削除でのポイント

UIパーツとコードの関連付け削除については、本書のP105で掲載されています。

Xcode10でUIパーツとコードの関連付け(紐付け)と削除する方法

上図のように、関連付けを削除するときはプログラムコードを削除します。

Xcode10でUIパーツとコードの関連付け(紐付け)と削除する方法

プログラムコードを削除しても、関連付けの情報は残っているので、必ず関連付けも削除します。

① 「View Controller」を「control」キーを押しながらクリックすると、サブメニューが表示されます。
② 関連付けが無効な状態の場合は、黄色い三角マーク(警告)が表示されています。
③ 「x」マークをクリックすると関連付けが削除されます。
④ サブ画面を閉じます。


よっしー

この記事を書いた人。 質問は、Twitter で受付けています。 エンジニア歴は約20年のフリーランスエンジニア。自分たちの資産になるWebサービスやアフィリエイトブログや新規事業が大好き。テニスコート予約サービスの開発 をしています。 4年連続出版【iPhoneアプリ開発集中講座】の著者。プロフィールの詳細はこちら。