SwiftRecipe は、iOSアプリ開発で使えるコンポーネントをレシピとして紹介するサイトです。
<h2>リポジトリ</h2>
SwiftRecipe ではレシピ集を<a href="https://github.com/DoshCook/SwiftRecipes">GitHub</a>にて管理しています。誤字や修正等、何かお気づきの場合はIssueを立てて頂ければ幸いです。
<h2>運営者について</h2>
<a href="https://doshcook.com">DoshCook</a>が運営しています。
<h2>今後の予定</h2>
<ul>
<li>ダークモード対応</li>
<li>検索機能</li>
</ul>
<h2>お問い合わせ</h2>
<a href="https://twitter.com/SwiftRecipes">Twitter</a>

Swift Recipes

XIB上に UILabel を配置して、Hello Wolrd! を表示させましょう。
<h2>はじめに</h2>
プロジェクトの作成は以下のレシピを基準としています。 
<a href="https://swift-recipes.doshcook.com/recipes/create-project">iOSアプリのプロジェクト作成 / XIB を使った開発</a>
<h2>サンプル</h2>
サンプルは<a href="https://github.com/DoshCook/SwiftRecipesSample/pull/7">DoshCook/SwiftRecipesSample</a>にあります。
<h2>XIBへの配置</h2>
まずはラベルを XIB上に配置してみましょう。
<ol>
<li>
配置したい画面の .xib ファイルを開き、+ボタンを選択します(図1)
<img src="/assets/basic-xib/images/figure1.png" alt="図1"> 
図1
</li>
<li>
UILabelを選択して画面上にドラッグ&#x26;ドロップします。（図2 -> 図3）
<img src="/assets/basic-xib/images/figure2.png" alt="図2"> 
図2 
<img src="/assets/basic-xib/images/figure3.png" alt="図3"> 
図3
</li>
<li>
AutoLayoutの設定します。
AutoLayout を用いてラベルの場所を指定します。今回は画面の中心に配置します。 
レイアウトを決めたいラベルを選択した状態で、画面下部の <code>Align</code> アイコンを選択します。
<code>Horizontally in Container</code> と <code>Vertically in Container</code> にチェックを入れて <code>Add Constraints</code> を選択します。（図4）
<img src="/assets/basic-xib/images/figure4.png" alt="図4"> 
図4
 <details><summary>現在ついているAutoLayoutの確認方法</summary>
 つけたAutoLayoutを確認する時は、画面上に出ているラインを選択するか、階層の `Constraints` 以下より確認することができます。
<img src="/assets/basic-xib/images/tips1.png" alt="Tips1">
 </details>
</li>
<li>
ラベルのテキストを Hello World!に変更しましょう。 
画面右の <code>Show the Attributes inspector</code> アイコンを選択し、ラベルのテキストを変更しましょう。 
<img src="/assets/basic-xib/images/figure5.png" alt="図5"> 
図5
</li>
</ol>
これで ラベルの配置ができました。 
実行して確認してみましょう。
<img src="/assets/basic-xib/images/figure6.png" alt="図6"> 
図6
<h2>コードと紐づける</h2>
次に xib に配置したUILabelをコードと紐付けしましょう。今回は <code>titleLabel</code> という名前にします。
<ol>
<li>
<code>Add Editor on Right</code> を選択します。(図7)
<img src="/assets/basic-xib/images/figure7.png" alt="図7"> 
図7
画面が分割されるので分割されるので片方はコードを表示しましょう（図8）
<img src="/assets/basic-xib/images/figure8.png" alt="図8"> 
図8
<details><summary>画面分割時のファイルを開く方法について</summary>
画面分割時には、フォーカスされている画面でファイルを開きます。
画面右側に配置したい場合は、右側をクリックしてから開きたいファイルを選択しましょう。
また、 <code>option</code> を押しながら選択した場合は、フォーカスされている画面の反対側の画面でファイルを開くことができます。
</details>
</li>
<li>
紐付けをするラベルを <code>control</code> を押しながらコードへドラッグします。（図9）
<img src="/assets/basic-xib/images/figure9.png" alt="図9"> 
図9
</li>
<li>
名前をつけて <code>connect</code> を選択します。（図10）
<img src="/assets/basic-xib/images/figure10.png" alt="図10"> 
図10
</li>
</ol>
これで、コードとの紐付けが完了しました。
<details><summary>名前を間違えた！再設定する場合</summary>
ラベルの名前を間違えてしまった場合には、再設定が必要です。
直接コードの名前のみを変えてしまうと、以下のようなエラーが発生して、クラッシュしてしまいます。
<blockquote>
*** Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[&#x3C;SwiftRecipesSample.BasicLabelViewController 0x7fe755a09160> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key titleLabel.' 
terminating with uncaught exception of type NSException
</blockquote>
このような場合には、XIB上の紐付け解除が必要になります。 
.xibファイルを開き、<code>File's Owner</code> を選択し、右側の　<code>Show the Connections inspector</code> アイコンを押し、Outletsの⚠️がついている部分を×ボタンから削除しましょう。 
<img src="/assets/basic-xib/images/tips2.png" alt="Tips2">
それから、再度上記の手順で紐付けを行ってください。
また、コード側から引っ張って紐づけることも可能です。（下図より） 
<img src="/assets/basic-xib/images/tips3.png" alt="Tips3">
</details>
<h2>複数のラベルを設置しよう</h2>
2つ目のラベルを配置しましょう。次のラベルは <code>descriptionLabel</code> とします。これは、 <code>titleLabel</code> の8px下に設置します。
<ol>
<li>
配置 
1つ目と同様の手順により、XIB上に配置します。大体おきたいところを目安にドラッグ&#x26;ドロップしましょう。（図11） 
<img src="/assets/basic-xib/images/figure11.png" alt="図11"> 
図11
</li>
<li>
縦の制約をつける 
続いて、画面下部の <code>Add New Constraints</code> アイコンを押し、AutoLayoutの設定を行います。 <code>titleLabel</code> より8px下に設置したいので、図12のように上の制約をつけます。 
<img src="/assets/basic-xib/images/figure12.png" alt="図12"> 
図12
制約をつけるときには、ターゲットとなるビューの選択を確認しましょう。（図13） 
<img src="/assets/basic-xib/images/figure13.png" alt="図13"> 
図13
</li>
<li>
横の制約をつける 
最後に横の制約をつけましょう。 
図12の画面で左右に余白を設定しても良いですが、今回は画面中央に指定します。 
<code>Align</code> アイコンより <code>Horizontally in Continer</code> にチェックを入れましょう。（図14） 
<img src="/assets/basic-xib/images/figure14.png" alt="図14"> 
図14
</li>
</ol>
これで2つ目のラベルの配置が完了しました。 
コード上での設定が不要な場合は、接続はしなくても大丈夫です。
<h2>レイアウトを調整する</h2>
まずは <code>titleLabel</code> のフォントサイズを大きくしましょう。 
XIB上で Hello World を選択し、 <code>Show the Attributes inspector</code> アイコンより、Fontを変更します。（図15）
<img src="/assets/basic-xib/images/figure15.png" alt="図15"> 
図15
また、<code>descriptionLabel</code> のテキストを 「Have fun with Swift!」に変更しました。
最後に画面の中心から少し上の方にずらしてみましょう。 <code>titleLabel</code> の水平方向のラインを選択し、右側の <code>Show the Attributes inspector</code> アイコンより、 <code>Constant</code> を変更します。（図16）
<img src="/assets/basic-xib/images/figure16.png" alt="図16"> 
図16
<h2>複数のラベルを配列で接続する</h2>
コードへ接続するときには、複数のラベルをまとめて配列に入れることもできます。
<ol>
<li>
先にコードに以下のように <code>IBOutlet</code> をつけた配列を用意します。
<pre><code class="hljs language-swift"> @IBOutlet private var labels: [UILabel] = []</code></pre>
</li>
<li>
配列に入れたいラベルに接続させます。（図17）
<img src="/assets/basic-xib/images/figure17.png" alt="図17"> 
図17
</li>
<li>
XIBの <code>Outlet Collections</code> に追加されていることを確認します。（図18）
<img src="/assets/basic-xib/images/figure18.png" alt="図18"> 
図18
</li>
<li>
コード上でラベルの色をまとめて変更してみましょう。
forEachを使い、ラベルの色をまとめて変更します。
<pre><code class="hljs language-swift">@IBOutlet private var labels: [UILabel] = []

override func viewDidLoad() {
 super.viewDidLoad()
 
 // ラベルの色をまとめて変更する
 labels.forEach {
 $0.textColor = .systemBlue
 }
}</code></pre>
</li>
</ol>
これで、本レシピのUIを実装することができました。
<h2>おわりに</h2>
XIBを用いたコンポーネントの配置方法の基本は以上になります。 
Storyboardを用いる場合も同様に Interface Builder 上での設置を行い、コードへの紐付けを行います。
それぞれのコンポーネントごとの使い方は、今後追加していく予定です。

XIBの使い方を紹介します。まずはUILabelを設置してHelloWorldを表示させましょう。Interface Builderの基本とコードへの紐付け方法を学ぶことができます。

XIBを使ったコンポーネント配置の基本

iOSアプリのプロジェクト作成方法とXIBを使った開発方法について紹介しています。ディレクトリ整理の方法やSceneDelegateについても触れています。

iOSアプリのプロジェクト作成 / XIB を使った開発

<code>R.swift</code> は <code>xib</code> を使った開発には、とても便利になるので是非導入しておいてください。 
本サイトのレシピの多くで用いていきます。
<h2>R.swift とは</h2>
<code>R.swift</code> はリソース管理をしやすくするライブラリです。リソースに型付けを行うことで、文字列のハードコードをする箇所がなくなり、更にはオートコンプリート機能を用いることができるようになります。
<a href="https://github.com/mac-cain13/R.swift">mac-cain13/R.swift: Strong typed, autocompleted resources like images, fonts and segues in Swift projects</a>
R.swiftを用いない場合
<pre><code class="hljs language-swift">// セルの登録
collectionView.register(CustomCollectionViewCell.self, forCellWithReuseIdentifier: "cell")

// セルの再利用時
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

// ViewController の生成時
let viewController = ViewController(nibName: "ViewController", bundle: nil)</code></pre>
R.swiftを用いる場合
<pre><code class="hljs language-swift">// セルの登録
collectionView.register(R.nib.customCollectionViewCell)

// セルの再利用時
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: R.reuseIdentifier.customCollectionViewCell, for: indexPath)!

// ViewController の生成時
let viewController = ViewController(nib: R.nib.viewController)</code></pre>
<h3>Mint での導入</h3>
今回は <code>Mint</code> を使った <code>R.swift</code> の導入方法を紹介します。その他の方法については<a href="https://github.com/mac-cain13/R.swift">README.md</a>をご確認ください。
<a href="https://github.com/yonaskolb/Mint">Mint</a>は Swift製のコマンドラインツールのインストールや実行を管理するツールです。
<details><summary>Mint の導入</summary>
Mint の導入は
<pre><code class="hljs language-bash">// Mint のインストール
$ brew install mint
// バージョン確認
$ mint version</code></pre>
で行うことができます。
</details>
<ol>
<li>
インストール 
プロジェクトのルートに <code>Mintfile</code> を作成します。
<pre><code class="hljs language-bash">cd プロジェクト名
touch Mintfile</code></pre>
<pre><code>.
├─ プロジェクト名.xcodeproj
├─ プロジェクト名
└─ Mintfile
</code></pre>
<code>Mintfile</code> に 以下を記述します。
<pre><code>mac-cain13/R.swift

// バージョン指定ありの場合
mac-cain13/R.swift@v5.3.1
</code></pre>
<code>Mintfile</code> のある場所で <code>mint bootstrap</code> を行います。
<pre><code class="hljs language-bash">mint bootstrap</code></pre>
</li>
<li>
Run Script を追加する
Xcodeでプロジェクトを開き、<code>TARGETS</code> > <code>BuidPhases</code> を開き、+ボタンより <code>New Run Script Phase</code> を選択します。（図1） 
<img src="/assets/rswift/images/figure1.png" alt="図1"> 
図1
以下の Script を追加します。(図2）
<pre><code class="hljs language-shell">if mint list | grep -q 'R.swift'; then
mint run R.swift rswift generate "$SRCROOT/プロジェクト名/Scripts/R.generated.swift"
else
echo "error: R.swift not installed; run 'mint bootstrap' to install"
return -1
fi</code></pre>
<code>Input Files</code>
<pre><code>$TEMP_DIR/rswift-lastrun
</code></pre>
<code>Output Files</code>
<pre><code>$SRCROOT/プロジェクト名/Scripts/R.generated.swift
</code></pre>
をそれぞれ追加します。(図2)
<img src="/assets/rswift/images/figure2.png" alt="図2"> 
図2
最後に <code>Compile Sources</code> の前に持っていき（図3）、ビルドをしましょう。
<img src="/assets/rswift/images/figure3.png" alt="図3"> 
図3
Compile Sources の後に配置しておくと、エラーが出る可能性があるので必ず移動させましょう。
</li>
<li>
R.generated.swift をプロジェクトに追加する
2の手順でビルドをしたら、 <code>Output Files</code> に指定した場所に <code>R.generated.swift</code> が生成されるので、それを Xcode 上に追加します。（図4）
<img src="/assets/rswift/images/figure4.png" alt="図4"> 
図4
追加する際には、<code>Copy If Needed</code> のチェックをオフにします。（図5） 
<img src="/assets/rswift/images/figure5.png" alt="図5"> 
図5
</li>
<li>
Swift Package Manager で R.swift.Library を導入する 
生成した <code>R.generated.swift</code> を実際に利用するために、 <code>R.swift.Library</code> を導入します。
<a href="https://github.com/mac-cain13/R.swift.Library">mac-cain13/R.swift.Library: Library containing types used by the R.swift project</a>
Xcode のナビゲーションバーより <code>File</code> > <code>Swift Packages</code> > <code>Add Package Dependency</code> を選択します。(図6)
<img src="/assets/rswift/images/figure6.png" alt="図6"> 
図6
<code>Enter package repositry URL</code> に <code>https://github.com/mac-cain13/R.swift.Library</code> を入力します。(図7)
<img src="https://res.cloudinary.com/swift-recipes/image/upload/v1622370747/rswift/rswift7_sta3qg.png" alt="図7"> 
図7
<code>Version Rules</code> は <code>Update Next Minor</code> を指定しました。(図8)
<img src="/assets/rswift/images/figure8.png" alt="図8"> 
図8
<code>R.swift</code> のみを選択して完了します。(図9)
<img src="/assets/rswift/images/figure9.png" alt="図9"> 
図9
</li>
</ol>
これで R.swift の導入ができました。
<h2>.gitignore で R.generated.swift を無視する</h2>
<code>R.generated.swift</code> は自動で生成されるファイルです。このファイルは Git での管理対象から外しておきましょう。
<code>.gitignore</code> に追記しておきます。
<pre><code class="hljs language-text">R.generated.swift</code></pre>
既に管理対象になってしまっている場合にはキャッシュを削除してリポジトリから削除します。
<pre><code class="hljs language-bash">git rm --cached `git ls-files --full-name -i --exclude-standard`</code></pre>

R.swift を使ってリソースを扱いやすくする方法を紹介します。iOSアプリ開発をする際には是非導入してみましょう。

R.swiftを導入する

<code>SwiftLint</code> を導入して、プロジェクトのコードを綺麗に統一されたものにしましょう。コードの品質を保つためには必須になります。
<h2>SwiftLint とは</h2>
<code>SwiftLint</code> は Swift のスタイルと規則をつけるための静的解析ツールです。規約は<a href="https://github.com/github/swift-style-guide">GitHub Swift Style Guide</a>をベースとしています。
<a href="https://github.com/realm/SwiftLint">realm/SwiftLint: A tool to enforce Swift style and conventions.</a>
<h2>Mint での導入</h2>
今回は <code>Mint</code> を使った <code>SwiftLint</code> の導入方法を紹介します。その他の方法については<a href="https://github.com/realm/SwiftLint#installation">README.md</a>をご確認ください。
<a href="https://github.com/yonaskolb/Mint">Mint</a>は Swift製のコマンドラインツールのインストールや実行を管理するツールです。
<details><summary>Mint の導入</summary>
Mint の導入は
<pre><code class="hljs language-bash">// Mint のインストール
$ brew install mint
// バージョン確認
$ mint version</code></pre>
で行うことができます。
プロジェクトのルートに <code>Mintfile</code> を作成します。
<pre><code class="hljs language-bash">cd プロジェクト名
touch Mintfile</code></pre>
<pre><code>.
├─ プロジェクト名.xcodeproj
├─ プロジェクト名
└─ Mintfile
</code></pre>
</details>
<ol>
<li>
インストール
<code>Mintfile</code> に以下を追記します。
<pre><code>realm/SwiftLint@0.44.0
</code></pre>
<code>Mintfile</code> のある場所で <code>mint bootstrap</code> を行います。
<pre><code class="hljs language-bash">mint bootstrap</code></pre>
<code>mint list</code> でインストールされたことを確認します。
<pre><code class="hljs language-bash">mint list</code></pre>
</li>
<li>
Run Script を追加する
Xcode でプロジェクトを開き、 <code>TARGETS</code> > <code>BuildPhases</code> を開き、+ボタンより <code>New Run Script Phase</code> を選択します。(図１) 
<img src="/assets/swiftlint/images/figure1.png" alt="図1"> 
図1
以下の Script を追加します。（図2）
<pre><code class="hljs language-shell">if which mint >/dev/null; then
mint run swiftlint swiftlint autocorrect --format
mint run swiftlint swiftlint
else
echo "warning: Mint not installed, download from https://github.com/yonaskolb/Mint"
fi</code></pre>
<img src="/assets/swiftlint/images/figure2.png" alt="図2"> 
図2
</li>
<li>
.swiftlint.yml を追加する
プロジェクトのルートに <code>.swiftlint.yml</code> を追加します。
<pre><code> .
 ├─ プロジェクト名.xcodeproj
 ├─ プロジェクト名
 ├─ Mintfile
 └─ .swiftlint.yml
</code></pre>
このファイルでは、詳細なルールを変更したり無効化したりすることができます。
<pre><code class="hljs language-yaml">included:
 - SwiftRecipesSample

excluded:
 - SwiftRecipesSample/Scripts/R.generated.swift
 - Carthage

line_length: 200
large_tuple: 5

file_length:
 warning: 500
 error: 1200

nesting:
 type_level:
 warning: 2

identifier_name:
 excluded:
 - id
 - URL
 - en
 - ja
cyclomatic_complexity: 20</code></pre>
<code>included</code> では ターゲットを記述してください。 
<code>excluded</code> では除外するファイルを記述します。<code>R.swift</code> と併用する場合には、ここに <code>R.generated.swift</code> を追加してください。
その他のルールについては、SwiftLint の<a href="https://github.com/realm/SwiftLint#configuration">README</a>をご覧ください。
</li>
<li>
ビルドをしましょう
<code>.swiftlint.yml</code> が反映されてない場合には一度クリーンビルド（⌘+Shift+K）をして、ビルドをしましょう。それでも反映されない場合には yaml の記述が正しいかの確認をしましょう。（余分なスペースなどに注意しましょう）
SwiftLintが正しく動作しているかを確認する際には、以下のようにルールに反する文を書いてビルドをして確認しましょう。（図3）
<pre><code class="hljs language-swift">let i = 1</code></pre>
<img src="/assets/swiftlint/images/figure3.png" alt="図3"> 
図3
</li>
</ol>
<h2>部分的にルールを無効化する</h2>
SwiftLintではコード上で明示的にルールを無効化するコメントを追加することで、エラーを回避することができます。 
例えば図3のエラーは以下のように回避することができます。
<pre><code class="hljs language-swift">let i = 1 // swiftlint:disable:this identifier_name</code></pre>
<img src="/assets/swiftlint/images/figure4.png" alt="図4"> 
図4
これらの無効化の方法の詳細は <a href="https://github.com/realm/SwiftLint#disable-rules-in-code">README</a>をご覧ください。
<h2>おわりに</h2>
SwiftLint 単体でも勿論利用可能ですが、以下のレシピと合わせて、是非環境構築をしてみてください。
<ol>
<li><a href="https://swift-recipes.doshcook.com/recipes/create-project">iOSアプリのプロジェクト作成 / XIB を使った開発</a></li>
<li><a href="https://swift-recipes.doshcook.com/recipes/rswift">R.swiftを導入する</a></li>
</ol>
SwiftLint ではそのほかにも様々な機能があります。<a href="https://github.com/realm/SwiftLint">GitHub</a>にてご確認ください。

iOSプロジェクトのコードを綺麗に統一されたものにするためのSwiftLintの導入方法を紹介します。